Cesium快速上手3-Billboard/Label/PointPrimitives图元使用讲解

周星星日记

于 2024-04-22 17:37:55 发布

阅读量953

点赞数 3

分类专栏： cesium集合文章标签： cesium

本文链接：https://blog.csdn.net/sky___Show/article/details/137973541

版权

cesium集合专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了如何在Cesium库中使用BillboardCollection来显示图标，LabelCollection用于添加面向屏幕的文字，以及PointPrimitiveCollection添加点。展示了如何设置这些元素的位置、样式和动态添加数据。

摘要由CSDN通过智能技术生成

Billboard&Cesium.BillboardCollection

面朝屏幕的图片,用于添加图标等集合

特点：

始终面朝屏幕，即使旋转也面朝屏幕
注意创建的集群对象 Cesium.BillboardCollection

先看展示效果
在这里插入图片描述

function setBillboardProperties() {
  Sandcastle.declare(setBillboardProperties);
  //在图元中添加	
  const billboards = scene.primitives.add(
    new Cesium.BillboardCollection()
  );
  billboards.add({
    image: "../images/Cesium_Logo_overlay.png", // default: undefined
    show: true, // default
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
    eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
    scale: 2.0, // default: 1.0
    color: Cesium.Color.LIME, // default: WHITE
    rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
    alignedAxis: Cesium.Cartesian3.ZERO, // default
    width: 100, // default: undefined
    height: 25, // default: undefined
    sizeInMeters: false, // default
  });
}

实战中添加

   addBillboardsPrimitivesPlushWaring(list, dataType) {
      // item = JSON.parse(JSON.stringify(item)); // 数据隔离
      if (list.length === 0) {
        return;
      }
      billboards[dataType] = null;
      if (billboards[dataType] == null) {
        billboards[dataType] = this.cesium_viewer.scene.primitives.add(
          new Cesium.BillboardCollection()
        );
      }
      list.forEach((item) => {
        // item.attrs.moid = item.moid;
        if (item.coordinates) {
          billboards[dataType].add({
            id: { baseInfo: item },
            position: this.getPointPostion(
              Number(item.coordinates[0]),
              Number(item.coordinates[1])
            ),
            image: item.imgSrc,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scale: 0.7,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0.0,
              1000000
            ),
          });
        } else {
          // console.log("数据错误", item)
        }
      });
    },

Label&Cesium.LabelCollection

面朝屏幕的文字

在这里插入图片描述
添加Label

function addLabel() {
  Sandcastle.declare(addLabel);
  scene.primitives.removeAll();
  const labels = scene.primitives.add(new Cesium.LabelCollection());
  labels.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    text: "Philadelphia",
  });
}

设置字体

function setFont() {
  Sandcastle.declare(setFont);
  scene.primitives.removeAll();
  const labels = scene.primitives.add(new Cesium.LabelCollection());
  labels.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    text: "Philadelphia",
    // CSS font-family
    font: "24px Helvetica",
    fillColor: new Cesium.Color(0.6, 0.9, 1.0),
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 2,
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  });
}

PointPrimitive&Cesium.PointPrimitiveCollection

添加一个面前屏幕的点

function addPointPrimitive() {
  Sandcastle.declare(addPointPrimitive);

  const pointPrimitives = scene.primitives.add(
    new Cesium.PointPrimitiveCollection()
  );
  pointPrimitives.add({
    color: Cesium.Color.YELLOW,
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  });
}

设置点的属性

function setPointPrimitiveProperties() {
  Sandcastle.declare(setPointPrimitiveProperties);

  const pointPrimitives = scene.primitives.add(
    new Cesium.PointPrimitiveCollection()
  );
  pointPrimitives.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    show: true, // default
    color: Cesium.Color.SKYBLUE, // default: WHITE
    pixelSize: 10, // default: 1
    outlineColor: Cesium.Color.YELLOW, // default: TRANSPARENT
    outlineWidth: 3, // default: 0
  });
}

添加多个点


function addMultiplePointPrimitives() {
  Sandcastle.declare(addMultiplePointPrimitives);

  const pointPrimitives = scene.primitives.add(
    new Cesium.PointPrimitiveCollection()
  );
  pointPrimitives.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    color: Cesium.Color.RED,
    pixelSize: 5,
  });
  pointPrimitives.add({
    position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
    color: Cesium.Color.BLUE,
    pixelSize: 10,
  });
  pointPrimitives.add({
    position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
    color: Cesium.Color.LIME,
    pixelSize: 20,
  });
}