前端有没有离线的地图服务？

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

OpenStreetMap （ OSM ）自己下载全球（或是指定区域）地图数据，根据自己的需要渲染地图，自己假设地图瓦片服务器。
配合 Leaflet 地图库，几乎可以涵盖高德百度地图的所有功能。

这一套完全可以离线部署。

另外关于 OSM 自己下载数据渲染这一步，如果觉得麻烦的话，可以写个爬虫，直接去爬 geoq 或是 wikimedia 的瓦片图，下载下来自己搭个静态文件服务就行了。

楼上说的自己搭建瓦片服务是可行的，但成本会非常高，需要懂 GIS 的才玩得转。

其实有个简单的方法，可以跟领导沟通下，让运维人员将高德或者百度地图 api 的域名加入到白名单中，这样是最简单的。

资源：自己写一个地图下载器下载瓦片图 /或者找一个
前端：通过 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 的地图包，生成响应后直接返回给前端，从而实现离线地图。