OpenLayers 7：指定缩放级别取消聚合（含同坐标点）

核心思路 #

由于坐标完全相同的点即使设置distance: 0仍会被ClusterSource聚合，因此我们通过样式函数结合缩放级别判断，在超过指定缩放阈值时，强制为聚合内的每个要素生成独立图标样式，从而实现“解散所有聚合”的效果。

修改后的代码实现 #

1. 定义缩放阈值及样式缓存 #

先将图标实例缓存（避免重复创建影响性能），并设置缩放阈值：

// 自定义缩放阈值，超过该级别则显示所有点的图标
const MAX_CLUSTER_ZOOM = 15;

// 缓存图标与聚合样式，减少重复创建
const styleCache = {
  fastLoadingIcon: new Icon({
    src: FastLoadingIcon,
    anchor: [0.5, 1], // bottom center
    scale: 0.75,
  }),
  loadingIcon: new Icon({
    src: LoadingIcon,
    anchor: [0.5, 1], // bottom center
    scale: 0.75,
  }),
  cluster: {}, // 缓存聚合圆形样式
};

2. 修改聚合样式函数 #

在样式函数中加入缩放级别判断，超过阈值时遍历所有子要素返回独立样式：

function clusterStyle(feature) {
  const map = feature.getLayer().getMap();
  const currentZoom = map.getView().getZoom();

  // 超过缩放阈值：为每个子要素生成图标样式
  if (currentZoom > MAX_CLUSTER_ZOOM) {
    const subFeatures = feature.get('features');
    return subFeatures.map(subFeature => {
      return new Style({
        image: subFeature.get('PowerMap')['75-100kW'] || subFeature.get('PowerMap')['100+kW']
          ? styleCache.fastLoadingIcon
          : styleCache.loadingIcon,
      });
    });
  }

  // 未超过阈值：保持原聚合逻辑
  const size = feature.get('features')?.length;
  let style = styleCache.cluster[size];

  if (!style) {
    if (size === 1) {
      style = new Style({
        image: feature.get('features')[0].get('PowerMap')['75-100kW'] || feature.get('features')[0].get('PowerMap')['100+kW']
          ? styleCache.fastLoadingIcon
          : styleCache.loadingIcon,
      });
    } else {
      style = new Style({
        image: new CircleStyle({
          radius: 11,
          stroke: new Stroke({ color: '#fff' }),
          fill: new Fill({ color: '#21387D' }),
        }),
        text: new Text({
          text: size.toString(),
          fill: new Fill({ color: '#fff' }),
        }),
      });
    }
    styleCache.cluster[size] = style;
  }
  return style;
}

3. 图层初始化（保持原有逻辑） #

this.clusterLayer = new VectorLayer({
  source: this.clusterSource,
  style: clusterStyle,
});

点击事件处理（可选） #

如果需要为每个图标添加独立点击逻辑，可监听图层click事件遍历子要素处理：

this.clusterLayer.on('click', (evt) => {
  const feature = evt.feature;
  const currentZoom = evt.map.getView().getZoom();

  if (currentZoom > MAX_CLUSTER_ZOOM) {
    const subFeatures = feature.get('features');
    // 遍历子要素，处理各自的点击逻辑
    subFeatures.forEach(subFeature => {
      console.log('点击要素:', subFeature.get('PowerMap'));
      // 可添加弹窗、高亮等自定义逻辑
    });
  } else {
    // 原聚合点的点击逻辑（如放大到子要素区域）
  }
});

原理说明 #

• OpenLayers样式函数支持返回样式数组，返回数组时会为聚合内每个子要素应用对应样式，实现“显示所有点”的效果。
• 无需切换图层，直接通过样式逻辑控制显示，避免图层切换的性能开销。
• 缓存图标与聚合样式，确保高缩放级别下的渲染性能。

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