OpenLayers 3 可以使用 WebSQL 或 IndexedDB 缓存地图瓦片吗答案

【问题标题】：Can OpenLayers 3 use WebSQL or IndexedDB to cache map tilesOpenLayers 3 可以使用 WebSQL 或 IndexedDB 缓存地图瓦片吗
【发布时间】：2014-11-11 07:51:03
【问题描述】：

我使用的是 OpenLayers 3，我看到的所有离线示例仅包括用于保存和检索地图图块的 localStorage。问题是 localStorage 被限制在大约 5 兆字节，这对于我的应用程序来说太小了。

如果我改用 Leaflet，我可以通过在 getTileUrl 函数中编写自己的自定义存储解决方案来扩展 L.TileLayer。

OpenLayers 3 中有类似的东西吗？我真的很想在 localStorage 上使用 IndexedDb 甚至 WebSQL。

【问题讨论】：

标签： javascript caching openlayers-3

【解决方案1】：

在 OpenLayers 3 中，您可以使用自定义 tileLoadFunction 配置 tile 图层源来实现自己的存储解决方案：

new WhateverTileSource({
  tileLoadFunction: function(imageTile, src) {
    var imgElement = imageTile.getImage();
    // check if image data for src is stored in your cache
    if (inCache) {
      imgElement.src = imgDataUriFromCache;
    } else {
      imgElement.onload = function() {
        // store image data in cache if you want to
      }
      imgElement.src = src;
    }
  }
});

【讨论】：

【解决方案2】：

瑞士联邦的map.geo.admin.ch 通讯在移动设备上提供离线支持。此应用程序使用的代码是开源的，托管在 github (github.com/geoadmin/mf-geoadmin3)。对于存储能力，它使用了mozilla的localforage库，混合了localstorage、IndexDB、WebSQL。

The storage implementation for map.geo.admin.ch is here 作为 angularJS 服务。它在offline service 中用于下载和存储想要的图块。然后，您可以简单地使用 Andreas 的 tileLoadFunction 来重定向从存储中加载图块。这也可以在离线服务中找到。

Depending on the browsers, the limits in terms of size still exist。详情请参考localforage文档。

注意：我没有足够的业力来发布超过 2 个链接。谷歌应该提供帮助。

【讨论】：