rocwang

我正好做过一个业余个人项目，实现了浏览器端离线地图（缓存后）。

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 的地图包，生成响应后直接返回给前端，从而实现离线地图。