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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

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

  • primitive更多的是面向图形开发人员的底层API,暴露最小限度的抽象,更多使用图形学术语,具有更大的灵活性。

  • entity是更高级别的数据驱动API,它使用一致性设计的、高级别对象来管理一组相关性的可视化对象,其底层也是使用的primitive。

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

 billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
 // 加载房屋点位 数据请求
  const getHouse = () => {
    clearBillboard();
    requestApi.getHousePage({ currentPage: 1, pageSize: 9999 }).then((res) => {
      console.log(res, '房屋点位', billboards);
      const list = res.records;
      let position, point;
      list.forEach((item) => {
        const { id, community, gridsMini, housingEstate, lat, lng, structure } = item;
        position = Cesium.Cartesian3.fromDegrees(+lng, +lat, 0);
        point = { id, community, gridsMini, housingEstate, lat, lng, structure };
        addPrimitive(position, point);
      });
    });
  };
//   添加
  function addPrimitive(position, point) {
    const { community, gridsMini, housingEstate, lat, lng, structure } = point;
    console.log('添加了');
    billboards.add({
      id: point.id,
      width: 40,
      height: 31,
      position: position,
      image: houseImgUrl,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      data: { community, gridsMini, housingEstate, lat, lng, structure },
    });
  }

  /**移除billboards */
  const clearBillboard = () => {
    billboards.removeAll();
  };
 
### Cesium大量 Label 渲染优化及性能提升 在 Cesium 中处理大量的标签 (Label) 时,为了确保应用的流畅运行和良好的用户体验,可以采取多种优化措施来提高渲染效率。 #### 使用 Billboard 集合替代单个 Entity 创建 当需要显示成千上万个标签时,逐个创建 `Entity` 是非常低效的做法。相反,应该考虑使用 `BillboardCollection` 或者更高效的 `Primitive Collection` 来批量管理这些对象。这不仅减少了内存占用,还降低了 CPU 和 GPU 的负担[^1]。 ```javascript const billboardCollection = new Cesium.BillboardCollection(); viewer.scene.primitives.add(billboardCollection); for (let i = 0; i < largeDataset.length; ++i) { const position = Cesium.Cartesian3.fromDegrees( largeDataset[i].longitude, largeDataset[i].latitude, largeDataset[i].height ); billboardCollection.add({ position : position, image : 'path/to/image.png', // 可以为每个billboard设置不同的图片作为背景 scale : 0.5, // 缩放比例 label : { // 添加文本内容 text : `${largeDataset[i].name}`, font : '14px sans-serif', fillColor : Cesium.Color.WHITE, outlineColor : Cesium.Color.BLACK, pixelOffset : new Cesium.Cartesian2(0, -16), showBackground : true, backgroundColor : Cesium.Color.GRAY.withAlpha(0.7) } }); } ``` #### 减少不必要的属性更新频率 对于那些不需要频繁变化的数据项(比如静态位置),应避免每次帧刷新都重新计算其坐标或其他不变特性;而对于动态部分,则可以通过缓存机制减少重复运算次数。此外,在可能的情况下延迟某些操作直到确实必要为止也能有效节省资源消耗。 #### 合理利用 Level of Detail (LOD) 随着视距的变化调整细节层次是一种常见的图形加速技术。具体来说就是距离相机较远的地方采用简化模型表示,而靠近观察者的区域才启用高精度版本。这种方法同样适用于大规模标注场景:只对可见范围内且足够接近用户的点位绘制精细文字说明,其他地方则用简单图标代替或完全隐藏不可见的文字信息。 #### 实施分页加载懒加载策略 如果一次性全部载入所有标记会导致初始化时间过长甚至崩溃的话,那么不妨尝试按需逐步呈现的方式。即先展示当前视野内的要素集合,之后再依据用户交互行为(如平移、缩放)渐次引入新加入视线范围内的项目。这样既能加快启动速度又能维持较好的响应灵敏度。 #### 调整浏览器端 Web Worker 运算能力 将一些耗时的任务分配给后台线程执行有助于减轻主线程压力进而改善整体表现力。例如地理编码转换、空间索引构建等工作都可以放到 worker 中异步完成后再反馈结果用于前端展现逻辑中去。 ```javascript if (typeof(Worker) !== "undefined") { let myWorker; function startWorker() { if(typeof(myWorker) === "undefined"){ myWorker = new Worker('worker.js'); myWorker.onmessage = function(event){ console.log(`Message received from worker: ${event.data}`); // 更新UI或者其他业务逻辑... }; } document.getElementById("start").addEventListener('click', ()=>{ myWorker.postMessage(['processData']); }); document.getElementById("stop").addEventListener('click',()=>{ myWorker.terminate(); myWorker = undefined; }); } window.onload=startWorker; } else { // 浏览器不支持Web Workers. console.log("Sorry! No Web Worker support.."); } ``` 通过以上几种手段相结合,可以在很大程度上缓解因海量标签带来的性能瓶颈问题,并最终实现更加顺畅稳定的三维可视化效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值