如何覆盖Mapbox GL JS外部脚本中的getClusterProperties函数

你直接定义全局的getClusterProperties函数之所以不生效，是因为Mapbox GL JS内部调用的并不是全局作用域下的这个函数，而是它自身内部封装的、挂载在supercluster原型上的方法。要实现覆盖，你需要找到这个方法的实际挂载位置去修改它。

针对v0.44.1这个版本，具体的解决步骤如下：

• 确保在mapbox-gl.js加载完成后、创建地图实例之前，执行覆盖代码
• 直接修改mapboxgl.supercluster.prototype.getClusterProperties方法，替换成你的自定义逻辑

示例代码如下：

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<script>
// 覆盖默认的getClusterProperties方法
mapboxgl.supercluster.prototype.getClusterProperties = function(cluster) {
  // 这里编写你的自定义逻辑
  // 举个例子：自定义集群的属性计算
  const customProps = {};
  // 比如统计集群内不同类型要素的数量
  let total = 0;
  let typeACount = 0;
  cluster.children.forEach(child => {
    total += child.pointCount || 1;
    if (child.properties?.type === 'typeA') {
      typeACount += child.pointCount || 1;
    }
  });
  customProps.point_count = total;
  customProps.point_count_abbreviated = this._formatNumber(total); // 复用原有的数字格式化方法
  customProps.type_a_count = typeACount; // 添加自定义属性
  return customProps;
};
</script>
<body>
  <div id='map'></div>
  <script>
    // 这里再创建你的地图和集群源
    mapboxgl.accessToken = '你的token';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9
    });

    map.on('load', () => {
      map.addSource('clusters', {
        type: 'geojson',
        data: '你的GeoJSON数据',
        cluster: true,
        clusterRadius: 50
      });
      // 后续添加图层等操作...
    });
  </script>
</body>

关键说明： #

• 必须在创建地图实例前覆盖原型方法：这样当Mapbox内部初始化supercluster实例时，会直接使用你修改后的方法
• 可以复用原方法中的工具函数：比如示例里的this._formatNumber，这是supercluster原型上自带的数字格式化方法，能帮你把大数字转换成缩写形式（比如1000变成1k）
• 如果需要针对单个集群源自定义逻辑：在v0.44.1版本中没有单独的配置项，所以只能通过这种全局覆盖的方式实现，如果你需要不同源有不同逻辑，可能需要在方法内部根据源的标识做区分判断

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