Mapbox GL JS/Maplibre：基于子属性实现聚类图层主导状态着色

要实现根据聚类内status属性的多数值设置聚类颜色，你需要在clusterProperties中通过聚合表达式分别统计两种状态的数量，再比较后返回主导值。以下是完整的实现方案：

1. 配置带聚合属性的数据源 #

在addSource的clusterProperties里，先统计active和inactive的数量，再判断主导状态：

this.map.addSource('projects', {
  type: 'geojson',
  data: myData,
  cluster: true,
  clusterMaxZoom: 11,
  clusterRadius: 20,
  clusterProperties: {
    // 累加聚类中active状态的点数量
    activeCount: ['+', ['case', ['==', ['get', 'status'], 'active'], 1, 0]],
    // 累加聚类中inactive状态的点数量
    inactiveCount: ['+', ['case', ['==', ['get', 'status'], 'inactive'], 1, 0]],
    // 比较数量，返回主导状态
    dominantStatus: [
      'case',
      // 若active数量≥inactive，返回'active'；可根据需求改成'>'实现严格多数
      ['>=', ['get', 'activeCount'], ['get', 'inactiveCount']],
      'active',
      'inactive'
    ]
  }
});

2. 基于主导状态设置聚类图层颜色 #

在添加聚类图层时，通过dominantStatus属性判断并设置对应颜色：

this.map.addLayer({
  id: 'clusters',
  type: 'circle',
  source: 'projects',
  filter: ['has', 'point_count'],
  paint: {
    'circle-color': [
      'case',
      ['==', ['get', 'dominantStatus'], 'active'],
      '#007cbf', // active占多数时用蓝色
      '#ff4b4b'  // inactive占多数时用红色
    ],
    // 可选：根据聚类点数量动态调整半径
    'circle-radius': ['step', ['get', 'point_count'], 15, 100, 20, 750, 25]
  }
});

注意事项 #

• 如果需要严格多数（即active数量必须超过半数，而非等于），只需将dominantStatus中的>=改成>即可，此时数量相等时会返回inactive。
• 颜色值可以根据自己的需求替换为任意Hex/RGB颜色。

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