OpenLayers 3可以使用WebSQL或IndexedDB来缓存地图图块

Question

我正在使用OpenLayers 3，我见过的所有离线示例都只包含localStorage来保存和检索地图图块。 问题是localStorage限制在大约5兆字节，这对我的应用来说太小了。

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

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

Answer 1

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

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;
    }
  }
});

Answer 2

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

map.geo.admin.ch的存储实现在这里作为angularJS服务。 它在离线服务中用于下载和存储所需的磁贴。 然后你可以简单地使用Andreas的tileLoadFunction重定向从存储中加载tile。 这也可以在离线服务中找到。

根据浏览器的不同，尺寸方面的限制仍然存在 。 有关详细信息，请参阅localforage文档。

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