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

梦里梦外; 2023-03-13 12:27 2阅读 0赞

[领图][Link 1]是作者完全自主研发的完全的一个离线地图解决方案，其中包含在地图上打点、绘制区域、点聚合、轨迹回放、修改主题样式等功能，下面简单介绍下我这个项目的使用方式。  
该离线地图服务器支持下载高德、百度、谷歌等瓦片。  
**首先是下载与构建:** 项目在[gitee][Link 1]和[github][]上均有开源地址，下载完成后，可以导入idea或eclipse；  
**修改配置文件：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70]  
通过修改配置文件可以选择以下属性：  
注意：第一次启动时最好把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的可选路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70 1]  
**运行：** 项目使用SpringBoot构建，在导入后可以点击主函数运行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70 2]  
**启动成功后，访问http://localhost:9090以进入下载地图瓦片的页面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70 3]  
瓦片地图下载完成后，修改download-map.properties配置文件中的发布所需要的地图瓦片的路径（一般与刚刚下载的地图瓦片保存路径一致就可以），然后重新启动项目，这样你的离线地图就发布成功啦！

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

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

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

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Leaflet Map</title>
        
        <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>

直接启动上面这个文件，你就可以看到自己的地图啦！  
**具体的其他操作如画布、点聚合、轨迹回放等示例**请参照 [leadermap-leaflet][]  
（这个项目可以单独运行，不强制依赖于离线地图服务器）

最后，再次附上两个项目的地址：  
地图服务器（下载与发布一体）：[https://gitee.com/xiaoZ1712/ldmap-download.git][Link 1]  
基于leaflet.js的webJs：[https://gitee.com/xiaoZ1712/leadermap-leaflet.git][leadermap-leaflet]  
以及二次开发手册地址：[http://61.145.229.217:9090/api/][http_61.145.229.217_9090_api]  
希望您能够喜欢！

[Link 1]: https://gitee.com/xiaoZ1712/ldmap-download.git
[github]: https://github.com/Vhhhhh/ldmap-download.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70]: /images/20230312/b5dbc28085444b60be938a38e60182be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70 1]: /images/20230312/fc7e995901f748d9a865c556cca747fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70 2]: /images/20230312/a47cf026f6364c76bb5537ce1bfeb2c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70 3]: /images/20230312/7e0249944e2b40e69eef152edd4b6077.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NDk2NA_size_16_color_FFFFFF_t_70 4]: /images/20230312/caca004973f34ef685a192bebda3146a.png
[leadermap-leaflet]: https://gitee.com/xiaoZ1712/leadermap-leaflet.git
[http_61.145.229.217_9090_api]: http://61.145.229.217:9090/api/