如何访问加载的地图图块的源路径

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

您可以使用由 L.TileLayer 触发的 tileload 和 tileunload 事件：

平铺负载：

Fired when a tile loads.

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

瓷砖卸载：

Fired when a tile is removed (e.g. when you have unloadInvisibleTiles on).

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 当前加载的图块的准确表示。

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/mKOFDzEmVp9111Pr0tfb?p=preview

如何访问加载的地图图块的源路径

How to access the source paths for loaded map tiles

javascript

leaflet