如何监听 react-leaflet 地图的图层控制事件

Question

我正在学习这个例子

https://react-leaflet.js.org/docs/example-layers-control

构建一个小型 ionic+react 应用程序。

如何监听每个叠加层复选框的状态变化？

我想更改我的地图的中心和缩放比例以显示活动覆盖层的所有制造商。

Answer 1

您可以利用每个层的 eventHandlers 属性，它只是可以添加到任何传单层的所有事件处理程序的包装器。因此，您可以利用 add 和 remove 事件，并在每一层上监听这些事件。使用 LayersControl 添加和删除图层时会触发这些事件：

    <MapContainer {...props}>
      <LayersControl collapsed={false}>
        <LayersControl.BaseLayer checked name="OpenStreetMap.Mapnik">
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            eventHandlers={{
              add: (e) => {
                console.log("Added Layer:", e.target);
              },
              remove: (e) => {
                console.log("Removed layer:", e.target);
              }
            }}
          />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="OpenStreetMap.BlackAndWhite">
          <TileLayer
            url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
            eventHandlers={{
              add: (e) => {
                console.log("Added Layer:", e.target);
              },
              remove: (e) => {
                console.log("Removed layer:", e.target);
              }
            }}
          />
        </LayersControl.BaseLayer>
        <LayersControl.Overlay name="Marker with popup">
          <Marker
            position={center}
            eventHandlers={{
              add: (e) => {
                console.log("Added Layer:", e.target);
              },
              remove: (e) => {
                console.log("Removed layer:", e.target);
              }
            }}
          >
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </LayersControl.Overlay>
      </LayersControl>
    </MapContainer>

如何监听 react-leaflet 地图的图层控制事件

how to listen to the layer control events of a react-leaflet map

leaflet

react-leaflet

Working Codesandbox