如何判断Leaflet图层是否完全渲染？update事件首次不触发求解

我需要检测Leaflet图层的渲染完成事件，尝试了以下代码但未达到预期效果：

var renderer = new L.canvas(); // 我也试过L.svg()
var latlngs = [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]];
var polygon = L.polygon(latlngs, { color: 'red', renderer: renderer }).addTo(map);

// 更新事件监听
renderer.on('update', () => {
      console.log('polygon loaded')
      renderer.off('update')
    })

我发现渲染器的update事件仅在地图平移或缩放后触发，首次地图渲染时并未触发该事件，请问我遗漏了什么？

另外，以下代码对TileLayer可正常工作，但不适用于其他类型图层：

tile_layer.on("load",function() { console.log("all visible tiles have been loaded") });

解决方案 #

1. 监听地图render事件判断渲染状态 #

Leaflet地图每次完成渲染都会触发render事件，你可以在图层添加后，通过这个事件检测图层是否已完成绘制：

var latlngs = [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]];
var polygon = L.polygon(latlngs, { color: 'red' }).addTo(map);

function checkRendered() {
  // 验证图层已挂载到地图，且DOM元素已生成
  if (polygon._map && polygon._path && polygon._renderer._container.contains(polygon._path)) {
    console.log('polygon loaded');
    map.off('render', checkRendered); // 完成后移除监听
  }
}

map.on('render', checkRendered);
// 手动触发一次检查，防止错过首次render事件
checkRendered();

2. 利用矢量图层同步渲染特性 #

Leaflet的矢量图层（Polygon、Polyline等）是同步渲染的，图层添加到地图后就已经完成绘制，无需额外等待：

var latlngs = [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]];
var polygon = L.polygon(latlngs, { color: 'red' }).addTo(map);

// 图层添加后直接输出，渲染已完成
console.log('polygon loaded');

原代码失效原因 #

渲染器的update事件是在渲染器内容更新时触发，但首次渲染时，图层添加的时机早于渲染器完成初始化，导致首次绘制没有触发该事件；而地图平移/缩放时，渲染器需要重新绘制内容，所以会触发update。

内容的提问来源于stack exchange，提问作者Tek Kshetri