React-Leaflet：如何监听 LayersControl.Overlay 复选框点击事件？

Question

我正在动态呈现一些叠加控件，并希望将点击事件侦听器绑定到每个控件的复选框。然而，目前似乎没有办法向 LayersControl 提供 React 引用或向 LayersControl.Overlay 提供 onClick 处理程序。有没有更好的方法来实现这个功能？

示例：

<LayersControl>
  {overlays.map(el => (
    <LayersControl.Overlay
      checked={el.checked}
      key={el.id}
      name={el.label}
    >
      <GeoJsonLayer {...el} />
    </LayersControl.Overlay>
  ))}
</LayersControl>

Answer 1

使用 ref 获取 map 实例，然后监听 baselayerchange 事件。然后使用您的图层名称或 url 您可以实现您想要的行为。

const mapRef = useRef();

  useEffect(() => {
    const map = mapRef.current.leafletElement;
    map.on("baselayerchange", e => {
      //do whatever
      console.log(e.name);
      switch (e.name) {
        case "OpenStreetMap.Mapnik":
          flyToParis(map);
          break;
        case "OpenStreetMap.BlackAndWhite":
          console.log("do something else");
          break;
        default:
          return;
      }
    });
  }, []);

  const flyToParis = map => {
    console.log(map);
    map.panTo([48.864716, 2.349014]);
  };

Demo

React-Leaflet：如何监听 LayersControl.Overlay 复选框点击事件？

React-Leaflet: How to listen to LayersControl.Overlay checkbox click events?

javascript

leaflet

reactjs

react-leaflet