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

Question

我正在关注这个例子

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

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

我怎么能听到每个覆盖层复选框的状态变化？

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

标签： leafletreact-leaflet

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>

工作代码沙盒