传单:第一次加载地图时加载了多少瓦片?

Leaflet: how many tiles are loaded when map is loading for the first time?

我将 Leaflet OSM(开放街道地图)集成到我的应用程序中,地图视图正在加载。

this.map = leaflet.map(this.mapContainer.nativeElement, {
      preferCanvas: true,
      zoom: 14,
      zoomAnimationThreshold: 0,
      renderer: leaflet.canvas()
    });

我想要加载地图时加载的图块数。

我查看了官方 docs of leaflet 但没有找到关于计数的信息。

我需要根据屏幕计算加载的图块数吗?如果是那么怎么办?

你可以试试这个:

function getTilesCount(){
    var tileLayers = map.getPane('tilePane').children[0].children;
    var idx = -1;
    var tileCount = 0;
    for(var i = 0; i < tileLayers.length; i++){
        var tile = tileLayers[i];
        if(tile.style.zIndex >= idx){
            idx = tile.style.zIndex;
            tileCount = tile.children.length;
        }
    }
    return tileCount;
}

它计算瓦片容器中具有最高 z 索引的 DOM 个瓦片

利用tileload event of L.TileLayers,例如

var tileCount = 0;
myTileLayer.on('tileload', function() { tileCount++ });

如果你想在初始地图加载时计算图块,你应该确保在之前为相应的tileload事件挂钩事件处理程序 tilelayer 开始加载,并在 tilelayer 报告所有图块已加载时停止计数(通过 its load event),例如:

var map = L.map('leaflet', {
    center: [0, 0],
    zoom: 3 
});

// Create a tilelayer but *do not* add it to the map *yet*
var myTileLayer = 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        });

var tileCount = 0;

// Hook up event handlers...
myTileLayer.on('tileload', function(){ tileCount++; });
myTileLayer.once('load', function(){ 
    // Do something with the number of loaded tiles
    window.alert(tileCount);

    // Detach all event handlers for the 'tileload' event since they're not needed anymore
  myTileLayer.off('tileload');
});

// Now that the event handlers are ready, add the tilelayer to the map
myTileLayer.addTo(map);