如何从标记簇中删除标记

问题描述

我正在使用 React Leaflet 和 react-leaflet-markercluster。我有很多标记，如果父状态发生变化，标记集群重新渲染需要更长的时间。出于这个原因，集群组件被记忆。

当我点击一个多边形时，我想从地图和标记集群中删除它的标记。我正在寻找一种无需重新渲染标记集群的方法。我试过这段代码，但它不起作用：

React.useEffect(() => {
    Object.keys(mapRef?._layers).forEach(function (key) {
      const leafletLayer = mapRef?._layers[key];

      if (typeof leafletLayer?.getAllChildMarkers === "function") {
        const allMarkers = leafletLayer.getAllChildMarkers();
        allMarkers.forEach((marker) => {
          const dataId = marker.options.id;
          const foundMarker = props.selected.find(
            (selectedAsset) => selectedAsset === dataId
          );
          if (foundMarker) {
            console.log("remove marker from map",marker);
            mapRef.removeLayer(marker);
          }
        });
      }
    });
  },[mapRef,props.selected]);

codesandbox

解决方法

我决定移除 react-leaflet-markercluster 包装器并只使用 Leaflet.markercluster 库，我使用它就像 this：

const mcg = L.markerClusterGroup({
    chunkedLoading: true,showCoverageOnHover: false,});

const MarkersCluster = ({ markers }) => {
    const { map } = useLeaflet();
    useEffect(() => {
        mcg.clearLayers();
        const markerList = markers.map(({ coords }) => {
            return L.marker(new L.LatLng(coords.latitude,coords.longitude),{
                icon: YOUR_ICON,});
        });

        mcg.addLayers(markerList);
        map.fitBounds(mcg.getBounds());
        map.addLayer(mcg);
    },[markers,map]);


    return null;

};


export default MarkerCluster;

and use it:
<MarkerCluster marker={my_markers} />

现在，我可以访问 MapElements 的 React.memo 中的集群引用并删除标记并防止重新渲染整个集群。