无Node.js/NPM环境下，如何用Supercluster v7.1.2适配OpenLayers v6.12.0？

问题根源 #

1. 异步加载时机错误：VectorSource采用bbox策略异步加载数据，初始化时getFeatures()返回空数组，导致Supercluster未加载到任何点数据，集群无法显示。
2. 坐标系统不匹配：cluster.getClusters()要求传入EPSG:4326的范围，但OpenLayerscalculateExtent()返回的是EPSG:3857的视图范围，类型不匹配触发内部报错TypeError: p is undefined。
3. Supercluster配置错误：map函数返回格式不符合要求，导致集群属性映射异常。

修复步骤 #

1. 监听VectorSource加载完成事件，延迟初始化Supercluster #

替换原有的cluster.load代码块，改为监听数据源的change事件，确保数据加载完成后再传入Supercluster：

const cluster = new Supercluster({
  radius: 40,
  maxZoom: 16
  // 若需自定义统计，可保留下方配置（需修正格式）
  // map: function (feature) {
  //   return {
  //     properties: {
  //       count: 1,
  //       ...feature.properties // 保留原属性
  //     }
  //   };
  // }
});

// 监听数据源加载完成
centroides_prescriptionsSource.on('change', function() {
  if (centroides_prescriptionsSource.getFeatures().length > 0) {
    // 仅在首次加载完成后执行一次
    centroides_prescriptionsSource.un('change', arguments.callee);
    
    const points = centroides_prescriptionsSource.getFeatures().map(function(feature) {
      return {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: ol.proj.transform(feature.getGeometry().getCoordinates(), 'EPSG:3857', 'EPSG:4326')
        },
        properties: feature.getProperties()
      };
    });
    
    cluster.load(points);
    // 首次加载后立即绘制集群
    drawCluster();
  }
});

2. 修正getClusters的范围参数坐标转换 #

修改drawCluster函数，将OpenLayers的3857范围转换为4326后再传入Supercluster：

function drawCluster() {
  const extent3857 = map.getView().calculateExtent(map.getSize());
  // 将EPSG:3857范围转换为EPSG:4326
  const extent4326 = ol.proj.transformExtent(extent3857, 'EPSG:3857', 'EPSG:4326');
  const zoom = Math.floor(map.getView().getZoom()); // Supercluster要求整数缩放级别
  
  const clusters = cluster.getClusters(extent4326, zoom);
  clusterLayer.getSource().clear();
  
  clusterLayer.getSource().addFeatures(clusters.map(function(clusterItem) {
    const features = clusterItem.properties.cluster ? 
      clusterItem.properties.cluster.map(prop => {
        return new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform(prop.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')),
          properties: prop.properties
        });
      }) : [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(clusterItem.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')),
        properties: clusterItem.properties
      })];
    
    return new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform(clusterItem.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')),
      features: features
    });
  }));
}

3. （可选）修正Supercluster自定义映射配置 #

如果需要自定义集群统计字段，确保map函数返回符合GeoJSON规范的对象：

const cluster = new Supercluster({
  radius: 40,
  maxZoom: 16,
  map: function(feature) {
    // 映射单个要素的属性，返回包含properties的对象
    return {
      properties: {
        count: 1,
        // 可添加自定义字段
        type: feature.properties.type
      }
    };
  },
  reduce: function(accumulated, props) {
    // 聚合逻辑，比如累加count
    accumulated.count += props.count;
  }
});

关键注意事项 #

• Supercluster仅支持EPSG:4326坐标，所有传入的点范围必须先转换为该坐标系。
• 缩放级别需传入整数，使用Math.floor(map.getView().getZoom())避免浮点值导致的异常。
• 异步数据源必须等待加载完成后再初始化Supercluster，否则无法获取有效数据。

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