Android 传单JS-带本地文件系统的缓存磁贴

我正在实现一个Cordova应用程序（3.2），我想在其中使用PropaleJS和地图分幅提供程序以及分幅的本地文件系统缓存

我的概述方法如下：

• 将传单延长到最后一层
• 覆盖

  \u loadTile

  方法以从本地文件系统或远程文件系统检索tile

我的代码： }))

options.storage

是一种具有方法

get（key，remoteUrl）

的存储器，它从本地文件存储中返回缓存的磁贴（此实现实际工作正常，因此这里没有问题）或远程url，但在后台下载磁贴，以便在下次调用时可以从本地文件存储中使用它

不幸的是，当我使用Charles（Web调试代理）时，我可以在设备上看到，尽管本地地图分幅已加载（我可以从日志中看到），但仍有一些对地图分幅提供程序的请求

是否有人知道我做错了什么，以及我必须在我的

StorageTileLayer

中覆盖哪些内容以防止远程调用？真正的问题是，地图也应该在脱机模式下工作，但事实并非如此

谢谢你的帮助

环境中的图书馆：

• 单张（0.7.3）
• angularJS（1.2.16）
• 科尔多瓦（3.2）

---

我基本上用以下代码修复了它（angular js）：

将平铺层添加到传单地图是重要的一部分！您必须防止负载平衡器为每个磁贴获取不同的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
    });

var url='1〕https://a.tiles.mapbox.com/v3//{z} /{x}/{y}.png'；
var layer=新的StorageTileLayer（url{
存储：瓷砖存储
});

当然，您仍然需要实现

TileStorage

，在我的例子中，它有一个方法

get（key，url）

，并返回一个

$q

-defer，该方法由本地可用文件解析。如果该文件在本地存储中不可用，将下载该文件，然后解决承诺问题

不幸的是，这个

TileStorage

不是公开的，因为它是我公司内部开发的，所以我不能分享

---

尽管如此，我希望这能对您有所帮助。

您好，我正在处理一个类似的问题，该问题在Chrome应用程序上不允许远程图像调用。我需要停止远程调用，检查它是否已经下载到本地文件系统，如果没有，则执行xhrhttpr请求以获取磁贴。您是否有幸使您的版本正常工作？如何将平铺层链接到传单地图？您总是这样做：

layer.addTo（map）如何创建图层可以在上面的帖子中看到。啊，谢谢-我正在使用angular指令，所以花了一些时间来弄清楚如何获取贴图：传单数据。getMap（）。然后（函数（贴图）{。。。
(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);

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