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

2025020616435221ab89545fd1a748958e8dcb5efa27d1715Cesium 是一个强大的 3D 地球可视化平台,它可以帮助开发者创建逼真的虚拟地球应用。通过 Cesium,开发者可以渲染各种类型的地理空间对象,比如点、线、面等,其中多边形(Polygon)是其中最常见的几何体之一。在 Cesium 中,设置多边形不仅可以定义其形状、位置,还能对其外观、材质、轮廓等属性进行细致的调整。

本文将详细讲解如何在 Cesium 中创建和设置多边形,包括多边形的基本属性、如何处理具有洞的多边形、如何设置挤出高度、轮廓颜色等。

1. 创建基本的多边形

在 Cesium 中,创建一个多边形主要通过 viewer.entities.add 方法进行。entities 是一个用于管理所有地球对象的集合,add 方法将新对象添加到场景中。下面是一个创建简单多边形的代码示例:


let polygon = viewer.entities.add({
  // 设置多边形的位置(经纬度)
  position: Cesium.Cartesian3.fromDegrees(
    120.0, // 经度
    30.0,  // 纬度
    0      // 高度
  ),
  // 设置多边形的形状
  polygon: {
    // 顶点坐标(使用 Cesium.Cartesian3.fromDegreesArray 方法)
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      120.0, 30.0,
      130.0, 30.0,
      130.0, 40.0,
      120.0, 40.0,
      115.0, 35.0
    ]),
    // 设置多边形的材质
    material: Cesium.Color.RED.withAlpha(0.5),
    // 设置轮廓
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    // 设置挤出高度
    extrudedHeight: 1000000,
  }
});

代码解析:

  • 位置:通过 Cesium.Cartesian3.fromDegrees 方法将经纬度转换为笛卡尔坐标系中的位置。这里定义了多边形的地理中心位置(120°E, 30°N)。
  • 多边形形状:使用 Cesium.Cartesian3.fromDegreesArray 方法定义多边形的顶点。每两个数字分别表示一个顶点的经度和纬度。
  • 材质:通过 material 属性设置多边形的填充颜色。这里使用的是红色,并设置了透明度 0.5,即半透明效果。
  • 轮廓outline 设置为 true,表示多边形有轮廓,轮廓颜色设置为黑色。
  • 挤出高度extrudedHeight 定义了多边形的高度,单位是米。这里设置为 1000000 米,意味着多边形将从地面延伸至 1000 公里的高度。

2. 创建带洞的多边形

在某些情况下,多边形内部可能有洞(即孔)。例如,一个多边形区域被另一个小区域“挖空”。Cesium 支持带有洞的多边形。下面的代码展示了如何设置带洞的多边形:


let polygon1 = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(120.0, 30.0, 0),
  polygon: {
    // 顶点坐标
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        80.0, 30.0,
        90.0, 30.0,
        90.0, 40.0,
        80.0, 40.0,
        70.0, 35.0
      ]),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArray([
            82.0, 32.0,
            85.0, 32.0,
            85.0, 34.0,
            82.0, 34.0
          ])
        }
      ]
    },
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    extrudedHeight: 1000000,
    closeTop: false,
    closeBottom: false
  }
});

代码解析:

  • 带洞的多边形:在 hierarchy 属性中,除了定义外部多边形的顶点坐标外,还通过 holes 属性指定了一个孔。holes 是一个数组,每个元素都是一个包含多个顶点的多边形,用于定义“挖空”区域。这里的洞是一个矩形区域。
  • 关闭顶部和底部:通过 closeTop closeBottom 设置为 false,表示不需要在顶部和底部闭合多边形。如果为 true,多边形的顶底面将被封闭。

3. 挤出多边形

在 Cesium 中,多边形不仅可以有一个二维的平面形状,还可以进行挤出,形成三维效果。挤出的高度可以通过 extrudedHeight 属性来控制。上面的代码中已经使用了这个属性。

4. 配置其他多边形属性

在设置多边形时,除了形状、材质和挤出高度,您还可以设置其他属性来进一步优化多边形的显示效果:

  • material:设置多边形的填充材质,可以使用 Cesium 提供的颜色、图像纹理,甚至是渐变效果。例如,可以设置为 Cesium.Color.YELLOW.withAlpha(0.7) 来创建半透明的黄色多边形,或使用纹理贴图来填充。
  • outline outlineColor:这两个属性可以控制多边形的边框是否可见,以及边框的颜色。outline: true 会显示边框,outlineColor: Cesium.Color.BLACK 设置边框颜色为黑色。
  • extrudedHeight:定义多边形的挤出高度,通常用于创建立体效果。可以根据需求设置为不同的值。
  • closeTop closeBottom:这两个属性决定了多边形是否在顶部和底部闭合。如果设置为 false,顶部和底部将开放,适合用来表示建筑的框架等。

5. 总结

通过 Cesium 提供的 API,创建和设置多边形非常灵活。我们不仅可以通过坐标定义多边形的形状,还可以添加洞、设置挤出效果、调整材质和轮廓颜色等。了解这些基础设置后,您可以将其应用到更复杂的场景中,创建出适合您需求的多边形对象。

希望这篇文章能帮助您理解如何在 Cesium 中操作多边形。如果您有更多问题或需要进一步的帮助,欢迎继续提问!

发表回复

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