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

Posted 2023-02-19

【中文标题】如何通过缓存制作离线地图（使用传单 OSM）？

【英文标题】：How to make offline maps(using leaflet OSM) , by caching?

【发布时间】：2013-04-08 20:21:36

【问题描述】：

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

然后我必须在逻辑上离线加载图块。

但是，我无法弄清楚。

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

【问题讨论】：

@Leonid 请停止这些建议的编辑。 1) 添加一堆换行符没有帮助 2) 使用 <br/> 标签不是在堆栈溢出中插入换行符的首选方式 - 首选标记规则（以两个空格而不是一个空格结束一行）

【参考方案1】：

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

用于存储使用 IndexedDB 和 WebSQL。存储性能低下，未经测试。

【讨论】：

我认为您只是存储在缓存中。正确的？我们可以将瓦片存储在本地存储中，然后在离线时加载它们吗？

应用程序缓存中没有存储源文件，IndexedDB 或 WebSQL 中没有缓存切片。您可以使用 localstorage（这很容易，因为它是同步的），但它有一些大小限制（按规格 5MB，实际见 dev-test.nemikor.com/web-storage/support-test）。但是，您可以使用这样的 hack：filldisk.com，但这不适用于所有浏览器，可以修复。

哦，k。所以，你正在缓存瓷砖。我现在明白了。我能说点什么......正如你提到的将文件缓存在 appcache.manifest 文件中，它会自动存储图块。我认为您不需要在 IndexedDB 或 WebSQL 中显式存储图块。一旦尝试，不将切片存储在 IndexedDB 中。它们将自动存储，因为您已包含 appcache.manifest 。非常感谢。

您可以尝试将所需的切片添加到应用程序缓存中，这可以工作，但您必须知道您需要哪些切片（因为我知道应用程序缓存无法从 js 动态存储任何文件）以及您需要的每个切片必须写入应用程序缓存清单文件，例如为拥有 20 亿人口且缩放 1-16 的城市存储图块，您需要超过 3000 个图块。

【参考方案2】：

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

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

【讨论】：

嘿，你完成了吗？

点击链接。截至 2014 年 8 月，他基本上最终使用了 pouchDB

【参考方案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 上，目前仍在进行中！