在物业巡更管理系统的仪表盘里，左侧总览地图需要同时展示数十名保安的实时 GPS 位置。若每个点都带姓名标签，远景下 marker 与文字会叠成一团，既看不清也无法点击。本文记录我们在 Vue 2 + OpenLayers 6 上落地的一套聚合方案，以及迭代中踩过的坑。

问题背景

初始症状

• 勾选多名用户后，地图上绿色 marker + 用户名全部渲染，密密麻麻重叠。
• 缩放、平移后问题依旧，性能与可读性都很差。

产品诉求

技术栈：OpenLayers 6.15（ol/source/Cluster）、Vue 2 仪表盘页。

解决过程

方案一：仅调 Cluster.distance

把 distance 设为 0 指望关闭聚合，但配合 minDistance: 18 与 declutter: true 时，仍会出现部分点被合并、重叠标签被隐藏等问题。

结论：不能只改 distance，要同时处理 minDistance、declutter，并在高 zoom 换数据源。

方案二：zoom 阈值 + 双数据源（最终采用）

维护两份 source：Cluster（远景数字圆点）与 VectorSource（近景逐点 + 姓名）。当 zoom >= 17 时 layer.setSource(vectorSource)，比 setDistance(0) 更可靠。

方案三：点击聚合的取景

早期固定 zoom 17 + 聚类中心，若「7」由相距较远的「5」和「2」组成，中心落在中间会导致两组都跑出视野。修正：分布较广时用 view.fit(extent, { maxZoom: 17 })；仅范围极小时才 zoom 17 居中。

最终方案

1. 常量

const USER_CLUSTER_DISTANCE = 42
const USER_CLUSTER_EXPAND_MIN_ZOOM = 17

默认地图 zoom 为 12；≥ 17 时切换 VectorSource。

2. 创建图层

const clusterSource = new Cluster({
  distance: USER_CLUSTER_DISTANCE,
  minDistance: 0,
  source: vectorSource,
})
const layer = new Vector({
  source: clusterSource,
  declutter: false,
  style: (feature) => this.userClusterStyleFunction(feature),
})

3. 按 zoom 切换数据源

updateUserClusterDistance() {
  const expand = this.map.getView().getZoom() >= 17 - 0.001
  const nextSource = expand ? this.userMarkerVectorSource : this.userClusterSource
  if (this.userMarkerLayer.getSource() !== nextSource) {
    this.userMarkerLayer.setSource(nextSource)
    this.userMarkerLayer.changed()
  }
}

4. 点击聚合：fit 而非盲居中

if (getWidth(extent) < 2 && getHeight(extent) < 2) {
  map.getView().animate({ zoom: 17, center: getCenter(extent) })
} else {
  map.getView().fit(extent, { padding: [60,60,60,60], maxZoom: 17 })
}

5. 事件与用户 marker 分离

clearEventMapSelection() 只调用 removeEventMarkers()，避免点击空白清掉用户 GPS。

交互一览

• zoom < 17 → Cluster 数字圆点
• zoom ≥ 17 → 全员 icon + 姓名
• 点击聚合 → fit 成员范围（maxZoom 17）
• 点击空白 → 仅取消事件选中

总结

• 海量点 + 文字：远景聚合，近景展开
• setDistance(0) 不够：高 zoom 换 VectorSource 更稳
• 聚合点击用 fit(extent)，避免中心落在两组点之间
• 用户 GPS 与事件 marker 分 layer、分清除逻辑

可按「远景 Cluster + 近景 Vector + zoom 阈值」在巡检轨迹、调度地图等场景复用。