javascript - 单击新的后如何清除以前的传单层

Question

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

所以图层上有舔功能

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

标签： javascriptreactjsdictionaryleafletreact-leaflet

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

        },
      });
    }
  };