如何使用 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 });
    });
  }
 ...

我不明白你提到的錯誤。

演示