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

Question

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

示例：

<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]);
  };

演示