单击新的后如何清除以前的传单层答案

【问题标题】：How to clear previous leaflet layer after click on new one单击新的后如何清除以前的传单层
【发布时间】：2021-01-21 12:49:09
【问题描述】：

我尝试在使用鼠标单击新区域时删除图层的选择。

所以图层上有舔功能

  layer.on({
    click: (event) => {
      event.target.setStyle({
        color: "black",
        weight: 1.5,
      });
    },
  });

当我点击新区域时，我只会得到 2 个带有这样边框的区域，但只需要选择新的区域，然后删除以前的区域。有人可以帮忙吗？

这是我如何使用 geoJSON 的代码

<MapContainer center={getCenter()} zoom={getZoom()}>
    <GeoJSON
        ref={geoJSON}
        center={getCenter()}
        zoom={getZoom()}
        style={setColor}
        data={germanyDis}
        onEachFeature={onEachArea}
    />
</MapContainer>

这是我的onEachArea 函数

const onEachArea = (area, layer) => {
      layer.on({
        click: (event) => {
          event.target.setStyle({
            color: "black",
            weight: 1.5,
          });
          event.target.bringToFront();
   
        },
      });

【问题讨论】：

标签： javascript reactjs dictionary leaflet react-leaflet

【解决方案1】：

当您通过L.geoJson 和style 函数添加图层时，您只需在点击事件中调用geojson 组geojsonGroup.resetStyle()：

layer.on({
    click: (event) => {
      geojsonGroup.resetStyle()
      event.target.setStyle({
        color: "black",
        weight: 1.5,
      });
    },
  });

【讨论】：

在上面添加了我的 geoJson 的描述。我正在使用 react-leaflet 包。
也试过这个方法，但对我来说它会重置整个地图，但我只需要以前的区域。

【解决方案2】：

所以解决了这个问题。创建了一个usePrevious 挂钩来存储之前的目标值并在useEffect 挂钩中使用它

 const [selectedFeature, setSelectedFeature] = useState(null);
 const previousFeature = usePrevious(selectedFeature);

  useEffect(() => {
    if (previousFeature) {
      previousFeature.setStyle({ color: "transparent", weight: 0 });
    }
  }, [selectedFeature]);

在 onEachFeature 函数中设置当前值

const onEachArea = (area, layer) => {
      layer.on({
        click: (event) => {
          event.target.setStyle({
            color: "black",
            weight: 1.5,
          });
          event.target.bringToFront();

          setSelectedFeature(event.target);

        },
      });
    }
  };

【讨论】：