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

Question

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

我正在使用 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>

Answer 1

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

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

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

然后在您的地图组件中收听传单的 overlayadd 和 overlayremove 以能够切换本地标志，该标志将使用效果控制网格的可见性：

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>

编辑：作为基于类的组件的 App 组件将如下所示：

export default class AppWithNoHooks extends Component {
  state = {
    showGrid: false
  };

  mapRef = createRef();

  componentDidMount() {
    const map = this.mapRef.current.leafletElement;
    map.on("overlayadd", (e) => {
      if (e.name === "Grid1") this.setState({ showGrid: true });
    });

    map.on("overlayremove", (e) => {
      if (e.name === "Grid1") this.setState({ showGrid: false });
    });
  }
 ...

我不明白你提到的错误。

演示