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個鏈接。 谷歌應該幫忙。