Cesium初探-实体

在 Cesium 中，"实体"（Entity）是一个核心概念，它代表了可以在场景中渲染的任何东西，从简单的点、线、多边形到复杂的模型和图像。实体可以用来表示地理空间数据，如地标、轨迹、卫星轨道等。

以下是一些关于 Cesium 实体的关键知识点：

定义:
- 实体是 Cesium 中用于描述地理空间对象的数据结构。
- 每个实体都有一组属性，这些属性定义了它的外观、位置和其他特性。
属性:
- 实体可以拥有多种属性，包括但不限于：
  - name: 实体的名称。
  - position: 实体的位置，通常使用 Cartesian3 对象表示。
  - orientation: 实体的方向，可以使用 Quaternion 或 EulerAngles 表示。
  - ellipsoid: 如果实体是一个椭球体，则可以定义其大小和形状。
  - polygon: 定义一个多边形。
  - polyline: 定义一条或多条折线。
  - point: 定义一个点。
  - label: 可以添加文本标签。
  - model: 加载并显示 3D 模型。
  - availability: 定义实体何时可见。
  - availabilityClock: 定义可用性的时钟范围。
  - interval: 实体的有效时间间隔。
  - description: 提供有关实体的详细信息，通常显示为弹出框的内容。
  - properties: 用户自定义的属性集合。
时间动态性:
- 实体可以随时间变化，例如，位置可以是时间的函数。
- 这种时间变化可以通过 SampledPositionProperty 或 SampledProperty 类来实现。
层次结构:
- 实体可以组织成树状结构，其中父实体可以包含子实体。
- 这样的层次结构有助于管理复杂场景和实现继承行为。
事件监听器:
- 可以为实体添加事件监听器来响应用户交互，例如点击或悬停。
样式和外观:
- 实体的各种视觉属性（颜色、透明度等）可以被设置。
- 样式也可以随时间变化。
与场景的交互:
- 实体可以与场景中的其他元素进行交互，比如与其他实体之间的碰撞检测。
性能优化:
- 大量实体可能会对性能造成影响，因此需要考虑使用批处理、LOD (Level of Detail) 等技术来提高效率。
API 和文档:
- Cesium 的官方文档提供了详细的 API 文档和教程，可以帮助开发者更好地理解和使用实体功能。

接下来看实例！

创建实体

点实体

javascript 复制代码

// 添加实体
  // 方法1
  const point1 = new Cesium.Entity({
    id: 'point1',
    position: new Cesium.Cartesian3.fromDegrees(117, 39),
    point: {
      color: Cesium.Color.RED,
      pixelSize: 20
    }
  })
  viewer.entities.add(point1)
  // 推荐写法
  const point2 = viewer.entities.add({
    id: 'point2',
    position: Cesium.Cartesian3.fromDegrees(117, 40, 50),
    point: {
      color: Cesium.Color.RED,
      pixelSize: 20
    }
  })
  // 选择合适视角聚焦实体
  viewer.zoomTo(point2)

线实体

javascript 复制代码

// 添加线段
  const line1 = viewer.entities.add({
    id: 'line1',
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([117,40,117,41]),
      width: 2,
      material: Cesium.Color.BEIGE
    }
  })

标签实体

javascript 复制代码

// 添加label
  const label1 = viewer.entities.add({
    id: 'label1',
    position: Cesium.Cartesian3.fromDegrees(117, 40),
    label: {
      text: '我的股票',
      fillColor: Cesium.Color.GOLD,
      showBackground: true,
      backgroundColor: new Cesium.Color([254, 25, 36]),
      scale: 1,
      // 相对于position的偏移：前者控制左右，正为右移；后者控制上下，正为下移
      pixelOffset: new Cesium.Cartesian2(0, -70)
    }
  })
  viewer.zoomTo(label1)

面实体（平面 or 有厚度滴）

javascript 复制代码

// 添加面(体)
  const ploygon1 = viewer.entities.add({
    id: 'polygon1',
    polygon: {
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([117,40,117,41,118,40.5])
      }, 
      material: Cesium.Color.BEIGE,
      height: 20,
      extrudedHeight: 10,
      outline: true,
      outlineColor: Cesium.Color.BLUE
    }
  })

立方体（以给定点为中心，设置长宽高）

javascript 复制代码

// 添加立方体，以点为中心，设置长宽高
  const box1 = viewer.entities.add({
    id: 'box1',
    position: Cesium.Cartesian3.fromDegrees(117, 40),
    box: {
      dimensions: new Cesium.Cartesian3(20,10,50),
      material: Cesium.Color.ALICEBLUE
    }
  })

椭球体（以给定点为球心，设置长短半轴及厚度）

javascript 复制代码

// 添加椭圆
  const ellipse1 = viewer.entities.add({
    id: 'ellipse1',
    position: Cesium.Cartesian3.fromDegrees(117, 40),
    ellipse: {
      semiMajorAxis: 50,
      semiMinorAxis: 30,
      material: Cesium.Color.BISQUE,
      extrudedHeight: 50,
      rotation: Math.PI / 2
    }
  })
  viewer.zoomTo(ellipse1)

删除实体

如果你想从场景中移除实体，可以使用 remove 方法，亦可以使用removeAll方法全部移除。

javascript 复制代码

// 删除实体
const del = ()=>{
  viewer.entities.remove(label1)
}
const delAll = ()=>{
  viewer.entities.removeAll()
}