Leaflet 离线 Map：如何存储 map 以供离线使用？

Question

I want to save an OSM map with specific boundaries for offline usage in my file system without any DB outside of the web browser. After that I want to render the map with Leaflet library while offline. Is that possible?

Answer 1

I see two main approaches for this:

1. Using IndexedDB , WebSQL , Web Storage and/or related in-browser databases.

   From what I've seen, most developers prefer to rely on a library that wraps these technologies to offer consistent support across browsers (since not all browsers support all these technologies). Let me quote 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.

   In particular, an implementation of a PouchDB-backed Leaflet Tilelayer is available; but don't lat this prevent you from exploring other options.

2. Using ServiceWorker s ability to store things on a browser's Cache .

   A ServiceWorker is able to capture all network requests that a webpage makes, including tiles (even if the tileservers reside on a different domain name). Then, one can apply the known ServiceWorker -based caching techniques . After that, it should be even possible to send messages to the ServiceWorker to seed the cache (or just make enough fetch requests for the tiles).

   I'm not aware (at the time of this writing) of any straightforward Leaflet integrations. Implementation involves creating a manifest to point to the JS file with the ServiceWorker code, and an implementation of a cache mechanism .

Answer 2

I suspect this may be an XY problem, where saving tiles in cache of the web browser from an external provider sounds like only one of many possible solutions for the initial objective of offline usage, and not having to use (or actually not to install ?) a database on client side.

If that is the case, @IvanSanchez's Leaflet.TileLayer.MBTiles plugin could fit the bill: while the mbtiles file is technically a database, it is contained in a single portable file without requiring installation (it is an SQLite file).

The size could be over a browser cache, but if you have some control on the client, you can just copy it on file system. Then you can have your HTML page opened from file system as well, or a local server, which would also be more inline with offline usage.