leaflet - 使用 PouchDB 作为离线栅格 map 缓存

Question

我一直在探索使用 PouchDB 作为栅格 map 切片的离线缓存。具体来说，对于传单。我刚刚完成了一些初步测试，我想分享一下。

Answer 1

我创建了一个“JsFiddle”(实际上我最近更喜欢 CodePen)，作为展示如何使用 PouchDB 缓存离线栅格 map 切片的 Playground 。

http://codepen.io/DrYSG/pen/hpqoD

它使用的算法如下:

• 测试 XHR2、IndexedDB 和 Chrome(没有二进制 blob，但 Base64)。并显示此状态信息
• 从 GoogleDrive 获取 PNG 磁贴的 JSON list (我有 171 个 PNG瓷砖，每个尺寸为 256x256)。 list 列出了他们的名字和尺寸。
• 将 JSON list 存储在数据库中
• MVVM 和 UI 控件来自 KendoUI(这次我没有使用他们的出色的网格控制，因为我想探索 CSS3 网格样式)。
• XHR2 来自:https://github.com/p-m-p/xhr2-lib/blob/master/test/index.html
• 我正在使用 PouchDB 的夜间版本
• 所有 PNG 文件都存储在 Google 云端硬盘(NASA Blue Marble。
• 我使用 Safe FME 2013 Desktop 创建了磁贴金字塔。 http://www.safe.com/fme/fme-technology/fme-desktop/overview

在按下“下载磁贴”按钮之前检查 list 是否已存储在数据库中，并且存在 171 个磁贴。如果您已经运行了测试，那么您的 PouchDB 将已经在 DB 中有磁贴，并且您将收到错误。在这种情况下，请按 Delete DB，然后重新加载页面。

当您按“下载瓷砖”时，会发生以下步骤:

• Manifest 是从数据库中获取的
• XHR2 Fetch 循环从 GoogleDrive 抓取 PNG blob。
• 当循环运行时，它开始将 Blob 保存到 PouchDB 中。
• 注意:获取和保存是在重叠的线程上(想想协程)，因为那些(获取和存储)操作正在运行在单独的线程上异步。
• 当 Fetch 循环完成后，它会报告耗时。
• 注意:这次不是纯粹的 Fetch 工作，因为 PouchDBputAttachments() 是并行运行的。
• 当所有的 Tiles 被保存后，它会报告完整的统计信息，并且显示从 PouchDB 获取的磁贴。
• Blob-Rate 每个 png tile 的总提取和存储时间

现在 Chrome 运行良好。火狐很慢。几个月前，我在做原生 IndexedDB API 时发现了这一点。所以我不认为这是一个 PouchDB 问题。可能更多是因为 FireFox 使用 SQLlite，这是一种非 SQL 数据库的关系方法。

IE10 不工作。这很可悲，因为我之前对 IE10 的测试表明它有一个非常快的 IndexedDB 解决方案:Storing Image Data for offline web application (client-side storage database)

• 必读文章“浏览器如何存储 IndexedDB 数据” http://www.aaron-powell.com/web/indexeddb-storage
• 注意:FireFox 将 SQLlite 用于 NOSQL IndexedDB。那可能是性能缓慢的原因。 (blob 单独存储)
• 注意:Microsoft IE 使用可扩展存储引擎: http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• 注意:Chrome 使用 LevelDB http://code.google.com/p/leveldb/