点击新的叶片图层后如何清除以前的leaflet图层

Question

我尝试在使用鼠标单击新区域时取消图层的选择。 因此，该图层上没有点击功能。

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

当我点击“新区域”时，我只得到了两个带有这种边框的区域，但我只需要选择新的一个，并删除以前的。有人能帮忙吗？

这是我使用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();
   
        },
      });

- Roman

Answer 1

修复了这个问题。创建了一个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);

        },
      });
    }
  };

- Roman

Answer 2

当您通过L.geoJson添加图层并使用style函数时，您可以在单击事件中简单地调用geojson组geojsonGroup.resetStyle()。

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

- Falke Design

---

在上方添加了我的geoJson的描述。我正在使用react-leaflet包。 - Roman

我也尝试过这种方法，但它会重置整个地图，而我只需要前一个区域。 - Roman