You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在地图加载JS文件中修改Leaflet MarkerCluster的尺寸阈值

修改Leaflet MarkerCluster集群尺寸阈值(无需修改源码)

你只需要在创建markerClusterGroup时,添加iconCreateFunction配置项,自定义集群数量的判断逻辑,就能覆盖默认的阈值规则,不用修改leaflet.markercluster.js源码。

修改后的完整代码示例(可根据需求调整阈值数值):

var clusterLayer = L.markerClusterGroup({
  showCoverageOnHover: false,
  maxClusterRadius: 40,
  spiderLegPolylineOptions: {
    weight: 5,
    color: '#E0AA5E',
    opacity: 0.9
  },
  // 自定义集群图标阈值逻辑
  iconCreateFunction: function(cluster) {
    var count = cluster.getChildCount();
    var sizeClass = ' marker-cluster-';
    
    // 这里修改你需要的阈值,示例:<5为small,<50为medium,否则large
    if (count < 5) {
      sizeClass += 'small';
    } else if (count < 50) {
      sizeClass += 'medium';
    } else {
      sizeClass += 'large';
    }
    
    // 保持和默认逻辑一致的返回结构,确保原有样式正常生效
    return L.divIcon({
      html: '<div><span>' + count + '</span></div>',
      className: 'marker-cluster' + sizeClass,
      iconSize: L.point(40, 40)
    });
  }
});

说明

  • cluster.getChildCount()用于获取当前集群包含的标记总数
  • 你可以完全自定义if-else里的阈值条件,把示例中的5、50替换成你实际需要的数值
  • 返回的L.divIcon结构和默认逻辑一致,保证原有的集群样式能正常应用

内容的提问来源于stack exchange,提问作者SoranDK

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 14:33:15