Как получить доступ к исходным путям для загруженных фрагментов карты

Question

У меня есть локальный сервер карт, который отображает файл mbtiles в браузере, и я пытаюсь получить доступ к исходным файлам, сгенерированным им и загруженным в документ.

До сих пор я был в состоянии получить мои руки на соответствующем HTMLCollection с методами document.querySelector и document.getElementsByClassName():

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 на).

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.

Вот рабочий пример на Plunker: http://plnkr.co/edit/mKOFDzEmVp9111Pr0tfb?p=preview