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>

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

希望这会帮助您入门。

Demo

Answer 2

这是我的解决方案：

确保安装兼容版本：

react-leaflet-markercluster v2.0.0 或 2.0.0-rc3
传单 1.7.1
react-leaflet 任何版本 2 都可以使用
导入'react-leaflet-markercluster/dist/styles.min.css'

具有react-leaflet 2.0的标记聚类（Leaflet.markercluster）

2 个答案: