Leaflet createTile 等待图像加载

Question

我正在使用 createTile 和 Vue2Leaflet 库制作自定义图块。据我在文档中看到的那样，该函数运行的次数与地图上 coords 的次数一样多。在我的例子中，该函数被触发的次数比我 return 的图像要多，所以最后我得到 90% 以上的空图块，这些图块只会让地图变得混乱。我想知道是否有一种方法可以检查图像在 return 之前是否具有有效路径？我尝试使用 image.onload 但它在函数已经 returned 之后工作一个空的瓷砖。

    createTile: function (coords, done) {
      console.log(1);
      var src;
      src = `https://somecoolurl/${coords.x}_${coords.y}_${coords.z}.jpg`;
      const img = window.L.DomUtil.create("img");
      img.crossOrigin = "anonymous";
      img.src = src;
      img.onerror = function () {
        // handle on error
      };
      img.onload = function () {
        console.log(2);
        // handle if image src was valid
        done(null, img);
      };
      console.log(3);
      return img;
    }

在这种情况下，控制台会打印 1 3 2.

如果不可能做到这一点并且 createTile 必须始终 return 一个图块，有没有一种方法可以在添加图块后从扩展的 TileLayer 中删除图块？

Answer 1

问题是，在我的例子中，我生成了多个 TileLayer，我只指定了 tileSize 而不是 bounds。因此，createTile 正在创建不必要的空白图块，从而降低了地图的性能。直到我在每个tile图层上也添加了bounds，问题才解决。

Leaflet createTile 等待图像加载

Leaflet createTile await for image to load

javascript

leaflet