如何在单击新的宣传页后清除以前的宣传页

Question

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

​

因此，在图层上有非lick功能

  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();
   
        },
      });

Answer 1

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

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

Answer 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);

        },
      });
    }
  };