技术解析

前端有没有离线的地图服务?
0
1975-03-01 12:25:15
idczone

项目需要在内网运行,但是高德百度等均无法通过 jsapi 接口实现离线地图。大家有什么好的方法吗?


离线地图主要解决的是瓦片存储问题,而不是 js-api

OpenStreetMap ( OSM )自己下载全球(或是指定区域)地图数据,根据自己的需要渲染地图,自己假设地图瓦片服务器。
配合 Leaflet 地图库,几乎可以涵盖高德百度地图的所有功能。
这一套完全可以离线部署。
另外关于 OSM 自己下载数据渲染这一步,如果觉得麻烦的话,可以写个爬虫,直接去爬 geoq 或是 wikimedia 的瓦片图,下载下来自己搭个静态文件服务就行了。

https://openmaptiles.org/

楼上说的自己搭建瓦片服务是可行的,但成本会非常高,需要懂 GIS 的才玩得转。
其实有个简单的方法,可以跟领导沟通下,让运维人员将高德或者百度地图 api 的域名加入到白名单中,这样是最简单的。

可以尝试自行搭建 wms 服务或者其他类似 wms 服务 (WMS-C\TMS\WMTS\WFS\WCS.列举可能不够详细) , 数据来源可以自行搜索. 自荐一下工具: https://github.com/huifer/tianditu-python 用来下载天地图的切片和 poi 数据. openlayers 自定义瓦片加载示例文章: https://blog.csdn.net/staHuri/article/details/88846239

资源:自己写一个地图下载器下载瓦片图 /或者找一个
前端:通过 leafletjs 提供展示
服务端:可以使用 node 写一个资源服务器或者使用 Geoserver 做地图服务

瓦片图估计会很大,我前两天也搭了个,百度的,只是简单的拼拼凑凑会用,因为项目只是为了验收,我也只下了一个县市的 17 级瓦片,有将近 80M 的大小

我正好做过一个业余个人项目,实现了浏览器端离线地图(缓存后)。
Demo: https://bus.kiwiberry.nz/favourites?isCollapsed=yes
代码: https://github.com/rocwang/bus
大致方案:
1. 去 https://openmaptiles.org/ 下载矢量地图包( sqlite db )。
2. 用 https://github.com/ibesora/vt-optimizer 去除不需要的图层以减小地图包体积。
3. 把地图用到的字体文件也写入地图包。
3. 用 brotli 压缩整个地图包,进一步减小其体积。
4. 把制作好的地图包另解压一份,以零散的字体文件和瓦片文件存储,以供浏览器无缓存第一次访问时使用。
5. 在前端实现 service worker,在 cache storage 中缓存压缩好的地图包。
6. 后续所有地图瓦片,字体的请求,均由 service worker 本地处理——使用 https://github.com/kripken/sql.js/ 在浏览器中直接查询基于 sqlite 的地图包,生成响应后直接返回给前端,从而实现离线地图。

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服