Cesium实现点位聚类效果：原理剖析与性能优化实战

1次阅读

共计 2220 个字符，预计需要花费 6 分钟才能阅读完成。

当地图需要同时显示成千上万个点位时，直接渲染会导致浏览器性能急剧下降。根据我的测试，在普通 PC 上：

直接渲染 10,000 个点位时帧率会降到 15-20FPS
使用聚类后相同数据量可以保持 60FPS 的流畅体验

四叉树是实现空间聚类的基础数据结构，它将二维空间递归划分为四个象限。实现要点：

class QuadTree {constructor(public bounds: BoundingRectangle, public capacity = 4) {}

  // 插入点位的核心方法
  insert(point: Point): boolean {if (!this.bounds.contains(point.position)) return false;

    if (this.points.length < this.capacity && !this.divided) {this.points.push(point);
      return true;
    }

    if (!this.divided) this.subdivide();

    return (this.northeast.insert(point) ||
      this.northwest.insert(point) ||
      this.southeast.insert(point) ||
      this.southwest.insert(point)
    );
  }
}

不同缩放级别应该显示不同粒度的聚类结果：

近距离：显示原始点位
中距离：显示中度聚类结果
远距离：显示高度聚合的聚类点

function updateLOD() {
  const cameraHeight = viewer.camera.positionCartographic.height;

  if (cameraHeight < 5000) {clusterRadius = 10; // 小半径} else if (cameraHeight < 20000) {clusterRadius = 30; // 中等半径} else {clusterRadius = 80; // 大半径}
}

聚类计算是 CPU 密集型操作，应该放在 Web Worker 中执行：

// 主线程
const worker = new Worker('cluster.worker.js');
worker.postMessage({
  type: 'init',
  points: rawPoints
});

// Worker 线程
self.onmessage = function(e) {if (e.data.type === 'init') {quadTree = buildQuadTree(e.data.points);
  }
};

class ClusterManager {
  private quadTree: QuadTree;
  private currentClusters: Cluster[] = [];

  constructor(
    private readonly entityCollection: EntityCollection,
    private options: ClusterOptions
  ) {this.initQuadTree();
  }

  private initQuadTree() {const bounds = this.calculateBounds();
    this.quadTree = new QuadTree(bounds, this.options.capacity);
  }

  public updateClusters() {const clusters = this.calculateClusters();
    this.updateEntities(clusters);
  }
}

静态数据 ：只需初始化时计算一次聚类
动态数据 ：需要实现增量更新策略

// 动态数据更新示例
function handleNewPoints(newPoints) {
  // 增量更新四叉树
  newPoints.forEach(p => quadTree.insert(p));

  // 只重新计算受影响区域
  const dirtyAreas = calculateDirtyAreas(newPoints);
  dirtyAreas.forEach(area => {reclusterArea(area);
  });
}

数据量	直接渲染内存	聚类后内存
1 万点	120MB	45MB
10 万点	内存溢出	210MB

WGS84 坐标的小数位处理不当会导致聚类异常：

// 错误做法：直接比较浮点数
if (p1.lon === p2.lon && p1.lat === p2.lat)

// 正确做法：使用 epsilon 比较
function equalsEpsilon(a, b, epsilon = 1e-10) {return Math.abs(a - b) <= epsilon;
}

对于超大数据集（>50 万点）：