Visualizer

Visualizer 是 CesiumJS 中的一个可视化工具，能够将数据转换为可视化效果，以提供更具交互性的场景展示。

基础概念

要使用 Visualizer，您需要学习以下概念：

• Data: 数据对象，包含实际存储的数据项。
• Entity: 实现 Data 接口的对象，这个对象可随着时间的流逝，一直改变位置，方向以及其他属性。
• Entity Collection: 由 Entity 组成的集合，常用于管理一组相关对象。
• Visualizer: 将 Entity Collection 中的 Entity 转换为可视化效果的对象。
• Visualizer Collection: 由 Visualizer 组成的集合，常用于管理一组相关可视化效果。

使用步骤

1. 创建 Entity Collection

   const entityCollection = new Cesium.EntityCollection();
   

2. 向 Entity Collection 中添加 Entity 实例

   const entity = entityCollection.add({
     position: Cesium.Cartesian3.fromDegrees(-122.1975, 46.2325),
     ellipse: {
       semiMinorAxis: 8000.0,
       semiMajorAxis: 16000.0,
       material: Cesium.Color.RED.withAlpha(0.5),
     },
   });
   

3. 创建 Visualizer

   const visualizer = new Cesium.EllipseVisualizer(viewer.scene, entityCollection);
   

4. 添加 Visualizer 到 Visualizer Collection

   viewer.scene.primitives.add(visualizer);
   

5. 渲染 Visualizer

   viewer.render();
   

可视化效果

CesiumJS 提供的 Visualizer 有很多种，每一种和每一种的属性都不同，以下是一些常见的 Visualizer。

PointVisualizer

将 Entity 显示为点，可自定义颜色、大小等属性。

const visualizer = new Cesium.PointVisualizer(viewer.scene, entityCollection, {
  color: Cesium.Color.YELLOW,
  outlineColor: Cesium.Color.BLACK,
  outlineWidth: 2,
  sizeInMeters: true,
});

LabelVisualizer

将 Entity 显示为标签，可自定义颜色、字体、背景等属性。

const visualizer = new Cesium.LabelVisualizer(viewer.scene, entityCollection, {
  font: "24px sans-serif",
  style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  fillColor: Cesium.Color.YELLOW,
  outlineColor: Cesium.Color.BLACK,
  outlineWidth: 2,
  showBackground: true,
  backgroundColor: Cesium.Color.BLACK.withAlpha(0.5),
});

PolylineVisualizer

将 Entity 显示为折线，可自定义颜色、宽度等属性。

const visualizer = new Cesium.PolylineVisualizer(viewer.scene, entityCollection, {
  material: Cesium.Color.BLACK.withAlpha(0.5),
  width: 5,
});

总结

Visualizer 是 CesiumJS 中的一个可视化工具，用于将 Entity 转换为可视化效果。您可以根据自己的数据类型和可视化需求选择不同 Visualizer，并设置不同的属性以达到最佳效果。