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

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

Aurora_juan

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

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：地图文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/Aurora_juan/article/details/128609877

地图专栏收录该内容

1 篇文章

订阅专栏

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

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

在这里插入图片描述

项目中的房屋点位有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.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();
  };