如何通过缓存来制作离线地图(使用leaflet OSM)？

Question

我正在尝试通过浏览器中的缓存(IndexedDB)制作离线地图。我理解的概念是，当我连接到互联网时，我首先下载并存储地图的瓦片。

然后我必须在逻辑上离线加载磁贴。

然而，我不能弄清楚。

我如何存储它们，以及如何逻辑地再次加载它们？我被困在这里了。我正在使用地图的leaflet API。如何实现这一点？

Answer 1

查看我在这方面的广泛研究：

Storing Image Data for offline web application (client-side storage database)

和在：

https://gis.stackexchange.com/questions/44813/database-for-offline-slippy-map-tiles

你想要做什么的关键是一个功能瓦片层，用于从数据库中获取内容：

https://github.com/ismyrnow/Leaflet.functionaltilelayer

顺便说一句，我现在正在测试PouchDB，它比原始的IndexeDB干净得多。

在以下位置关注我的结果：

https://groups.google.com/forum/?fromgroups#!topic/pouchdb/RG6wUsAi2R0

Answer 2

我有缓存示例实现http://tbicr.github.com/OfflineMap/leaflet/index.html和代码https://github.com/tbicr/OfflineMap/tree/master/leaflet_idb_sql_site。

对于存储，使用IndexedDB和WebSQL。存储的性能较低且未经过测试。

Answer 3

我正在为同样的问题研究一个解决方案。存储来自tileserver的瓦片，并将它们从数据库加载到leafletjs中。

我已经实现了一个自定义层，它从db (索引数据库/webdatabase)加载磁贴(如果可用)，并后退到一个平铺服务器(它有Access-Control-Allow-Origin头，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials)。

我实现了一个控件，它将当前视图中的磁贴保存在indexeddb或webdatabase中。

代码在https://github.com/allartk/leaflet.offline上，目前仍在进行中！