Leaflet MarkerCluster项目GeoJSON加载与聚类性能优化需求

一、聚类策略优化（解决缩放卡顿核心） #

Leaflet原生LayerGroup加载大量Marker会导致DOM节点过载，缩放时重排重绘压力极大。改用Leaflet.markercluster的子组聚类方案，将所有子组Marker纳入同一个主聚类组管理，大幅减少DOM元素数量：

核心代码示例 #

// 初始化主聚类组，配置关键参数降低性能消耗
const mainCluster = L.markerClusterGroup({
  maxClusterRadius: 50, // 按需调整聚类半径，值越大聚合越密集
  disableClusteringAtZoom: 12, // 达到指定缩放级别时取消聚类，直接显示单个Marker
  spiderfyOnMaxZoom: false, // 关闭蜘蛛化效果（减少DOM操作）
  showCoverageOnHover: false // 关闭hover显示聚类范围（减少事件监听）
});

// 创建子组并关联到主聚类组
const subGroup1 = L.featureGroup.subGroup(mainCluster);
const subGroup2 = L.featureGroup.subGroup(mainCluster);

// 复用图标避免重复创建DOM元素
const sharedIcon1 = L.icon({
  iconUrl: 'icon1.png',
  iconSize: [20, 20]
});
const sharedIcon2 = L.icon({
  iconUrl: 'icon2.png',
  iconSize: [20, 20]
});

// 加载GeoJSON到对应子组
L.geoJSON(geoJsonData1, {
  pointToLayer: (feature, latlng) => L.marker(latlng, { icon: sharedIcon1 })
}).addTo(subGroup1);

L.geoJSON(geoJsonData2, {
  pointToLayer: (feature, latlng) => L.marker(latlng, { icon: sharedIcon2 })
}).addTo(subGroup2);

// 将主聚类组添加到地图
mainCluster.addTo(map);

// 添加图层控制，保留子组独立开关功能
L.control.layers(null, {
  "子组1": subGroup1,
  "子组2": subGroup2
}).addTo(map);

二、GeoJSON加载性能优化 #

1. 按需加载（仅加载视野范围内数据） #

不要一次性加载1万+Marker，监听地图视野变化，只加载当前视口内的GeoJSON：

// 监听地图移动结束事件，加载当前视野内的数据
map.on('moveend', () => {
  const bounds = map.getBounds();
  const bbox = bounds.toBBoxString(); // 格式：minLng,minLat,maxLng,maxLat
  // 请求后端返回对应范围内的GeoJSON
  fetch(`/api/geojson?bbox=${bbox}`)
    .then(res => res.json())
    .then(data => {
      L.geoJSON(data, {
        pointToLayer: (feature, latlng) => L.marker(latlng, { icon: sharedIcon1 })
      }).addTo(subGroup1);
    });
});

2. 预处理GeoJSON数据 #

• 去重重复点：用turf.js移除坐标重复的Marker，减少无效渲染

import * as turf from '@turf/turf';

// 移除距离小于0.0001度（约11米）的重复点
const uniqueGeoJson = turf.removeDuplicates(rawGeoJsonData, { tolerance: 0.0001 });
L.geoJSON(uniqueGeoJson).addTo(subGroup1);

• 清理冗余属性：删除GeoJSON中不需要的额外字段，减少内存占用

3. 使用Canvas渲染Marker #

替换DOM渲染的Marker为Canvas渲染版本（如leaflet-canvas-marker插件），Canvas渲染性能远高于DOM元素：

// 使用CanvasMarker替代普通Marker
L.canvasMarker(latlng, {
  radius: 8,
  color: '#ff0000'
}).addTo(subGroup1);

三、额外性能优化点 #

• 禁用Marker的拖拽、双击等非必要交互事件，减少事件监听开销
• 避免给每个Marker单独绑定click/hover事件，改用mainCluster的clusterclick/markerclick事件委托处理
• 地图初始化时设置preferCanvas: true，强制Leaflet使用Canvas渲染图层

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