领图（一款给力的开源离线地图解决方案）

老司机张师傅

已于 2023-08-31 20:01:49 修改

阅读量4.6k

点赞数 4

分类专栏：离线地图文章标签：街景地图 leafletJs 离线地图

于 2020-05-14 16:27:19 首次发布

本文链接：https://blog.csdn.net/weixin_43464964/article/details/106104180

版权

离线地图专栏收录该内容

8 篇文章 8 订阅

订阅专栏

领图是作者完全自主研发的完全的一个离线地图解决方案，其中包含在地图上打点、绘制区域、点聚合、轨迹回放、修改主题样式等功能，下面简单介绍下我这个项目的使用方式。
该离线地图服务器支持下载高德、百度、谷歌等瓦片。
首先是下载与构建: 项目在gitee，下载完成后，可以导入idea或eclipse；
修改配置文件：
在这里插入图片描述
通过修改配置文件可以选择以下属性：
注意：第一次启动时最好把map.Lv8.flag属性改为true，默认把前八级全球的都下载下来，这样当缩放到较小级别时看到其他地方不会是空白的。

# 下载地图瓦片的保存路径
file.basepath=/Users/echo/Desktop/em-map
#file.basepath=H:/em-map
# 项目发布的瓦片图片地址
file.mapImgPath=Users/echo/Desktop/em-map
#file.mapImgPath=H:/em-map

# 下载地图的地址
map.baseurl=http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1scale=1&style=8&x={x}&y={y}&z={z}
#map.baseurl=http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}
# 下载地图的类型 CUSTOM  ArcGIS,一般CUSTOM就可
map.type=CUSTOM
# 线程数 下载地图瓦片时的线程数
map.threadNum=2000
# 是否下载前8级(如果开启默认打开时会直接自动下载前八级的,前八级因为瓦片数量不是很多,一般会选择下载全球的)
map.Lv8.flag=false
# 是否覆盖已有(该属性也可以通过前端传入)
map.download.append=false

mapurl.properties中存放了一些map.baseurl的可选路径
在这里插入图片描述
运行： 项目使用SpringBoot构建，在导入后可以点击主函数运行。

启动成功后，访问http://localhost:9090以进入下载地图瓦片的页面：

瓦片地图下载完成后，修改download-map.properties配置文件中的发布所需要的地图瓦片的路径（一般与刚刚下载的地图瓦片保存路径一致就可以），然后重新启动项目，这样你的离线地图就发布成功啦！

这里有一个需要注意的地方：修改页面上的保存路径并不会修改项目中的发布的地图瓦片路径，在下载完成后发布时需要修改properties文件来确保项目能够加载瓦片地图（也就是保存路径和发布路径不会联动）

在这里插入图片描述
启动成功后，在页面上通过以下标签来引入服务器上的js文件

<script type="text/javascript" src="http://127.0.0.1:9090/js/lmJs/lmBase.js"></script>

下面给出一个简单的页面示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <!-- 领图基础的样式与js文件	-->
    <script type="text/javascript" src="http://127.0.0.1:9090/js/lmJs/lmBase.js"></script>

    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
            color: orangered;
        }
    </style>
</head>

<body>
<div id='map'></div>
</body>

<script type="text/javascript">
    var map = L.initMap('map', {zoom: 9});
    L.marker([34.694, 113.587], {title: "hahah", riseOnHover: true}).addTo(map)
        .bindPopup('Hello world ~')
        .openPopup();
</script>

</html>