点击查看:最新Cesium可视化系统实战视频课程
在 Cesium 中,
Billboard
是一种常用的实体类型,用于将图像或图形放置在地球表面,并能够随视角的变化而动态更新。它非常适合展示位置标识、广告牌、气象数据、交通监控等内容。本文将详细介绍 Billboard
的概念、常用配置以及在 Cesium 中的应用。
什么是 Cesium 中的 Billboard?
在 Cesium 中,Billboard
是一种二维的图形实体,它会被显示在三维地球或场景中,通常用于展示图标、广告牌、标记等。和 3D 模型(如 3D Tiles)不同,Billboard
是面朝相机的始终朝向视点的平面图形。它可以随用户视角的变化始终保持清晰。
Billboard
的使用场景
- 广告牌:例如,展示一个在地图上的广告图片。
- 位置标记:例如,标记城市、建筑物或某个地理位置。
- 数据可视化:例如,气象或交通信息,通过图片展示不同的地理点。
- 导航和指引:标记路线、方向等。
如何在 Cesium 中创建 Billboard?
下面我们通过一个简单的代码示例来讲解如何创建和配置 Billboard
实体。
示例代码
let billboard = viewer.entities.add({
// 图片的位置
position: Cesium.Cartesian3.fromDegrees(114.07, 22.54, 100),
// 图片的内容
billboard: {
// 图片的地址
image: "./images/lcdm.png",
// 图片的宽度
width: 100,
// 图片的高度
height: 25,
// 图片的旋转
// rotation: Cesium.Math.toRadians(90),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
sizeInMeters: true,
}
});
代码分析
- 位置设置(position):
javascript
position: Cesium.Cartesian3.fromDegrees(114.07, 22.54, 100)
position
定义了 Billboard
在地球上的位置。这里使用了 Cesium.Cartesian3.fromDegrees
方法,将经度、纬度和高度转换为笛卡尔坐标系中的 Cartesian3
对象。
-
114.07
和22.54
分别表示经度和纬度。100
表示高度,单位是米。这个高度值决定了图片距离地球表面的高度。
- 图片内容(billboard):
billboard: {
image: "./images/lcdm.png",
width: 100,
height: 25,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
sizeInMeters: true,
}
这部分代码定义了 Billboard
的外观和一些特性:
-
image
: 指定图片的地址。图片会显示在地球上。width
和height
: 分别指定图片的宽度和高度。单位为像素。horizontalOrigin
和verticalOrigin
: 这些属性定义了Billboard
图像相对于位置的对齐方式。CENTER
表示图像的中心对齐于指定位置,BOTTOM
表示图片的底部与位置对齐。sizeInMeters
: 如果设置为true
,则宽度和高度被视为米,而不是像素。这意味着图片大小与地面上的实际物理尺寸有关,而不是屏幕像素。
- 图片旋转与缩放:
-
- 旋转:
rotation
属性可以控制图像的旋转角度,但在此示例中被注释掉。如果想要图像旋转,可以设置rotation: Cesium.Math.toRadians(90)
来将图像旋转 90 度。 - 缩放:如果你希望图像随着摄像机的远近缩放,可以使用
scaleByDistance
属性,配合Cesium.NearFarScalar
来实现根据距离变化的缩放效果。这里的代码被注释掉,但可以解开注释来使用该特性。
- 旋转:
Billboard
的重要配置项
1. 位置(Position)
Billboard
的位置是由 Cartesian3
坐标指定的。这意味着图像总是根据指定的经纬度坐标显示。你可以选择使用 Cesium.Cartesian3.fromDegrees
来直接从经纬度生成坐标,也可以使用其他方法,如 Cesium.Cartesian3.fromRadians
。
2. 图像大小(Size)
通过 width
和 height
设置图像的宽度和高度。如果你希望图像尺寸与地面真实尺寸一致,可以启用 sizeInMeters
,这时单位将从像素变成米。
3. 旋转(Rotation)
Billboard
图像默认始终朝向视角。如果你想让图像旋转或倾斜,可以设置 rotation
属性(以弧度为单位)。例如,如果你希望图像顺时针旋转 90 度,可以这样设置:
rotation: Cesium.Math.toRadians(90)
4. 图像透明度与缩放
你可以通过 translucencyByDistance
属性设置图像的透明度随着距离变化的效果,或者通过 scaleByDistance
来设置图像的大小随着视距变化。例如,接近摄像机时图像放大,远离时图像变小。
translucencyByDistance: new Cesium.NearFarScalar(
100, 1, 100000, 0
),
scaleByDistance: new Cesium.NearFarScalar(
100, 2, 100000, 0.1
)
5. 图像对齐(Origin)
horizontalOrigin
和 verticalOrigin
属性定义了图像在其位置坐标上的对齐方式。常见的取值有:
Cesium.HorizontalOrigin.CENTER
:水平居中对齐。Cesium.HorizontalOrigin.LEFT
:左对齐。Cesium.VerticalOrigin.BOTTOM
:底部对齐。Cesium.VerticalOrigin.TOP
:顶部对齐。
6. 图像的可见性
有时候,你希望基于某些条件(比如用户视角的远近)来控制 Billboard
的可见性。这可以通过 show
属性控制:
billboard.show = false; // 隐藏
billboard.show = true; // 显示
使用 Billboard
的技巧
1. 根据视距调整图像大小
scaleByDistance
可以控制图像随着视距的变化而自动缩放。这个特性对于广告牌或地图标记非常有用,尤其是当用户缩放地图时,图像会适应不同的视角。
2. 动态更新图片
你可以根据用户的交互或应用的变化,动态更新 Billboard
的图像。例如,当用户点击一个位置时,更新该位置的广告图片或标记图标。
3. 多样化图像效果
除了标准的图片外,Billboard
还可以与其他图形效果结合使用,如渐变色或透明度变化等,增强视觉效果。
总结
Billboard
是 Cesium 中一个非常强大的功能,尤其适用于在三维场景中展示图标、广告、信息和标记。通过灵活的配置选项,开发者可以自定义图像的显示方式、缩放、旋转等效果。它的常见应用场景包括地图标记、广告展示、数据可视化和地理信息显示等。
通过合理的配置和精确的控制,Billboard
可以极大丰富 Cesium 场景中的用户体验,让静态地图变得更加动态和互动。