如何在运行时开启/关闭Leaflet.markercluster集群功能？

当然可以搞定！这个需求确实实用——有时候密集标记需要集群，有时候又要看到原始点位。Leaflet本身没提供现成的“关闭集群”按钮，但我们可以用自定义控件快速实现，而且能和Leaflet的默认UI风格保持一致。

下面是一套简便又美观的实现方案：

核心思路 #

• 提前保存原始标记的集合（不要直接加到地图上，而是先存起来）
• 创建一个自定义的Leaflet控件，里面放一个复选框
• 通过复选框的状态切换，决定显示集群层还是原始标记层

完整代码示例 #

1. HTML结构 #

先在页面里留好地图容器：

<div id="map" style="width: 100%; height: 600px;"></div>

2. JavaScript逻辑 #

// 初始化地图
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 准备原始标记数据（这里用示例数据，你换成自己的标记即可）
const markers = [];
for (let i = 0; i < 100; i++) {
  const lat = 51.505 + (Math.random() - 0.5) * 0.2;
  const lng = -0.09 + (Math.random() - 0.5) * 0.2;
  markers.push(L.marker([lat, lng]));
}

// 创建集群层
const markerClusterGroup = L.markerClusterGroup();
markerClusterGroup.addLayers(markers);
markerClusterGroup.addTo(map);

// 创建自定义控件：集群开关复选框
const clusterControl = L.Control.extend({
  onAdd: function(map) {
    const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
    container.style.padding = '4px 8px';
    
    // 复选框+标签
    const checkbox = L.DomUtil.create('input', '', container);
    checkbox.type = 'checkbox';
    checkbox.id = 'cluster-toggle';
    checkbox.checked = true; // 默认开启集群
    
    const label = L.DomUtil.create('label', '', container);
    label.htmlFor = 'cluster-toggle';
    label.textContent = ' 启用集群';
    label.style.cursor = 'pointer';
    
    // 绑定切换事件
    L.DomEvent.on(checkbox, 'change', function(e) {
      if (this.checked) {
        // 切换到集群模式：移除原始标记，添加集群层
        map.removeLayer(markersLayer);
        map.addLayer(markerClusterGroup);
      } else {
        // 切换到原始标记模式：移除集群层，添加原始标记层
        map.removeLayer(markerClusterGroup);
        map.addLayer(markersLayer);
      }
    });
    
    // 创建原始标记层（一开始不添加到地图）
    window.markersLayer = L.layerGroup(markers);
    
    return container;
  },
  
  onRemove: function(map) {
    // 清理事件监听
    L.DomEvent.off(document.getElementById('cluster-toggle'), 'change');
  }
});

// 添加控件到地图右上角
map.addControl(new clusterControl({ position: 'topright' }));

3. 样式优化（可选） #

为了让复选框和Leaflet默认控件风格更统一，可以加一点CSS：

#cluster-toggle {
  vertical-align: middle;
  margin: 0;
}

.leaflet-control label {
  vertical-align: middle;
  font-size: 14px;
  color: #333;
}

关键细节说明 #

• 我们把原始标记存在markers数组里，同时创建了一个markersLayer层，这样切换时不用重复创建标记，性能更好
• 自定义控件继承了L.Control，所以会自动适配Leaflet的控件布局和响应式
• 事件监听用了L.DomEvent，避免和Leaflet的事件系统冲突
• 默认勾选复选框，保持初始状态为集群开启

这样实现出来的开关完全融入Leaflet的GUI菜单，操作简便，外观也和默认控件一致，完美满足你的需求！

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