Leaflet 离线地图:如何存储地图以供离线使用?

Leaflet Offline Map: How to store a map for offline usage?

我想在我的文件系统中保存具有特定边界的 OSM 地图以供离线使用,而无需在 Web 浏览器之外使用任何数据库。之后我想在离线时使用 Leaflet 库渲染地图。这可能吗?

我看到了两种主要的方法:

  1. 使用 IndexedDB, WebSQL, Web Storage and/or 相关的浏览器内数据库。

    据我所知,大多数开发人员更愿意依赖包含这些技术的库来提供跨浏览器的一致支持(因为并非所有浏览器都支持所有这些技术)。让我引用 MDN:

    Note: IndexedDB API is powerful, but may seem too complicated for simple cases. If you'd prefer a simple API, try libraries such as localForage, dexie.js, ZangoDB, PouchDB, idb, idb-keyval, JsStore and lovefield that make IndexedDB more programmer-friendly.

    特别是 implementation of a PouchDB-backed Leaflet Tilelayer 可用;但不要这样会妨碍您探索其他选择。

  2. 使用ServiceWorkers ability to store things on a browser's Cache.

    A ServiceWorker 能够捕获网页发出的 所有 网络请求,包括图块(即使图块服务器驻留在不同的域名上)。然后,可以应用 known ServiceWorker-based caching techniques。在那之后,甚至应该可以将消息发送到 ServiceWorker 来为缓存播种(或者只为磁贴发出足够的 fetch 请求)。

    我不知道(在撰写本文时)有任何直接的 Leaflet 集成。实施涉及创建 manifest to point to the JS file with the ServiceWorker code, and an implementation of a cache mechanism.

我怀疑这可能是一个 XY 问题,在网络浏览器的缓存中保存来自外部提供商的图块听起来只是初始 objective 离线使用的众多可能解决方案之一,并且没有在客户端使用(或者实际上不安装?)数据库。

如果是这样,@IvanSanchez 的 Leaflet.TileLayer.MBTiles plugin 可以 符合要求:虽然 mbtiles 文件在技术上是一个数据库,但它包含在一个可移植文件中无需安装(它是一个 SQLite 文件)。

大小可能超过浏览器缓存,但如果您对客户端有一定的控制权,则可以将其复制到文件系统。然后,您也可以从文件系统或本地服务器打开 HTML 页面,这也更适合离线使用。