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

Question

我正在动态呈现一些叠加控件，并希望将click事件监听器绑定到每个控件的复选框。但是，目前似乎没有一种方法可以向LayersControl提供React引用，或向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

使用引用获取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