使用PouchDB作为离线栅格地图缓存 [英] Using PouchDB as an offline raster map cache

问题描述

我一直在探索使用PouchDB作为栅格地图图块的脱机缓存.特别是对于传单.我刚刚完成了一些我想分享的初步测试.

I have been exploring using PouchDB as an offline cache for raster map tiles. Specifically, for Leaflet. I have just finished some preliminary tests which I thought I would share.

推荐答案

我创建了一个"JsFiddle"(这些天实际上我更喜欢CodePen)，作为展示如何使用PouchDB缓存离线栅格地图图块的游乐场

I have created a "JsFiddle" (actually I prefer CodePen these days), as a playground for showing how to use PouchDB to cache off-line raster map tiles.

它使用的算法如下:

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

• Test for presence of XHR2, IndexedDB, and Chrome (which does not have binary blobs, but Base64). and show this status info
• Fetch a JSON manifest of PNG tiles from GoogleDrive (I have 171 PNG tiles, each 256x256 in size). The manifest lists their names and sizes.
• Store the JSON manifest in the DB
• MVVM and UI controls are from KendoUI (This time I did not use their superb grid control, since I wanted to explore CSS3 Grid Styling).
• XHR2 is from: https://github.com/p-m-p/xhr2-lib/blob/master/test/index.html
• I am using the nightly build of PouchDB
• All files PNG file are stored on Google Drive (NASA Blue Marble.
• I created the tile pyramid with Safe FME 2013 Desktop. http://www.safe.com/fme/fme-technology/fme-desktop/overview

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

Before Pressing the button "Download Tiles" Check to see that the manifest has been stored in the DB, and that 171 tiles are present. If you already ran the test then your PouchDB is going to already have tiles in the DB, and you will get errors. In that case, Press Delete DB, and then reload the page.

当您按下载图块"时，将发生以下步骤:

When you press "Download Tiles" The following steps occur:

• 清单是从数据库中获取的
• XHR2抓取循环从GoogleDrive抓取PNG Blob.
• 在循环运行时，它开始将Blob保存到PouchDB中.
• 注意:获取和保存位于重叠的线程上(请考虑 协同例程)，因为这些(获取和存储)操作正在运行 在单独的线程上异步.
• 完成提取"循环后，它会报告经过的时间.
• 注意:由于PouchDB，这次不是纯粹的Fetch工作 putAttachments()并行运行.
• 保存所有图块后，它将报告完整的统计信息，并且 显示从PouchDB获取的磁贴.
• Blob费率表示每个png瓦片的总获取时间和存储时间

• The Manifest is fetched from the DB
• A XHR2 Fetch loop grabs the PNG blobs from GoogleDrive.
• As loop runs, it starts saving the Blobs into PouchDB.
• Note: Fetching and Saving are on overlapped threads (think co-routines), since those (fetch & store) operations are running async on separate threads.
• When the Fetch loop is done it reports the elapsed time.
• Note: This time is not pure Fetch work, since PouchDB putAttachments() are running in parallel.
• When all the Tiles are saved, it will report full statistics, and display a tile fetched from PouchDB.
• The Blob-Rate the total fetch and store time per each png tile

目前，Chrome运行正常. Firefox非常慢.几个月后，当我执行本机IndexedDB API时，我发现了这一点.所以我不认为这是PouchDB的问题.可能更多的原因是FireFox使用了SQLlite，这是对无SQL DB的一种关系方法.

Right now Chrome is running fine. Firefox is very slow. I found this out a few months when I did a native IndexedDB API. So I don't think this is a PouchDB issue. Probably more due to FireFox using SQLlite which is a relational approach to a no-SQL DB.

IE10无法正常工作.令人遗憾的是，因为我之前使用IE10进行的测试表明它具有非常快速的IndexedDB解决方案:

IE10 is not working. This is sad, since my prior tests with IE10 shows it has a fantastically fast IndexedDB solution: Storing Image Data for offline web application (client-side storage database)

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

• A Must read article on "How the browsers store IndexedDB data" http://www.aaron-powell.com/web/indexeddb-storage
• Note: FireFox uses SQLlite for the NOSQL IndexedDB. That might be the reason for the slow performance. (blobs stored separately)
• Note: Microsoft IE uses the extensible storage engine: http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• Note: Chrome uses LevelDB http://code.google.com/p/leveldb/

这篇关于使用PouchDB作为离线栅格地图缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！