Cesium创建geometry（一）

m0_52059072

已于 2024-09-20 10:27:17 修改

阅读量2.1k

点赞数 36

文章标签： javascript 开发语言 ecmascript

于 2024-09-20 10:25:53 首次发布

本文链接：https://blog.csdn.net/m0_52059072/article/details/142363398

版权

Cesium封装了PolygonGeometry、RectangleGeometry、EllipseGeometry等多种类型的geometry供用户使用。本文则根据官网已有案例进行整合，利用primitive展示各种geometry的具体使用方法

1.PolygonGeometry

1.1根据点坐标创建polygon

（1）Cesium.PolygonGeometry类型提供了polygonHierarchy属性，对应Cesium.PolygonHierarchy实例，

（2）Cesium.PolygonGeometry常用于构建复杂的多边形，例如带有内部孔洞或嵌套多边形的几何体

（3）创建Cesium.PolygonHierarchy实例需要传入一组坐标，多边行的外部轮廓坐标按照逆时针顺序，内部轮廓按照顺时针顺序

  let polygon = new Cesium.PolygonGeometry({
    polygonHierarchy : new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        //逆时针设置点
        -72.0, 40.0,
        -75.0, 30.0,
        -70.0, 30.0,
        -68.0, 40.0
      ])
    )
  });

创建一个 PolygonGeometry 实例，并将其作为几何实例（GeometryInstance）添加到 Cesium 场景（以下几何实例类似）

  const geometry = Cesium.PolygonGeometry.createGeometry(polygon);
  let geometryInstance = new Cesium.GeometryInstance({
      geometry:geometry,
      //modelMatrix:modelMatrix
  })

1.2创建带孔的嵌套多边形

创建带孔的嵌套多边形，与上述创建多边形区别是需要在Cesium.PolygonHierarchy中嵌套Cesium.PolygonHierarchy，外部轮廓按照逆时针，内部轮廓按照顺时针

  const polygonWithHole = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -109.0, 30.0,
        -95.0, 30.0,
        -95.0, 40.0,
        -109.0, 40.0
      ]),
      [new Cesium.PolygonHierarchy(
        Cesium.Cartesian3.fromDegreesArray([
          -107.0, 31.0,
          -107.0, 39.0,
          -97.0, 39.0,
          -97.0, 31.0
        ]),
        [new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray([
            -105.0, 33.0,
            -99.0, 33.0,
            -99.0, 37.0,
            -105.0, 37.0
          ]),
          [new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray([
              -103.0, 34.0,
              -101.0, 34.0,
              -101.0, 36.0,
              -103.0, 36.0
            ])
          )]
        )]
      )]
    )
  })

  const geometry2 = Cesium.PolygonGeometry.createGeometry(polygonWithHole);
  let geometryInstance2 = new Cesium.GeometryInstance({
      geometry:geometry2,
      //modelMatrix:modelMatrix
  })

1.3创建一个挤压高度的多边形

创建挤压高度的多边形需要额外添加extrudedHeight属性，用来设置多边行的高度

  const extrudedPolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -72.0, 40.0,
        -70.0, 35.0,
        -75.0, 30.0,
        -70.0, 30.0,
        -68.0, 40.0
      ])
    ),
    extrudedHeight: 300000,
  })

  let geometry3 = Cesium.PolygonGeometry.createGeometry(extrudedPolygon)
  let geometryInstance3 = new Cesium.GeometryInstance({
    geometry: geometry3
  })

将上述创建的所有多边形实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // polygon
    geometryInstances:[geometryInstance,geometryInstance2,geometryInstance3],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果:

2.RectangleGeometry

2.1创建矩形

矩形几何类型通过Cesium.RectangleGeometry创建实例。其中使用了ellipsoid、rectangle、height三个属性

（1）ellipsoid：指定矩形几何体所对应的椭球体模型，这里使用Cesium.Ellipsoid.default（即 WGS84 椭球）

（2）rectangle：定义矩形的经纬度范围，使用四个参数（两个对角的坐标点，即左下角和右上角）

（3）height：设置矩形的高度，即距离椭球体表面的高度（以米为单位）

  const rectangle = new Cesium.RectangleGeometry({
    ellipsoid: Cesium.Ellipsoid.default,
    rectangle: Cesium.Rectangle.fromDegrees(-88.0,39.0,-82.0,42.0),
    height: 10000.0
  })
  const geometryRec1 = Cesium.RectangleGeometry.createGeometry(rectangle)
  const geometryInstanceRec1 = new Cesium.GeometryInstance({
    geometry: geometryRec1
  })

2.2创建具有挤压高度的矩形

创建挤压高度的矩形与上述矩形的区别是额外添加了extrudedHeight属性，用来设置挤压高度

  const extrudedRectangle = new Cesium.RectangleGeometry({
    ellipsoid:Cesium.Ellipsoid.default,
    rectangle: Cesium.Rectangle.fromDegrees(-80.0,39.0,-74.0,42.0),
    height: 10000.0,
    extrudedHeight: 300000
  })
  const geometryRec2 = Cesium.RectangleGeometry.createGeometry(extrudedRectangle)
  const geometryInstanceRec2 = new Cesium.GeometryInstance({
    geometry:geometryRec2
  })

将上述创建的所有矩形实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // rectangle
    geometryInstances:[geometryInstanceRec1,geometryInstanceRec2],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果：

3.EllipseGeometry

椭圆几何类型通过Cesium.EllipseGeometry创建实例，主要包括center、semiMajorAxis、semiMinorAxis、rotation四个属性

（1）center：定义椭圆的中心位置

（2）semiMajorAxis：定义椭圆的长半轴

（3）semiMinorAxis：定义椭圆的短半轴

（4）rotation：定义椭圆的旋转角度

  const ellipse = new Cesium.EllipseGeometry({
    center: Cesium.Cartesian3.fromDegrees(-75.59,40.03),
    semiMajorAxis: 500000.0,
    semiMinorAxis: 300000.0,
    rotation: Cesium.Math.toRadians(60.0)
  })
  const geometry_ellipse = Cesium.EllipseGeometry.createGeometry(ellipse)
  const geometryInstance_ellipse = new Cesium.GeometryInstance({
    geometry:geometry_ellipse
  })

将上述创建的椭圆实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // ellipse
    geometryInstances:[geometryInstanceEllipse],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果：

4.CircleGeometry

圆形几何类型通过Cesium.CircleGeometry创建实例，主要包括center、radius两个属性

（1）center：设置圆形几何类型的中心点

（2）radius：设置半径长度

  const circle = new Cesium.CircleGeometry({
    center: Cesium.Cartesian3.fromDegrees(-75.59,40.03),
    radius: 100000.0
  })
  const geometryCircle = Cesium.CircleGeometry.createGeometry(circle)
  const geometryInstanceCircle = new Cesium.GeometryInstance({
    geometry:geometryCircle
  })

将上述创建的圆形实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // circle
    geometryInstances:[geometryInstanceCircle],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果：

5.WallGeometry

墙体几何类型通过Cesium.WallGeometry创建实例，该实例需要传入一个positions属性，该属性对应Cesium.Cartesian3.fromDegreesArrayHeights方法，需要传入墙体的坐标和高度

  const wall = new Cesium.WallGeometry({
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      19.0,47.0,10000.0,
      19.0,48.0,10000.0,
      20.0,48.0,10000.0,
      20.0,47.0,10000.0,
      19.0,47.0,10000.0,
    ])
  })
  const geometryWall = Cesium.WallGeometry.createGeometry(wall)
  const geometryInstanceWall = new Cesium.GeometryInstance({
    geometry:geometryWall
  })

将上述创建的圆形实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // wall
    geometryInstances:[geometryInstanceWall],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果：

6.SimplePolylineGeometry

简单线几何类型通过Cesium.SimplePolylineGeometry创建实例，该实例需要传入一个positions属性，该属性对应Cesium.Cartesian3.fromDegreesArray方法，需要传入线段的坐标

  const polyline = new Cesium.SimplePolylineGeometry({
    positions: Cesium.Cartesian3.fromDegreesArray([
      116.0,38.0,
      112.0,40.0,
      110.0,30.0
    ]),
  })
  const geometryPolyline = Cesium.SimplePolylineGeometry.createGeometry(polyline)
  const geometryInstancePolyline = new Cesium.GeometryInstance({
    geometry: geometryPolyline
  })

将上述创建的实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // simple polyline
    geometryInstances:[geometryInstancePolyline],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果：

7.BoxGeometry

立方体或正方体几何类型通过Cesium.BoxGeometry创建实例，该实例创建需要传入vertexFormat、maximum、minimum三个参数

（1）vertexFormat：指定顶点格式，Cesium.VertexFormat.POSITION_ONLY表示只使用顶点位置，不包含法线、纹理坐标、颜色等其他顶点属性

（2）maximum：定义了立方体的最大坐标，表示在三个轴（x, y, z）上的最大值

（3）minimum：定义了立方体的最小坐标，表示在三个轴（x, y, z）上的最小值

  const box = new Cesium.BoxGeometry({
    vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
    maximum: new Cesium.Cartesian3(250000.0,250000.0,250000.0),
    minimum: new Cesium.Cartesian3(-1000000.0,-1000000.0,-1000000.0)
  })

这里在创建Cesium.GeometryInstance实例过程中，需要设置modelMatrix属性，用来设置变换矩阵，将BoxGeometry放到指定经纬度位置，如果不设置会显示在地球内部。

  const geometryBox = Cesium.BoxGeometry.createGeometry(box)
  const geometryInstanceBox = new Cesium.GeometryInstance({
    geometry:geometryBox,
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(
      // 生成了一个以指定经纬度位置为中心的变换矩阵
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)),
        // 将物体从指定的经纬度点向上平移 250000 米
        new Cesium.Cartesian3(0.0, 0.0, 250000.0),
        // 存储组合后的结果
        new Cesium.Matrix4()
    )
  })

将上述创建的实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // box
    geometryInstances: [geometryInstanceBox],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果：

8.EllipsoidGeometry

椭圆体几何类型通过Cesium.BoxGeometry创建实例，该实例创建需要传入vertexFormat、radii两个参数。

vertexFormat和上述创建BoxGeometry属性类似，radii属性则是表示椭球体在 x、y、z 三个轴上的半径。

  const ellipsoid = new Cesium.EllipsoidGeometry({
    vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
    radii: new Cesium.Cartesian3(1000000.0,500000.0,500000.0),
  })

这里在创建Cesium.GeometryInstance实例过程中，同样需要设置modelMatrix属性，用来设置变换矩阵，将EllipsoidGeometry放到指定经纬度位置，如果不设置会显示在地球内部。

  const geometryEllipsoid = Cesium.EllipsoidGeometry.createGeometry(ellipsoid)
  const geometryInstanceEllipsoid = new Cesium.GeometryInstance({
    geometry:geometryEllipsoid,
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(
      // 生成了一个以指定经纬度位置为中心的变换矩阵
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)),
        // 将物体从指定的经纬度点向上平移 250000 米
        new Cesium.Cartesian3(0.0, 0.0, 250000.0),
        // 存储组合后的结果
        new Cesium.Matrix4()
    )
  })

将上述创建的实例，利用primitive添加到Cesium场景中

  let primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    // ellipsoid
    geometryInstances: [geometryInstanceEllipsoid],
    //外观
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED  // 设置颜色
      }),
      flat: true,  // 使外观平坦
      translucent: false //不设置透明度
    }),
    //同步加载，会立即创建并显示该几何体
    asynchronous: false
  }))

添加结果：