Leaflet 等待 promise 解決

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 function 返回 promise。 即使我嘗試使getTileUrl異步，而不是等待this.getLayerUrl （並且還使異步等待第 2 步和第 3 步）或在 this.getLayerUrl 之后放置 .then (function(result) {return result;} ，Leaflet 在瀏覽器中顯示錯誤控制台嘗試從 url 獲取磁貼：GET http://localhost/project/public/[object%20Promise]

Also I should mention that this.getLayerUrl returns different url for every tile, it is actualy a blob url like: blob:http://localhost/f7c4298f-9e9d-423f-9d0b-3f7a301e433f but if the url is correctly returned leaflet doest have問題和瓷磚正確顯示。

Answer 1

這里的方法不是提供getLayerUrl方法，而是替換createTile元素的實現。

用原始createTile實現替換createTile實現的“noop”替換如下所示：

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)
  );

Answer 2

不幸的是，您想要實現的目標是不可能的。 getTileUrl()方法預計會直接返回 url，即不包含在 promise 中。 但是，您從getLayerUrl獲得 url，它返回 promise。 您根本無法在getTileUrl()中同步等待 promise 的結果。

await關鍵字表明這是可能的，但事實並非如此。 await只是語法糖，是鏈接承諾的簡寫。 我給你一個簡單的例子。

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

async / await允許你這樣寫：

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

但在幕后它仍然使用承諾。 async function 始終返回 promise。

Answer 3

希望這會有所幫助，基於本文的信息

L.TileLayer.YourLayer = L.TileLayer.extend({
 
  createTile: function (coords, done) {
    var tile = document.createElement('img');
    
    hereMakeSomeRemoteRequest().then(response => {
      tile.src = response.imageSrc
      done(null, tile)
    }, function (e) {
        console.log('error: ', e.message);
        tile.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; // empty gif 1x1 px
        done(e, tile)
    });
    return tile;
  }
});