Cesium2: Entity创建实体

Cesium版本：1.115.0 - 2024-03-01

Entity

Entity类可以实现多种实体的绘制，例如：点、线、面、广告牌等，用户可以手动创建实体展示，也可以通过数据源的方式进行添加，如CzmlDataSource、GeoJsonDataSource。

示例

官方示例：

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

const wyoming = viewer.entities.add({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596,
      -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429,
      -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429,
      -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073,
    ]),
    height: 0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

viewer.zoomTo(wyoming);

示例可见，Cesium的实体呈现并不需要Entity类实例化，所以看不到new Entity({})的代码，但是通过实例化代码也可以实现，只不过是相对上面这种方式略显复杂，例如：

  const entityPoint = new Entity({
    id: 'point',
    name: '点实体',
    show: true,
    position: Cartesian3.fromDegrees(117.024,36.675143),
    point: {
      color: Cesium.Color.RED,
      pixelSize: 50,
    }
  })
  viewer.entities.add(entityPoint)

实体类型

点实体

  const entityPoint = new Entity({
    id: 'point',
    name: '点实体',
    show: true,
    position: Cartesian3.fromDegrees(117.024,36.675143),
    point: {
      color: Cesium.Color.RED,
      pixelSize: 50,
    }
  })
  viewer.entities.add(entityPoint)

线实体

  const entityPolyline = viewer.entities.add({
    id: 'polyline',
    name: '线实体',
    show: true,
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([117.0241,36.6751, 117.0242,36.6754, 117.0243,36.6752]),
      width: 10,
      material: Cesium.Color.BLUE,
    }
  })
  viewer.zoomTo(entityPolyline)

面实体

  const entityPolygon = viewer.entities.add({
    id: 'polygon',
    name: '面实体',
    show: true,
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([117.0231, 36.6751, 117.0236, 36.6751, 117.0236, 36.6756, 117.0231, 36.6756 ]),
      material: Cesium.Color.RED.withAlpha(0.4),
    }
  })
  viewer.zoomTo(entityPolygon)

矩形实体

  const entityRectangle = viewer.entities.add({
    id: 'rectangle',
    name: '矩形',
    show: true,
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(117.0231, 36.6759, 117.0238, 36.6765),
      material: Cesium.Color.GREEN.withAlpha(0.6),
    }
  })
  viewer.zoomTo(entityRectangle)

椭圆实体

  const entityEllipse = viewer.entities.add({
    id: 'ellipse',
    name: '椭圆实体',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(117.022, 36.6759),
    ellipse: {
      semiMinorAxis: 25,  // 短半轴长度
      semiMajorAxis: 40,  // 长半轴长度
      material: Cesium.Color.BLUEVIOLET.withAlpha(0.8),
    }
  })
  viewer.zoomTo(entityEllipse)

圆柱体实体

  const entityCylinder = viewer.entities.add({
    id: 'cylinder',
    name: '圆柱体实体',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(117.023501,36.672143),
    cylinder: {
      length: 400,
      topRadius: 100,
      bottomRadius: 200,
      material: Cesium.Color.GREEN.withAlpha(0.8),
      outline: true,
      outlineColor: Cesium.Color.DARKGREEN,
    }
  })
  viewer.zoomTo(entityCylinder)

走廊实体

  const entityCorridor = viewer.entities.add({
    id: 'corridor',
    name: '走廊实体',
    show: true,
    corridor: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        117.024,36.675143,
        117.023502,36.672145,
        117.021,36.676
      ]),
      width: 20,
      material: Cesium.Color.YELLOW.withAlpha(0.5),
    }
  })
  viewer.zoomTo(entityCorridor)

墙实体

const entityWall = viewer.entities.add({
    id: 'wall',
    name: '墙实体',
    show: true,
    wall: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        117.01188,36.67698, 100,
        117.00990,36.67432, 100,
        117.01083,36.66381, 100,
        117.01201,36.66148, 200,
        117.02847,36.66223, 100,
        117.02851,36.66579, 100,
        117.03033,36.66761, 100,
        117.03088,36.67366, 100,
        117.02868,36.67787, 100,
        117.01188,36.67698, 100
      ]),
      material: Cesium.Color.GREEN,
    }
  })
  viewer.zoomTo(entityWall)

方盒实体

  const entityBox = viewer.entities.add({
    id: 'box',
    name: '方盒实体',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(117.028438, 36.671083, 500),
    box: {
      dimensions: new Cesium.Cartesian3(400, 300, 800),  // 长,宽,高
      material: Cesium.Color.BLUE,
    }
  })
  viewer.zoomTo(entityBox)

椭球体实体

  const entityEllipsoid = viewer.entities.add({
    id: 'ellipsoid',
    name: '椭球体实体',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(117.014318, 36.6731802, 500),
    ellipsoid: {
      radii: new Cesium.Cartesian3(200, 200, 700),  // X轴、Y轴、Z轴半径
      material: Cesium.Color.BLUE.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
    }
  })
  viewer.zoomTo(entityEllipsoid)

模型实体

  const degree = 60  // 度数
  const heading = Cesium.Math.toRadians(degree)  // 模型航向（围绕负Z轴）
  const pitch = 0  // 俯仰角（围绕负Y轴）
  const roll = 0  // 翻滚角（围绕正X轴）
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
  const entityModel = viewer.entities.add({
    id: 'model',
    name: '模型实体',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(117.023501, 36.675143, 200),
    orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.
      Cartesian3.fromDegrees(117.023501, 36.675143, 200), hpr),
    model: {
      uri: '/model/CesiumPlane.glb',  // 此处是uri，不是url
      minimumPixelSize: 1,
      maximumScale: 500,
      scale: 5,
    }
  })
  viewer.zoomTo(entityModel)

广告牌实体

  const entityBillboard = viewer.entities.add({
    position: Cartesian3.fromDegrees(117.023501, 36.675143),
    billboard: {
      image: imageShop,
      scale: 3,
      horizontalOrigin: HorizontalOrigin.CENTER,
      verticalOrigin: VerticalOrigin.BOTTOM,
    }
  })
  viewer.zoomTo(entityBillboard)