如何从标记簇中删除标记答案

【问题标题】：How to remove marker from markercluster如何从标记簇中删除标记
【发布时间】：2021-03-09 10:55:30
【问题描述】：

我正在使用React Leaflet 和react-leaflet-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

【问题讨论】：

我花了一些时间来解决这个棘手的问题。我认为秘诀在于能够为markercluster（简单）获取底层传单元素的引用，然后获取该集群层中所有标记的数组。我似乎无法弄清楚如何做到这一点。如果您知道如何获取 L.MarkerCluster 并获取所有标记的数组，我认为我们可以做到这一点，方法是直接从传单元素中删除标记并将 react 排除在外。 getAllChildMarkers 似乎只能在事件回调中使用？
@SethLutske 感谢您查看此内容。毕竟，我刚刚删除了react-leaflet-markercluster 包装器，现在我只使用了Leaflet.markercluster。我将 markercluster 引用存储在一个超出反应组件的变量中。我可以删除MapElements 组件的React.memo 函数中的标记，我可以在其中访问markercluster 引用并删除标记。
我很高兴这对你有用。我确信在组件内有一种方法可以做，但是使用 react-leaflet-v3，我们最终还是会深入挖掘底层的传单组件。这是一个微妙的平衡
@SethLutske 我正在做一个项目，我需要将 Leaflet 与 Leaflet-geoman 集成到一个包含数千个 geojson 和标记的 React 项目中，这些应该是可拖动和可编辑的。让所有这些东西一起工作是非常棘手的。
听起来很糟糕，完成后在此处发布！如果可能的话。如果您希望弹出窗口也可编辑，您可以查看我的react-leaflet-editable-popup，尽管我不确定它如何以您使用它的方式与 markercluster 集成。祝你好运！

标签： reactjs leaflet react-leaflet leaflet.markercluster

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

【讨论】：

【解决方案2】：

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

从新渲染比重新渲染快很多，这是一个非常未知的事实。

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

【讨论】：