cesium 大量标注点位 Primitives与BillboardCollection结合

最新推荐文章于 2025-04-28 09:59:56 发布

原创

最新推荐文章于 2025-04-28 09:59:56 发布 · 3.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

在处理大量房屋点位时，使用entity导致了渲染卡顿。文章介绍了转向使用Cesium的BillboardCollection来改善性能，BillboardCollection是渲染集合，适合大批量点位显示。通过加载房屋点位数据并逐个添加到BillboardCollection中，实现了高效展示。同时，提供了清除和添加billboard的方法。

在这里插入图片描述

项目中的房屋点位有1000多个，使用entity造成渲染卡顿，经过我的网上翻阅，大多优秀的网友推荐了Primitives的写法
primitive和entity

primitive更多的是面向图形开发人员的底层API，暴露最小限度的抽象，更多使用图形学术语，具有更大的灵活性。
entity是更高级别的数据驱动API，它使用一致性设计的、高级别对象来管理一组相关性的可视化对象，其底层也是使用的primitive。

Cesium内部为我们提供了几个可渲染的集合像PointPrimitiveCollection、BillboardCollection等等，这里我们就可以用到BillboardCollection
在这里插入图片描述
上代码

 billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
 // 加载房屋点位 数据请求
  const getHouse = () => {
   
   
    clearBillboard();
    requestApi.