点击查看:最新Cesium可视化系统实战视频课程

202502061634000153b31261dfaa7ccee5a927da7b53ae837Cesium 中,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,
  }
});

代码分析

  1. 位置设置(position)
javascript
position: Cesium.Cartesian3.fromDegrees(114.07, 22.54, 100)

position 定义了 Billboard 在地球上的位置。这里使用了 Cesium.Cartesian3.fromDegrees 方法,将经度、纬度和高度转换为笛卡尔坐标系中的 Cartesian3 对象。

    • 114.07 22.54 分别表示经度和纬度。
    • 100 表示高度,单位是米。这个高度值决定了图片距离地球表面的高度。
  1. 图片内容(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,则宽度和高度被视为米,而不是像素。这意味着图片大小与地面上的实际物理尺寸有关,而不是屏幕像素。
  1. 图片旋转与缩放
    • 旋转:rotation 属性可以控制图像的旋转角度,但在此示例中被注释掉。如果想要图像旋转,可以设置 rotation: Cesium.Math.toRadians(90) 来将图像旋转 90 度。
    • 缩放:如果你希望图像随着摄像机的远近缩放,可以使用 scaleByDistance 属性,配合 Cesium.NearFarScalar 来实现根据距离变化的缩放效果。这里的代码被注释掉,但可以解开注释来使用该特性。

Billboard 的重要配置项

1. 位置(Position)

Billboard 的位置是由 Cartesian3 坐标指定的。这意味着图像总是根据指定的经纬度坐标显示。你可以选择使用 Cesium.Cartesian3.fromDegrees 来直接从经纬度生成坐标,也可以使用其他方法,如 Cesium.Cartesian3.fromRadians

2. 图像大小(Size)

通过 widthheight 设置图像的宽度和高度。如果你希望图像尺寸与地面真实尺寸一致,可以启用 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)

horizontalOriginverticalOrigin 属性定义了图像在其位置坐标上的对齐方式。常见的取值有:

  • 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 场景中的用户体验,让静态地图变得更加动态和互动。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注