瓦片层加载开始和结束时的Leaflet fire事件

时间:2014-12-09 12:05:20

标签: javascript leaflet

我正在使用Leaflet.loading在leafletjs地图上显示加载图标,同时加载L.TileLayer.WMS图块层,这在地图缩放或平移时效果很好。但是,如果用户在不移动地图的情况下打开WMS切片图层,则不会触发加载图标。

Leaflet.loading说明声明:

  

如果要在其他AJAX请求时显示加载指示符或   别的东西 [即。正在发生WMS图块层加载,只需触发您的数据加载事件即可   完成加载后开始加载和dataload时的地图。

如何在WMS图块层加载开始和结束时触发这两个事件?

1 个答案:

答案 0 :(得分:6)

假设您有以下图层实例:

var layerInstance = L.tileLayer(layerUrl, layerOptions).addTo(mapInstance);

您可以捕获加载和加载事件,然后触发相应的地图事件,如下所示:

layerInstance.on('loading', function (event) {
    mapInstance.fireEvent('dataloading', event);
});

layerInstance.on('load', function (event) {
    mapInstance.fireEvent('dataload', event);
});

如果您需要在多个图层上执行此操作,您还可以单独处理函数:

var loadingHandler = function (event) {
    mapInstance.fireEvent('dataloading', event);
};

var loadHandler = function (event) {
    mapInstance.fireEvent('dataload', event);
};

layerInstanceFoo.on('loading', loadingHandler);
layerInstanceFoo.on('load', loadHandler);

layerInstanceBar.on('loading', loadingHandler);
layerInstanceBar.on('load', loadHandler);

请参阅可用tilelayer eventsfireEvent method

的参考