Leaflet/React Leaflet点击新图层后如何清除此前选中的图层？

问题根源 #

当前代码仅在点击时给触发事件的图层设置选中样式，没有对之前被修改过自定义样式的旧图层做重置，Leaflet 不会自动管理被修改过的图层样式，因此旧的选中边框会一直保留，最终出现多区域同时显示选中态的异常。

最简实现方案 #

因为所有区域图层都挂载在同一个GeoJSON组件下，直接调用组件内置的resetStyle()方法就能快速实现需求，不需要额外维护选中状态：

• resetStyle()会自动遍历组内所有子图层，把图层样式恢复成组件初始化时绑定的默认style配置，一次调用即可清除所有历史选中样式
• 相比手动存选中图层引用的方案，这个方法不会出现旧引用指向已销毁图层、调用方法报错的问题

代码调整 #

仅需修改onEachArea里的点击事件逻辑，无需新增额外状态：

const onEachArea = (area, layer) => {
  layer.on({
    click: (event) => {
      // 重置组内所有图层的默认样式，清除历史选中态
      geoJSON.current?.resetStyle();
      // 给当前点击的图层设置选中样式
      event.target.setStyle({
        color: "black",
        weight: 1.5,
      });
      // 保留置顶逻辑，避免选中边框被其他图层遮挡
      event.target.bringToFront();
    },
  });
};

冗余配置清理 #

传给GeoJSON组件的center、zoom属性是无效配置，这两个参数仅能在MapContainer组件上使用，GeoJSON组件无法识别，可直接删除：

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

适配多GeoJSON场景的通用方案 #

如果后续地图存在多组独立的GeoJSON图层，单组的resetStyle()无法跨组重置时，可以通过useRef维护当前选中的图层引用，点击新图层时手动重置旧图层样式：

• 初始化引用：const selectedLayerRef = useRef(null)
• 点击事件逻辑：

  click: (event) => {
    // 重置旧选中图层的默认样式
    if (selectedLayerRef.current) {
      selectedLayerRef.current.setStyle(defaultLayerStyle);
    }
    // 设置新图层的选中样式
    event.target.setStyle({ color: "black", weight: 1.5 });
    // 更新当前选中图层的引用
    selectedLayerRef.current = event.target;
  }
  

内容的提问来源于stack exchange，提问作者Roman