cesium之primitive

m__yue

已于 2024-02-23 17:44:52 修改

阅读量1.1k

点赞数 15

分类专栏： cesium 文章标签： javascript 前端信息可视化

于 2024-02-23 17:15:27 首次发布

本文链接：https://blog.csdn.net/m__yue/article/details/135518065

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Cesium.js库在场景中添加矩形、椭球体、盒子等基本几何体实例，并详细说明了GeometryInstance、ModelMatrix、MaterialAppearance和PerInstanceColorAppearance等关键概念的应用，以及如何为实例设置颜色、位置和属性。

摘要由CSDN通过智能技术生成

新建基础矩形

  viewer.scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
          geometry: new Cesium.RectangleGeometry({
            rectangle: Cesium.Rectangle.fromDegrees(1, 20, 30, 40),
            ellipsoid: Cesium.Ellipsoid.WGS84,
            height: 10000,
          }),
          modelMatrix: modelMatrix,
          id: 'bottom'
        }),
        appearance: new Cesium.MaterialAppearance({
          material:Cesium.Material.fromType('Color', {
            color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)})
        }),
        show: true,
      })
  )

其中，geometryInstances定义了要渲染的几何实例。其中，geometry定义实例的形状，cesium提供了多种基本形状，如box、ellipsoid、circle、cylinder等，可以在官网API中查看；

appearance用来定义primitive的样式，其中，有material、closed、translucent等。

一次添加多个实例

 let instance1 = new Cesium.GeometryInstance({
    geometry: new Cesium.EllipsoidGeometry({
      vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
      radii: new Cesium.Cartesian3(1000000.0, 500000.0, 500000.0)
    }),
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
            Cesium.Cartesian3.fromDegrees(-25.59777, 30.03883)),
        new Cesium.Cartesian3(0.0, 0.0, 100000.0), new Cesium.Matrix4()),
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BISQUE)
    },
    id: '1'
  });

  let instance2 = new Cesium.GeometryInstance({
    geometry: Cesium.BoxGeometry.fromDimensions({
      vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
      dimensions: new Cesium.Cartesian3(1000000.0, 1000000.0, 500000.0)
    }),
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
            Cesium.Cartesian3.fromDegrees(-5.59777, 30.03883)),
        new Cesium.Cartesian3(0.0, 0.0, 100000.0), new Cesium.Matrix4()),
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
    },
    id: '2'
  });


  viewer.scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: [instance1, instance2],
        appearance: new Cesium.PerInstanceColorAppearance(),
        show: true,
      })
  )

效果如下：

instance1和instance2是两个不同的几何实例，当添加的每个实例都有不同的属性时，可以写在attributes中，modelMatrix用来确定几何实例的位置，同时vertexFormat的选择也要配套才不会报错。

attributes用来确定几何实例的属性，具体见https://cesium.com/learn/cesiumjs/ref-doc/GeometryAttributes.html，要起作用还需要将appearance设置成PerInstanceColorAppearance。

appearace有以下可选项（摘自Cesium开发高级篇 | 01空间数据可视化之Primitive - 知乎）：

添加点集

  let points = viewer.scene.primitives.add(
      new Cesium.PointPrimitiveCollection({
        modelMatrix: Cesium.Matrix4.IDENTITY,
        debugShowBoundingVolume: false,
        blendOption: Cesium.BlendOption.OPAQUE_AND_TRANSLUCENT,
      })
  );
  // 添加点
  points.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.53883, 1000.0),
    color: Cesium.Color.YELLOW,
    pixelSize : 100.0,
    outlineColor : Cesium.Color.BLACK,
    outlineWidth : 20.0,
    id : undefined
  });
  points.add({
    position: Cesium.Cartesian3.fromDegrees(-75.29777, 40.53883, 1000.0),
    color: Cesium.Color.CYAN,
  });

效果：