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库。

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

Depending on the browsers, the limits in terms of size still exist。有关详细信息，请参阅localforage文档。

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

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

2 个答案: