如何使用react-leaflet v4和react-leaflet-markercluster实现多边形聚类？

1. 安装依赖 #

首先安装所需的包：

npm install react-leaflet@4 leaflet react-leaflet-markercluster leaflet.markercluster

2. 完整示例代码 #

以下是可直接运行的组件示例，实现多边形的聚类效果：

import { MapContainer, TileLayer, Polygon, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
// 引入必要的样式文件
import 'leaflet/dist/leaflet.css';
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';

// 模拟多边形数据
const polygonData = [
  {
    id: 1,
    coords: [[51.509, -0.08], [51.503, -0.06], [51.51, -0.047]],
    color: '#ff0000'
  },
  {
    id: 2,
    coords: [[51.51, -0.09], [51.505, -0.07], [51.512, -0.05]],
    color: '#00ff00'
  },
  {
    id: 3,
    coords: [[51.49, -0.1], [51.485, -0.08], [51.492, -0.06]],
    color: '#0000ff'
  },
  {
    id: 4,
    coords: [[51.495, -0.07], [51.49, -0.05], [51.502, -0.04]],
    color: '#ff00ff'
  }
];

function PolygonClusterMap() {
  // 计算多边形中心点，用于生成聚类用的Marker
  const calculatePolygonCenter = (coords) => {
    const latSum = coords.reduce((sum, point) => sum + point[0], 0);
    const lngSum = coords.reduce((sum, point) => sum + point[1], 0);
    return [latSum / coords.length, lngSum / coords.length];
  };

  return (
    <MapContainer 
      center={[51.505, -0.09]} 
      zoom={13} 
      style={{ height: '800px', width: '100%' }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; OpenStreetMap contributors'
      />
      {/* 聚类组：包裹所有用于聚类的Marker和对应的多边形 */}
      <MarkerClusterGroup>
        {polygonData.map(polygon => {
          const center = calculatePolygonCenter(polygon.coords);
          return (
            <div key={polygon.id}>
              {/* 透明Marker：仅用于聚类逻辑，不显示在地图上 */}
              <Marker position={center} opacity={0} />
              {/* 实际显示的多边形 */}
              <Polygon 
                positions={polygon.coords} 
                color={polygon.color} 
                fillOpacity={0.2}
              />
            </div>
          );
        })}
      </MarkerClusterGroup>
    </MapContainer>
  );
}

export default PolygonClusterMap;

关键说明 #

• react-leaflet-markercluster原生仅支持Marker组件的聚类，因此通过透明Marker绑定多边形中心点的方式，间接实现多边形的聚类效果
• 缩放地图时，透明Marker会自动聚类，点击聚类组会自动缩放并展开对应区域的多边形
• 可通过修改MarkerClusterGroup的属性自定义聚类行为，比如设置maxClusterRadius调整聚类半径，或通过iconCreateFunction自定义聚类图标样式

内容的提问来源于stack exchange，提问作者steinway