Leaflet缩小地图时CircleMarker被markercluster聚合成数字如何解决

你遇到的缩小时标记变为数字聚合图标的效果是Leaflet.markercluster插件的默认设计，该插件的核心功能就是在地图缩放等级较低、视野内标记数量较多时自动将近距离的标记聚合为数字图标，和底图、CircleMarker本身没有关联。

方案1：完全关闭聚合（最适配你的需求） #

你引入markercluster的初衷只是为了方便统一管理删除所有标记，无需聚合能力的话，直接替换为Leaflet原生的图层组即可，用法完全兼容，无需修改其他逻辑：
把添加标记逻辑里的初始化代码：

markerList = L.markerClusterGroup();

替换为：

markerList = L.layerGroup();

替换后不会再出现聚合效果，你原来的自定义CircleMarker样式、批量删除标记的deleteMarkers函数都可以正常使用。

方案2：保留聚合功能，调整聚合触发规则 #

如果后续仍需要聚合能力，可在初始化MarkerClusterGroup时传入参数调整聚合逻辑：

markerList = L.markerClusterGroup({
  disableClusteringAtZoom: 16, // 当地图缩放等级≥16时，完全关闭聚合，所有标记直接展示
  maxClusterRadius: 20, // 只有两个标记的屏幕距离小于20像素时才会触发聚合，默认值为80，数值越小越难触发聚合
  showCoverageOnHover: false // 可选配置，关闭鼠标 hover 聚合点时的范围遮罩
});

你可以根据业务需求调整disableClusteringAtZoom的数值，数值越高，需要放大到更大的等级才会展示单个标记。

方案3：自定义聚合图标样式 #

如果需要保留聚合功能但不想使用默认的数字图标，可以通过iconCreateFunction参数自定义聚合点的样式，适配你的CircleMarker风格：

markerList = L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    // 自定义聚合点为圆形，展示聚合数量，可自行调整颜色、大小
    return L.divIcon({
      html: '<div style="width:30px;height:30px;border-radius:50%;background:#2c7be5;color:white;text-align:center;line-height:30px;">' + cluster.getChildCount() + '</div>',
      className: 'custom-cluster-icon',
      iconSize: L.point(30, 30)
    });
  }
});

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