使用 react-leaflet 2.0 进行标记聚类 (Leaflet.markercluster)

Question

试图让 Leaflet.markercluster 与 react-leaflet 2 一起工作。

https://github.com/OpenGov/react-leaflet-cluster-layer似乎与 2.x 不兼容。

感谢任何让我入门的示例代码！

Answer 1

您可以使用本机传单代码制作您的 React 包装器以实现标记集群层：

const mcg = L.markerClusterGroup();

const MarkerCluster = ({ markers }) => {
  const { map } = useLeaflet();

  useEffect(() => {
    mcg.clearLayers();
    markers.forEach(({ position, text }) =>
      L.marker(new L.LatLng(position.lat, position.lng), {
        icon: customMarker
      })
        .addTo(mcg)
        .bindPopup(text)
    );

    // optionally center the map around the markers
    // map.fitBounds(mcg.getBounds());
    // // add the marker cluster group to the map
    map.addLayer(mcg);
  }, [markers, map]);

  return null;
};

然后像这样使用它：

 <Map center={position} zoom={2} style={mapStyle} maxZoom={20}>
        <TileLayer
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <MarkerCluster markers={markers} />
</Map>

我在演示中包含了一个案例，您可以在其中使用按钮更改集群组图层。

希望这会让你开始。

演示