如何在react-leaflet v3中实现形状绘制功能？事件监听无响应求助

核心失效原因排查 #

• 依赖资源缺失：仅引入leaflet-draw的JS逻辑，未配套引入对应样式文件时，控件DOM结构不完整，所有交互事件会直接失效；同时需确认全局L对象已正确加载leaflet-draw的扩展，而非仅加载leaflet核心包。
• 图层绑定逻辑错误：初始化L.Control.Draw时未指定可编辑、可绘制的目标图层组，会导致绘制事件无法被正常触发。
• 初始化顺序冲突：同个effect内同时初始化侧滑对比图层、绘制控件、基础底图时，后加载的图层会拦截绘制控件的鼠标事件，打断绘制流程。
• 生命周期时序问题：在react-leaflet v3的MapContainer未完成DOM初始化时就绑定事件，会导致绑定的事件直接丢失。

正确实现示例 #

按照分层初始化的逻辑改造原有代码，核心实现片段如下：

useEffect(() => {
  if (!map) return;
  // 优先初始化侧滑对比图层，避免遮挡绘制控件交互
  const leftLayer = L.tileLayer(layers[leftLayerIndex].url, layerOptions);
  const rightLayer = L.tileLayer(layers[rightLayerIndex].url, layerOptions);
  const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
  setSideBySide(sbs);

  // 再初始化绘制功能相关逻辑
  const drawnItems = new L.FeatureGroup();
  map.addLayer(drawnItems);
  const drawControl = new L.Control.Draw({
    position: "topleft",
    edit: {
      featureGroup: drawnItems // 必须绑定独立的可绘图层组
    }
  });
  drawControl.addTo(map);

  // 绑定绘制全流程事件
  map.on(L.Draw.Event.DRAWSTART, (event) => {
    console.log("开始绘制", event);
  });
  map.on(L.Draw.Event.CREATED, (event) => {
    drawnItems.addLayer(event.layer);
  });
  map.on("mousemove", (event) => {
    setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
  });

  // 组件卸载时清理实例，避免内存泄漏和事件残留
  return () => {
    map.off(L.Draw.Event.DRAWSTART);
    map.off(L.Draw.Event.CREATED);
    map.off("mousemove");
    drawControl.remove();
  };
}, [map]);

额外校验点 #

• 检查地图容器的z-index层级，确保绘制控件的层级高于所有底图、对比图层的层级，避免交互被穿透拦截。
• 不要将绘制控件的初始化逻辑和动态图层切换的逻辑耦合在同一个effect中，避免图层更新时意外销毁已绑定的绘制事件。
• 绘制事件建议使用L.Draw.Event枚举值绑定，不要直接写字符串化的事件名，避免版本升级时事件名变更导致绑定失效。

内容的提问来源于stack exchange，提问作者Emad Baqeri