我正在实现一个Cordova应用程序(3.2),我想在其中使用LeafletJS和地图图块提供程序以及图块的本地文件系统缓存.

我在概述中的方法如下：

>扩展传单TileLayer
>覆盖_loadTile方法以从本地文件系统或从远程检索磁贴

我的代码：

var StorageTileLayer = L.TileLayer.extend({
log: function (text) {
  if (this.options.log)
    this.options.log(text);
  else
    console.log("[StorageTileLayer]: " + text);
},
_setUpTile: function (tile, key, value, cache) {
  try {
    tile._layer = this;
    tile.onload = this._tileOnLoad;
    tile.onerror = this._tileOnError;

    this._adjustTilePoint(tile);
    tile.src = value;
    this.fire('tileloadstart', {
      tile: tile,
      url: tile.src
    });

    this.log("Setting url to " + tile.src);
  }
  catch (e) {
    this.log("ERROR in setUpTile: " + e.message);
  }
},

_loadTile: function (tile, tilePoint) {
  this._adjustTilePoint(tilePoint);
  var key = tilePoint.z + ',' + tilePoint.y + ',' + tilePoint.x;
  var self = this;
  var tileUrl = self.getTileUrl(tilePoint);
  console.log(tileUrl);
  console.log(typeof tileUrl);
  if (this.options.storage) {
    this.log("Load Tile with storage");
    this.options.storage.get(key, tileUrl).then(function (value) {
      self.log("Tile URL to load: " + value.url);
      self._setUpTile(tile, key, value.url, true);
    });
  } else {
    this.log("Load Tile without storage");
    self._setUpTile(tile, key, tileUrl, false);
  }
}

});

options.storage是一种具有get(key,remoteUrl)方法的存储,它从本地文件存储中返回缓存的图块(此实现实际可行,因此这不是问题)或远程url,但在后台下载图块,以便下次调用时可以从本地文件存储中使用它.

不幸的是,当我使用Charles(Web调试代理)时,可以在设备上看到,尽管加载了本地地图图块(我可以从日志中看到它),但是仍然有一些向地图图块提供程序的请求.

是否有人知道我做错了什么以及必须在StorageTileLayer中覆盖什么才能阻止对远程的调用？真正的问题是,地图也应该在离线模式下工作,但事实并非如此.

谢谢你的帮助.

环境中的图书馆：

>传单(0.7.3)
> angularJS(1.2.16)
>科尔多瓦(3.2)

解决方法:

我基本上用以下代码(角度js)修复了它：

(function (window, L) {
  var isDebug = false;
  var StorageTileLayer = L.TileLayer.extend({

    log: function (text) {
      if (!isDebug)
        return;
      if (this.options.log)
        this.options.log(text);
      else
        console.log("[StorageTileLayer]: " + text);
    },
    _setUpTile: function (tile, key, value, cache) {
      try {
        tile._layer = this;
        tile.onload = this._tileOnLoad;
        tile.onerror = this._tileOnError;

        this._adjustTilePoint(tile);
        tile.src = value;
        this.fire('tileloadstart', {
          tile: tile,
          url: tile.src
        });
      }
      catch (e) {
        this.log("ERROR in setUpTile: " + e.message);
      }
    },

    _loadTile: function (tile, tilePoint) {
      this._adjustTilePoint(tilePoint);
      var key = tilePoint.z + ',' + tilePoint.y + ',' + tilePoint.x;
      var self = this;
      var tileUrl = self.getTileUrl(tilePoint);
      if (isNaN(tilePoint.x) || isNaN(tilePoint.y)) {
        this.log("TilePoint x or y is nan: " + tilePoint.x + "-" + tilePoint.y);
        return;
      }
      if (this.options.storage) {
        this.options.storage.get(key, tileUrl).then(function (value) {
          self.log("Tile URL to load: " + value.url);
          self._setUpTile(tile, key, value.url, true);
        });
      } else {
        this.log("Load Tile without storage");
        self._setUpTile(tile, key, tileUrl, false);
      }
    }
  });

  window.StorageTileLayer = StorageTileLayer;
})(window, L);

将平铺层添加到传单地图是重要的部分！您必须防止负载均衡器为每个图块获取不同的URL.我通过将tole层的url设置为固定值来做到这一点：

var url = 'https://a.tiles.mapbox.com/v3/<<YOUR ACCESS CODE>>/{z}/{x}/{y}.png';
    var layer = new StorageTileLayer(url, {
      storage: TileStorage
    });

当然,在我的情况下,您仍然必须实现TileStorage,它只有一个方法get(key,url)并返回$q-defer,可以使用本地可用文件来解决.如果该文件在本地存储中不可用,则将下载该文件,然后兑现承诺.

不幸的是,此TileStorage并非公开可用,因为它是我公司的内部开发项目,因此我无法共享.

不过,我希望这对您有所帮助.