如何訪問已加載地圖圖塊的源路徑

Question

我有一個本地地圖服務器，該服務器在瀏覽器中呈現mbtiles文件，並且試圖訪問由它生成並加載到文檔中的源文件。

到目前為止，我已經能夠使用document.querySelector和document.getElementsByClassName()方法獲取相應的HTML集合：

var collection = 
  document.querySelector(".featured")
  .getElementsByClassName("leaflet-tile");

console.log(collection);

我在Firebug上獲得以下日志：

0 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
1 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
2 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
3 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
4 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
5 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
6 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
7 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
8 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
9 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
10 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
11 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
12 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
13 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
length 14
__proto__ HTMLCollection { item=item(),  namedItem=namedItem()}

我盡力記住了png文件的路徑。 例如：

var array = [];

for (var i = 0; i < collection.length; i++) {
    array.push([
        collection[i]
]);
    console.log(collection[i]);
}

console.log("lenght of collection is: " + collection.length);
console.dir("array is: " + array);

在我的控制台上，我得到以下信息：

lenght of collection is: 0
array is: undefined

長度為零，數組中沒有任何內容。 很明顯，我在迭代中做錯了什么，但我無法弄清楚。 我在這里想念的是什么？ 先感謝您！

---

服務器端我正在使用PHP Tileserver 。 這就是實例化地圖對象的方式：

$(document).ready(function () {

    window.map = new L.map('map', {
        zoomControl: false,
    })
        .setView([40.6420, -73.7854], 12);

    var mapTiles = './tiles/bojb/{z}/{x}/{y}.png';

    L.tileLayer(
        mapTiles, {
            maxZoom: 16,
            minZoom: 12
        }).addTo(map);

Answer 1

您可以使用tileload和tileunload被觸發的事件L.TileLayer ：

Tileload：

瓷磚加載時觸發。

http://leafletjs.com/reference.html#tilelayer-tileload

Tileunload：

移除圖塊時觸發（例如，當您打開unloadInvisibleTiles時）。

http://leafletjs.com/reference.html#tilelayer-tileunload

var tilelayer = new L.TileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    'attribution': '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
});

var tilesloaded = [];

tilelayer.on('tileload', function (e) {
    if (tilesloaded.indexOf(e.url) === -1) {
        tilesloaded.push(e.url);
    }
});

tilelayer.on('tileunload', function (e) {
    var index = tilesloaded.indexOf(e.tile.src);
    tilesloaded.splice(index, 1);
});

現在， tilesloaded數組將始終包含tilelayer當前加載的tile的准確表示。

這是有關Plunker的工作示例： http ://plnkr.co/edit/mKOFDzEmVp9111Pr0tfb?p=preview