传单等待承诺解决

Question

我正在扩展 Leaflet getTileUrl 以用于某种缓存图块。我使用 Vue，但它不应该影响任何东西。目前看起来像这样：

   //step 1 
   L.TileLayer.MyLayer = L.TileLayer.extend({
        getTileUrl: function(coords) {
            
            var url = this.getLayerUrl(coords.z, coords.x, coords.y);

            return url;

        }.bind(this)
    });

    //step 2
    L.tileLayer.myLayer =  function() {
        return new L.TileLayer.MyLayer();
    }

    //step 3
    L.tileLayer.myLayer().addTo(this.getParent('main-map').map);

问题是 getLayerUrl 函数 return 是一个承诺。即使当我试图使 getTileUrl async 而不是 await for this.getLayerUrl （以及使异步等待步骤 2 和 3) 或将 .then(function(result) {return 结果;} 在 this.getLayerUrl 之后，Leaflet 在浏览器控制台中显示错误它正在尝试从 url 获取图块：GET http:///localhost/project/public/[object%20Promise]

另外我要提一下 this.getLayerUrl return 每个图块都不同 url，它实际上是一个 blob url 像：blob:http:/ /localhost/f7c4298f-9e9d-423f-9d0b-3f7a301e433f 但如果 url 是正确的 returned 传单没有问题并且正确显示了磁贴。

Answer 1

很遗憾，您想要实现的目标是不可能的。 getTileUrl() 方法应该直接 return url，即不包含在承诺中。但是，您从 getLayerUrl 得到 url return 是一个承诺。您根本无法在 getTileUrl().

中同步等待 promise 的结果

await 关键字表明这是可能的，但事实并非如此。 await 只是语法糖，一个 shorthand 用于链接承诺。我举个简单的例子。

function getUrl() {
    return getAsyncUrl().then(url => {
         return transformUrl(url);
    });
}

async/await允许这样写：

async function getUrl() {
    const url = await getAsyncUrl();
    return transformUrl(url);
}

但在幕后它仍然使用承诺。 async 函数总是 return 是一个承诺。

Answer 2

这里的做法不是提供getLayerUrl方法，而是替换createTile元素的实现。

一个"noop" replacement that replaces the createTile implementation with the original createTile implementation看起来像：

L.TileLayer.MyLayer = L.TileLayer.extend({
  getTileUrl: function (coords) {
    var tile = document.createElement("img");

    DomEvent.on(tile, "load", Util.bind(this._tileOnLoad, this, done, tile));
    DomEvent.on(tile, "error", Util.bind(this._tileOnError, this, done, tile));

    if (this.options.crossOrigin || this.options.crossOrigin === "") {
      tile.crossOrigin =
        this.options.crossOrigin === true ? "" : this.options.crossOrigin;
    }

    tile.alt = "";
    tile.setAttribute("role", "presentation");

    tile.src = this.getTileUrl(coords);

    return tile;
  }
});

考虑到该实现，可以以异步方式设置 HTMLImageElement 的 src 属性，用类似以下内容的方式替换同步 tile.src = this.getTileUrl(coords);：

asyncGetLayerUrl(coords)
  .then(function (url) {
    tile.src = url;
  })

并且，为了更好地衡量，通过调用 this._tileOnError 来处理 promise 拒绝，例如：

asyncGetLayerUrl(coords)
  .then(function (url) {
    tile.src = url;
  })
  .catch(
    function (err) {
      this._tileOnError(done, tile, err);
    }.bind(this)
  );

传单等待承诺解决

Leaflet wait for promise to resolve

javascript

caching

promise

leaflet