如何使用react-leaflet的LayerControl切换矩形网格？

如何解决如何使用react-leaflet的LayerControl切换矩形网格？

我想在地图（基础层）上显示或隐藏矩形网格（叠加层）。

我正在使用react Leaflet图层控件：doc

问题：即使我取消选中复选框，我的网格也会一直显示

我的网格：

class Grid extends MapControl {
    createLeafletElement(props) {
        const { 
          leaflet: { map },} = props;

        const minLng = -4.89;  
    const minLat = 41.29;  
    const maxLng = 9.65;   
    const maxLat = 51.22

    const nbColumn = 10;
    const nbRow = 10;
    const rectWidth  = maxLng - minLng;
    const rectHeight = maxLat - minLat;

    const incrLat  = rectHeight  / nbColumn;
    const incrLng = rectWidth / nbRow;
    let column = 0;
    let lngTemp = minLng;
    let latTemp = minLat;

        let rect;
        const arrRect = [];
        while (column < nbColumn) {
          let row = 0;
          latTemp = minLat;
          while (row < nbRow) {
            const cellBounds = [[latTemp,lngTemp],[latTemp + incrLat,lngTemp + incrLng]];
            rect = L.rectangle(cellBounds,{color: "#1EA0AA",weight: 1}).addTo(map);
            arrRect.push(rect);
            latTemp += incrLat; 
            row += 1;
          }
          lngTemp += incrLng;
          column += 1;
        }
        return rect;
    }
}

在我的传单组件中：

class Leaflet extends Component {
   ...
render() {
  return (
      <Map 
         <LayersControl>
            <LayersControl.BaseLayer name="Open Street Map" checked="true">
                <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 
                           contributors'
                           url={this.state.url}
                 />
            </LayersControl.BaseLayer>

            <LayersControl.Overlay name="Grid1">
               <LayerGroup>
                  <Grid />     
              </LayerGroup>
            </LayersControl.Overlay>
      </LayersControl>

解决方法

我没有设法加载网格，所以我提供了另一个更简单的网格示例。

要控制网格的可见性，您需要使用react-leaflet的{​​{1}}方法来触发自定义react-leaflet组件上的道具更改。传递showGrid道具以控制Grid的可见性。

updateLeafletElement

然后在地图组件中，聆听传单的overlayadd和overlayremove，以便能够切换局部标志，从而使用效果控制网格的可见性：

updateLeafletElement(fromProps,toProps) {
    const { map } = this.props.leaflet;
    if (toProps.showGrid !== fromProps.showGrid) {
      toProps.showGrid
        ? this.leafletElement.addTo(map)
        : this.leafletElement.removeFrom(map);
    }
  }

修改： 作为基于类的组件的App组件将如下所示：

useEffect(() => {
    const map = mapRef.current.leafletElement;
    map.on("overlayadd",(e) => {
      if (e.name === "Grid1") setShowGrid(true);
    });

    map.on("overlayremove",(e) => {
      if (e.name === "Grid1") setShowGrid(false);
    });
  },[]);


  <LayersControl.Overlay
          checked={showGrid}
          name="Grid1"
        >
          <LayerGroup>
            <Grid showGrid={showGrid} />
          </LayerGroup>
  </LayersControl.Overlay>

我没有收到您提到的错误。

Demo