我正在扩展 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 函数返回一个承诺。即使我尝试使 getTileUrl async 而不是 await for this.getLayerUrl(并且还使 async await 步骤 2 和 3)或放置 < em>.then(function(result) {return result;} 在 this.getLayerUrl 之后,Leaflet 在浏览器控制台中显示错误,它试图从 url 获取图块:GET http://localhost/project/public/ [object%20Promise]
另外我应该提到 this.getLayerUrl 为每个图块返回不同的 url,它实际上是一个 blob url,如: blob:http://localhost/f7c4298f-9e9d-423f-9d0b-3f7a301e433f 但如果 url 正确返回传单没有问题,磁贴显示正确。
答案 0 :(得分:1)
此处的方法不是提供 getLayerUrl
方法,而是替换createTile
元素的实现。
用 "noop" 替换 createTile
实现的 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;
}
});
考虑到该实现,可以以异步方式设置 src
的 HTMLImageElement
属性,将同步 tile.src = this.getTileUrl(coords);
替换为例如:
asyncGetLayerUrl(coords)
.then(function (url) {
tile.src = url;
})
而且,为了更好的衡量,通过调用 this._tileOnError
来处理承诺拒绝,例如:
asyncGetLayerUrl(coords)
.then(function (url) {
tile.src = url;
})
.catch(
function (err) {
this._tileOnError(done, tile, err);
}.bind(this)
);
答案 1 :(得分:0)
不幸的是,您尝试实现的目标是不可能的。 getTileUrl()
方法应直接返回 url,即不包含在 Promise 中。但是,您从 getLayerUrl
获得了返回承诺的网址。您根本无法在 getTileUrl()
中同步等待 Promise 的结果。
await
关键字表明这是可能的,但事实并非如此。 await
只是语法糖,是链接 promise 的简写。我给你举个简单的例子。
function getUrl() {
return getAsyncUrl().then(url => {
return transformUrl(url);
});
}
async
/await
允许你这样写:
async function getUrl() {
const url = await getAsyncUrl();
return transformUrl(url);
}
但在幕后,它仍然使用 Promise。 async
函数总是返回一个 promise。