【004--003】-CesiumJS-API-Billboard相关函数用法

kotmax

已于 2023-02-19 15:14:12 修改

阅读量1.9k

点赞数

分类专栏： CesiumJS-API 文章标签： javascript es6 前端框架 Powered by 金山文档

于 2023-02-19 15:10:02 首次发布

本文链接：https://blog.csdn.net/wtuynqy/article/details/129110765

版权

CesiumJS-API 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Billboard

Billboard是一个图像贴片，在3D场景中以固定的大小和方向渲染。它通常用于标记重要的位置或用于展示图标。

常用API：

constructor(image: URL): 构造函数，创建一个Billboard对象。

image: 表示Billboard显示的图像的URL。

position: 表示Billboard在场景中的位置的Cartesian3对象。

width: 表示Billboard的宽度，以像素为单位。

height: 表示Billboard的高度，以像素为单位。

scale: 表示Billboard的大小相对于其原始大小的比例因子。

rotation: 表示Billboard绕其原点旋转的角度（弧度）。

alignedAxis: 表示Billboard的轴向量，它将对齐到与表面的法线相切的面上。

verticalOrigin: 表示Billboard垂直方向上的对齐方式。

horizontalOrigin: 表示Billboard水平方向上的对齐方式。

color: 表示Billboard的颜色，可以设置为RGBA颜色对象。

show: 表示Billboard是否应该被渲染。

注意点：

在创建Billboard之前，需要确保已经加载了与其相关的图像资源。

如果Billboard的位置在地球表面，则应该使用Cartographic.fromDegrees方法将经度和纬度转换为Cartesian3。

在Cesium中，角度以弧度表示。

alignedAxis可以用于将Billboard旋转到其法向量与表面切向量相切的表面上。

对于垂直和水平对齐，可能需要根据图像的大小和方向进行调整。

可以通过修改Billboard的属性来实时更新其外观。

用法示例：

// 创建Billboard
var billboard = new Cesium.Billboard({
  image: 'path/to/image.png',
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  width: 32,
  height: 32
});
// 添加Billboard到场景
viewer.scene.primitives.add(billboard);
// 更新Billboard的位置
billboard.position = Cesium.Cartesian3.fromDegrees(-75.58777, 40.03883);
// 设置Billboard的颜色
billboard.color = Cesium.Color.RED;
// 使Billboard不可见
billboard.show = false;

BillboardCollection

BillboardCollection是一个图像集合，用于渲染多个Billboard。每个Billboard包含一个图像，可以根据其位置，大小，旋转和颜色进行调整。它还提供了批量添加和删除Billboards的方法。

以下是BillboardCollection的一些常用属性和方法：

billboards：一个Billboard数组，用于直接访问和修改Billboard的属性。

add(billboard)：将给定的Billboard添加到集合中。

remove(billboard, destroy)：从集合中删除给定的Billboard。如果destroy为true，则从图像集中删除Billboard的图像资源。

removeAll()：从集合中删除所有的Billboard。

update()：强制更新所有Billboard的状态。

length：集合中的Billboard数量。

下面是一个使用BillboardCollection绘制多个图标的示例：

var viewer = new Cesium.Viewer('cesiumContainer');
var billboards = new Cesium.BillboardCollection();
var billboard = billboards.add({
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    image : 'path/to/image.png'
});
billboards.add({
    position : Cesium.Cartesian3.fromDegrees(-75.50123, 40.06384),
    image : 'path/to/another_image.png'
});
viewer.scene.primitives.add(billboards);

在此示例中，我们首先创建了一个BillboardCollection。然后，我们使用add()方法将两个Billboard添加到集合中，并指定它们的位置和图像。最后，我们将BillboardCollection添加到场景中的primitive集合中。

BillboardGraphics

BillboardGraphics是Cesium中用于在场景中添加图片。它可以控制图片的位置、尺寸、旋转、颜色等属性。

常用属性及说明：

show: 是否显示该对象

image: 图片的URL地址

pixelOffset: 像素偏移量，用于调整图片位置

eyeOffset: 相机位置偏移量，用于调整图片位置

horizontalOrigin: 水平方向上的对齐方式，可选值为LEFT、CENTER和RIGHT

verticalOrigin: 垂直方向上的对齐方式，可选值为TOP、CENTER和BOTTOM

scale: 图片的缩放比例

rotation: 图片的旋转角度，单位为弧度

color: 图片的颜色，用Cesium.Color对象表示

用法示例：

// 创建BillboardGraphics对象
var billboard = viewer.entities.add({
  billboard: {
    image: 'path/to/image.png',
    show: true,
    scale: 2.0,
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    rotation: Cesium.Math.toRadians(45),
    color: Cesium.Color.YELLOW
  }
});
// 修改图片位置
billboard.billboard.pixelOffset = new Cesium.Cartesian2(100, 0);
// 修改图片大小
billboard.billboard.scale = 3.0;
// 修改图片颜色
billboard.billboard.color = Cesium.Color.RED;

注意事项：

BillboardGraphics必须附加到Entity对象上才能在场景中显示。

使用pixelOffset和eyeOffset属性时，需要设置Cartesian2类型的值，其中x和y表示横向和纵向的偏移量，单位为像素。

使用scale属性时，值越大图片越大，值越小图片越小。

使用rotation属性时，单位为弧度，正值表示逆时针旋转。

BillboardVisualizer

BillboardVisualizer是一个可视化器，用于将Billboard添加到场景中。它可以为一个或多个Entity中的每个BillboardGraphics属性创建一个Billboard。

构造函数：

new Cesium.BillboardVisualizer(entityCluster, entityCollection);

参数：

entityCluster：EntityCluster类型，可选，用于在3D Tiles上进行聚类。

entityCollection：EntityCollection类型，可选，包含要可视化的Entity。

方法：

update(time)：更新所有的Billboard的状态。参数time是当前时间。

示例代码：

var visualizer = new Cesium.BillboardVisualizer(viewer.entities);
viewer.scene.postUpdate.addEventListener(function(scene, time) {
    visualizer.update(time);
});