传单:第一次加载地图时加载了多少瓦片?
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.TileLayer
s,例如
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);
我将 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.TileLayer
s,例如
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);