通过Primitive创建图像物体，Primitive自定义程度更高，我们实现一些我们想要的效果，不过相对的层级也会增加。

创建几何体

// 创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
        // 西边经度
        90,
        // 南边纬度
        20,
        // 东边经度
        110,
        // 北边纬度
        30),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  })

创建几何体实例

  let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.RED.withAlpha(0.5)
      )
    }
  })

创建图元

  let primitive = new Cesium.Primitive({
    geometryInstances: instance,
    // 材质 设置外观
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true
    })
  })

添加

viewer.scene.primitives.add(primitive)

Cesium.RectangleGeometry方法介绍

Cesium.RectangleGeometry 是 Cesium 库中用于创建矩形几何形状的方法，通常用于在地球表面上呈现一个矩形区域。RectangleGeometry 通常与其他 Cesium 组件一起使用，如 GeometryInstance 和 Primitive，以在地球表面上可视化它。

以下是 Cesium.RectangleGeometry 的参数介绍：

1. rectangle (必需)：

   • 类型：Rectangle
   • 描述：描述矩形在地球表面上的位置的矩形。

2. rotation：

   • 类型：Number
   • 描述：矩形的旋转量，以弧度为单位。

3. ellipsoid：

   • 类型：Ellipsoid
   • 默认值：Ellipsoid.WGS84
   • 描述：矩形所在的椭球体。

4. granularity：

   • 类型：Number
   • 默认值：Math.RADIANS_PER_DEGREE
   • 描述：指定每个纬度和经度的点之间的最大距离。

5. height：

   • 类型：Number
   • 默认值：0.0
   • 描述：矩形在椭球体上的高度。

6. extrudedHeight：

   • 类型：Number
   • 默认值：undefined
   • 描述：矩形拉伸到的高度。

7. vertexFormat：

   • 类型：VertexFormat
   • 默认值：VertexFormat.DEFAULT
   • 描述：描述了几何体的属性，这决定了几何体的外观和功能。

8. stRotation：

   • 类型：Number
   • 默认值：0.0
   • 描述：纹理坐标旋转量，以弧度为单位。

Cesium.RectangleGeometry方法介绍

Cesium.GeometryInstance 在 Cesium 中表示几何形状的实例，用于定义几何的外观以及与其关联的数据。当你想在场景中渲染一个几何形状时，例如一个矩形、圆或多边形，你首先创建一个相应的几何对象，然后使用 GeometryInstance 对象来实例化它。

以下是 Cesium.GeometryInstance 的构造函数的参数介绍：

1. geometry (必需)：

   • 类型：Geometry
   • 描述：要创建实例的几何形状。

2. modelMatrix：

   • 类型：Matrix4
   • 默认值：Matrix4.IDENTITY
   • 描述：一个 4x4 矩阵，用于变换几何形状。这是一个可选参数，如果不提供，将使用默认的单位矩阵，这意味着几何体不会被变换。

3. id：

   • 类型：Object
   • 描述：与几何实例关联的可选用户定义对象，它可以在运行时用于存储或检索与实例关联的自定义数据。

4. attributes：

   • 类型：Object
   • 描述：该对象定义了几何实例的外观，如颜色、显示和非显示状态等。例如，你可以使用这个参数为几何实例设置一个特定的颜色。

5. show：

   • 类型：Boolean
   • 默认值：true
   • 描述：指定几何实例是否应该在场景中可见。

例子：

const instance = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
        rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0)
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
    }
});

在上面的例子中，我们创建了一个 RectangleGeometry 的实例，然后使用 GeometryInstance 实例化它，并设置其颜色为红色。

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-Primitive创建图像物体-实践的学习笔记

笔记汇总

Cesium学习笔记汇总