Question

我想知道在传单api中是否存在任何方式，我可以在加载tile时触发，当tile加载完成时，将调用另一个函数。

我正在阅读传单api并在此网址http://leafletjs.com/reference.html#tilelayer

中找到

有两个名为loading and load的事件可以解决我的目的。基本上我想在地图api加载图块时显示忙图标，我想在加载完成时隐藏忙图标。

但我没有找到任何示例代码，比如如何将这些名为loading and load的事件与我的地图api相关联。所以如果有人告诉我如何将这两个函数loading and load与map api相关联，将会有所帮助。如果可能的话，请附上一个jsfiddle链接。感谢

以下代码来自@sigon。所以感谢@sigon

<div id="map"></div>

html, body, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}


var map = new L.Map('map').setView([55, 0], 3);
var basemap = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 19
});

map.addLayer(basemap);

basemap.on('loading', function (event) {
   console.log('start loading tiles');
});
basemap.on('load', function (event) {
   console.log('all tiles loaded');
});
basemap.on('tileloadstart', function (event) {
   console.log('start loading 1 tile');
});

Answer 1

您可以使用以下内容：

var basemap = new 
  L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
});

basemap.on('loading', function (event) {
  console.log('start loading tiles');
});
basemap.on('load', function (event) {
  console.log('all tiles loaded');
});

编辑：我创建了一个jsfiddle

当传单api加载平铺图像时如何显示忙图标

以下代码来自@sigon。所以感谢@sigon

1 个答案: