Cesium底层API入门：手把手教你用Primitives实现高效点位标注（附BillboardCollection完整代码）

最新推荐文章于 2026-02-20 09:38:27 发布

原创

最新推荐文章于 2026-02-20 09:38:27 发布 · 54 阅读

标签

#Cesium #Primitives #BillboardCollection #点位标注

Cesium底层API实战：用Primitives实现高性能点位标注的深度解析

在三维地理信息可视化领域，Cesium作为领先的WebGL地球引擎，其性能优化一直是开发者关注的焦点。当我们需要在地图上展示成百上千个点位时，Entity API虽然简单易用，但很快就会遇到性能瓶颈。这时，深入理解Primitives这一底层渲染机制就显得尤为重要。

1. 为什么选择Primitives而非Entity？

很多刚接触Cesium的开发者会从Entity API开始学习，因为它提供了简洁的声明式接口。但当数据量达到一定规模时，Entity的性能问题就会凸显。这背后的根本原因在于两者的设计哲学差异：

Entity：高级抽象层，面向业务逻辑设计
- 自动管理生命周期
- 内置属性绑定和动画系统
- 适合少量动态实体
Primitives：底层图形接口，面向性能优化设计
- 直接控制渲染管线
- 最小化抽象开销
- 适合大规模静态数据

// Entity方式添加点位（性能较低）
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
  billboard: {
    image: 'pin.png',
    width: 50,
    height: 50
  }
});

// Primitives方式添加点位（性能更高）
const billboards = viewer.scene.primitives.add(
  new Cesium.BillboardCollection()
);
billboards.add({
  position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
  image: 'pin.png',
  width: 50,
  height: 50
});

从代码量上看两者差异不大，但底层执行效率却有天壤之别。Entity每次添加都会创建完整的对象模型，而Primitives直接操作图形缓冲区。