offline - 如何通过缓存制作离线地图（使用传单 OSM）？

Question

我正在尝试通过浏览器中的缓存（IndexedDB）制作离线地图。我理解这个概念是我在连接到互联网时首先下载并存储地图的图块。

然后我必须在逻辑上离线加载瓷砖。

但是，我无法弄清楚。

我如何存储它们以及如何在逻辑上再次加载它们？我被困在这里。我正在使用 leaflet API地图。如何实施？

Answer 1

请参阅我对此的广泛研究：

为离线 Web 应用程序存储图像数据（客户端存储数据库）

并在：

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 加载它们。

我已经实现了一个自定义层，如果可用，它从数据库（indexeddb/webdatabase）加载切片，并回退到切片服务器（具有 Access-Control-Allow-Origin 标头，请参阅https://developer.mozilla.org/en- US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials）

我实现了一个控件，它将当前视图中的图块保存在 indexeddb 或 web 数据库中。

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