Cesium中Wall的使用详解

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

Cesium 是一个强大的 3D 地理信息可视化工具，广泛用于构建地球上的动态可视化场景。在 Cesium 中，wall（墙体）是一种特殊的几何体，通常用于创建从地面或指定高度延伸到另一个高度的垂直面。本文将通过示例代码，详细讲解 wall 的使用方法和参数设置。

一、Cesium中的Wall概述

wall 是 Cesium 中 Entity 的一种几何图形。它可以通过一系列坐标点以及对应的高度数据来创建垂直的墙体。墙体可以用来表示物体边界、地理隔离带、高度变化的视觉效果等。

wall 的主要特征包括：

1. 通过指定坐标点构建墙体。
2. 支持最大和最小高度的自定义。
3. 可以为墙体设置颜色、透明度和轮廓。

二、示例代码分析

以下代码展示了三种不同类型的墙体：红色墙体、绿色墙体和带有锯齿高度的蓝色墙体。

javascript
const viewer = new Cesium.Viewer("cesiumContainer");

// 添加第一个红色墙体
const redWall = viewer.entities.add({
  name: "Red wall at height",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -115.0, 44.0, 200000.0, -90.0, 44.0, 200000.0,
    ]),
    minimumHeights: [100000.0, 100000.0],
    material: Cesium.Color.RED,
  },
});

// 添加第二个绿色墙体，带轮廓
const greenWall = viewer.entities.add({
  name: "Green wall from surface with outline",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -107.0, 43.0, 100000.0, -97.0, 43.0, 100000.0, -97.0, 40.0, 100000.0,
      -107.0, 40.0, 100000.0, -107.0, 43.0, 100000.0,
    ]),
    material: Cesium.Color.GREEN,
    outline: true,
  },
});

// 添加第三个蓝色墙体，带锯齿高度和轮廓
const blueWall = viewer.entities.add({
  name: "Blue wall with sawtooth heights and outline",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -115.0, 50.0, -112.5, 50.0, -110.0, 50.0, -107.5, 50.0, -105.0, 50.0,
      -102.5, 50.0, -100.0, 50.0, -97.5, 50.0, -95.0, 50.0, -92.5, 50.0, -90.0,
      50.0,
    ]),
    maximumHeights: [
      100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000, 100000,
      200000, 100000,
    ],
    minimumHeights: [0, 100000, 0, 100000, 0, 100000, 0, 100000, 0, 100000, 0],
    material: Cesium.Color.BLUE.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

// 聚焦到所有实体
viewer.zoomTo(viewer.entities);

三、逐个解析示例代码

1. 创建 Cesium 视图

javascript
const viewer = new Cesium.Viewer("cesiumContainer");

Cesium.Viewer 是创建地球场景的核心组件，cesiumContainer 是绑定的 HTML 容器。

2. 添加红色墙体

javascript
const redWall = viewer.entities.add({
  name: "Red wall at height",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -115.0, 44.0, 200000.0, -90.0, 44.0, 200000.0,
    ]),
    minimumHeights: [100000.0, 100000.0],
    material: Cesium.Color.RED,
  },
});

javascript

要点解析：

• positions：通过 Cesium.Cartesian3.fromDegreesArrayHeights 指定墙体的经纬度和高度。

• • 例如 [-115.0, 44.0, 200000.0] 表示经度 -115.0，纬度 44.0，海拔 200,000 米。

• minimumHeights：设置墙体的最低高度（100,000 米）。
• material：设置墙体的颜色为红色。

效果：这个墙体从 100,000 米的高度开始，延伸到 200,000 米的高度，形成一个垂直平面。

3. 添加绿色墙体（带轮廓）

javascript
const greenWall = viewer.entities.add({
  name: "Green wall from surface with outline",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -107.0, 43.0, 100000.0, -97.0, 43.0, 100000.0, -97.0, 40.0, 100000.0,
      -107.0, 40.0, 100000.0, -107.0, 43.0, 100000.0,
    ]),
    material: Cesium.Color.GREEN,
    outline: true,
  },
});

javascript

要点解析：

• positions：指定一系列坐标点，形成墙体的路径。
• outline：设置为 true，表示墙体外轮廓可见。
• material：墙体的颜色为绿色。

效果：绿色墙体从地表高度（100,000 米）延伸，并显示外轮廓。

4. 添加蓝色墙体（带锯齿高度和透明度）

const blueWall = viewer.entities.add({
  name: "Blue wall with sawtooth heights and outline",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -115.0, 50.0, -112.5, 50.0, -110.0, 50.0, -107.5, 50.0, -105.0, 50.0,
      -102.5, 50.0, -100.0, 50.0, -97.5, 50.0, -95.0, 50.0, -92.5, 50.0, -90.0,
      50.0,
    ]),
    maximumHeights: [
      100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000, 100000,
      200000, 100000,
    ],
    minimumHeights: [0, 100000, 0, 100000, 0, 100000, 0, 100000, 0, 100000, 0],
    material: Cesium.Color.BLUE.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

javascript

要点解析：

• maximumHeights 和 minimumHeights：设置墙体的最大高度和最小高度，形成锯齿状效果。
• material：墙体颜色为半透明蓝色，使用 .withAlpha(0.5) 控制透明度。
• outline 和 outlineColor：添加黑色外轮廓。

效果：蓝色墙体具有锯齿状高度变化，并带有黑色轮廓和半透明效果。

5. 聚焦到所有墙体

javascript
viewer.zoomTo(viewer.entities);

viewer.zoomTo 方法让摄像头自动聚焦到所有添加的实体。

四、常用属性总结

• positions：墙体的路径点，可以通过高度构建。
• maximumHeights：墙体的最大高度。
• minimumHeights：墙体的最小高度。
• material：墙体的材质，可以是颜色、图像等。
• outline：是否显示墙体轮廓。
• outlineColor：轮廓的颜色。

五、实际应用场景

• 高度可视化：通过墙体展示地形高度或建筑物高度。
• 边界分隔：创建区域边界的可视化分隔。
• 地理分析：展示墙体在不同高度的分布和变化。

六、总结

通过以上代码和解析，我们学习了如何使用 Cesium 中的 wall 创建不同风格的墙体。wall 支持高度自定义、颜色透明度调整，以及轮廓的显示，灵活性非常高。在实际应用中，可以根据需求构建丰富的 3D 可视化效果。