Leaflet MarkerClusterGroup：按人口优先级优先显示城市标记

当然可以实现，而且不需要依赖SubGroup——SubGroup主要用于让标记同时归属多个集群组，对你的需求来说有点杀鸡用牛刀。下面是两种直接的实现思路：

方法一：基于缩放级别动态过滤标记（最常用） #

核心逻辑是根据当前地图缩放级别，设置对应的人口阈值，只让符合条件的高人口标记加入集群显示，低人口标记暂时隐藏。

代码示例 #

// 初始化地图
const map = L.map('map').setView([30, 110], 4);

// 创建MarkerClusterGroup
const markerCluster = L.markerClusterGroup().addTo(map);

// 存储所有城市标记
const allCityMarkers = [];

// 示例城市数据（人口单位：万）
const cityData = [
  { name: '上海', lat: 31.2304, lng: 121.4737, population: 2487 },
  { name: '杭州', lat: 30.2741, lng: 120.1551, population: 1193 },
  { name: '湖州', lat: 30.8688, lng: 120.0934, population: 340 },
  { name: '丽水', lat: 28.4575, lng: 119.9244, population: 251 }
];

// 批量创建标记并存储
cityData.forEach(city => {
  const marker = L.marker([city.lat, city.lng], {
    population: city.population,
    title: `${city.name} (${city.population}万)`
  });
  allCityMarkers.push(marker);
});

// 定义缩放级别对应的人口阈值
const zoomRules = [
  { maxZoom: 5, minPopulation: 1000 }, // 缩放级别<5时，只显示人口≥1000万的城市
  { maxZoom: 8, minPopulation: 500 },  // 缩放级别5-7时，显示人口≥500万的城市
  { maxZoom: Infinity, minPopulation: 0 } // 缩放级别≥8时，显示所有城市
];

// 更新标记显示的核心函数
function syncMarkersWithZoom() {
  const currentZoom = map.getZoom();
  // 匹配当前缩放对应的人口阈值
  const rule = zoomRules.find(r => currentZoom < r.maxZoom);
  const minPop = rule ? rule.minPopulation : 0;

  // 清空现有集群，重新添加符合条件的标记
  markerCluster.clearLayers();
  allCityMarkers.forEach(marker => {
    if (marker.options.population >= minPop) {
      markerCluster.addLayer(marker);
    }
  });
}

// 初始化加载时执行一次
syncMarkersWithZoom();

// 监听地图缩放结束事件，实时更新标记
map.on('zoomend', syncMarkersWithZoom);

方法二：自定义集群逻辑（针对标记重叠时的优先级） #

如果你的需求是当标记在当前缩放级别下重叠需要集群时，优先显示高人口标记而非集群，可以通过修改MarkerClusterGroup的iconCreateFunction结合自定义过滤逻辑实现：

代码示例（简化版） #

const markerCluster = L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    const markers = cluster.getAllChildMarkers();
    // 按人口降序排序
    markers.sort((a, b) => b.options.population - a.options.population);
    
    // 如果集群内有高人口标记，直接显示前1个，其余保留集群逻辑
    if (markers.length > 1 && markers[0].options.population > 500) {
      return markers[0].getIcon();
    } else {
      // 正常显示集群图标
      return L.divIcon({ html: `<div>${markers.length}</div>` });
    }
  }
});

关于SubGroup的说明 #

SubGroup的核心作用是让同一个标记同时属于多个MarkerClusterGroup，比如你想同时按“省份”和“人口区间”分类集群，这时候SubGroup有用。但对你的缩放优先级需求，SubGroup不是必需的，用方法一的动态过滤更直接高效。

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