如何从 markercluster 中删除标记

Question

我正在使用 React Leaflet and react-leaflet-markercluster。我有很多标记，如果父级的状态发生更改，则标记群集重新渲染需要更长的时间。为此，集群组件被记忆。

当我点击一个多边形时，我想从地图和 markercluster 中删除它的标记。我正在寻找一种无需重新渲染 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

Answer 1

我决定删除 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 中的集群引用并删除标记并防止重新渲染整个集群。

Answer 2

不是从渲染的集群中删除标记，而是从源中删除它，即 GEOJSON 数据，然后删除 clusterlayer 并重新应用它。

一个鲜为人知的事实是，从新渲染比重新渲染快得多。

您的旧方法适用于少量标记，但不适用于 25K+

如何从 markercluster 中删除标记

How to remove marker from markercluster

leaflet

reactjs

leaflet.markercluster

react-leaflet