瓦片层加载开始和结束时的传单触发事件答案

【问题标题】：Leaflet fire event when tile layer loading begins and ends瓦片层加载开始和结束时的传单触发事件
【发布时间】：2014-12-09 12:05:19
【问题描述】：

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

Leaflet.loading 指令状态：

如果您想在其他 AJAX 请求时显示加载指示器或别的东西[即WMS 瓦片层加载] 正在发生，只需触发您的数据加载事件开始加载时映射，加载完成时加载数据。

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

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

假设你有以下图层实例：

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 events 和fireEvent method 的参考

【讨论】：

完美，谢谢！如果有很多层要应用它，我是否可以想象这些函数可以在脚本中更早地定义并调用？
当然可以，我已经编辑了我的答案。可能会对其他用户派上用场。