Cesium开发基础篇 | 04空间数据可视化之Entity

前面介绍了Cesium如何加载影像数据、地形数据、以及矢量数据，但是作为一个完整的三维系统，仅仅包括这些数据还是远远不够的。当然，还需要一些其他数据，比如空间可视化数据、三维数据数据等，今天我们先从空间数据的可视化说起，后面会有专门的章节介绍三维数据方面的加载。

Cesium在空间数据可视化方面提供了两种类型的API，一种是面向图形开发人员的低级（原始）API，通过Primitive类实现，对于那些对计算机图形学知识很了解的同学可以采用Primitive API，后面章节会有详细介绍；另一种是用于数据驱动的高级（实体）API，通过Entity类实现，相对于Primitive API，Entity API实现起来更简单一些，特别建议初学者使用。Entity API 实际上是对Primitive API的二次封装，底层调用的仍然是Primitive API，目的就是为我们提供灵活的、易学、易用的高性能可视化界面。本章节内容主要介绍后者Entity API，Primitive API放在后面的高级篇里讲解。

Entity支持的图形类型

通过在Cesium API文档中查看Entity类的构造函数，我们发现Entity支持的图形类型都是以Graphics结尾的，一共有17种类型。如下图所示，列出了Entity支持的图形类型以及对应的js类。

下面，简单介绍一下每一种类型的Graphic添加方式。
1）billboard 广告牌

 var entity = viewer.entities.add({
      name: "billboard",
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
      billboard: {
        show: true, 
        image: "./images/Cesium_Logo_overlay.png", 
        scale: 2.0, 
        pixelOffset: new Cesium.Cartesian2(0, -50),
        eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, 
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        color: Cesium.Color.LIME,
        rotation: Cesium.Math.PI_OVER_FOUR, 
        alignedAxis: Cesium.Cartesian3.ZERO,
        width: 100, 
        height: 25, 

        
        scaleByDistance: new Cesium.NearFarScalar(1.0e3, 2.0, 2.0e3, 1.0),
        
        translucencyByDistance: new Cesium.NearFarScalar(
          1.0e3,
          1.0,
          1.5e6,
          0.5
        ),
        
        pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
          1.0e3,
          1.0,
          1.5e6,
          0.0
        ),
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    });

2）box 盒子

    var entity = viewer.entities.add({
      name: "box",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
      box: {
        show: true,
        dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), 
        heightReference: Cesium.HeightReference.NONE,
        fill: true,
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 1.0,
        shadows: Cesium.ShadowMode.DISABLED,
      },
    });

3）corridor 走廊

    var entity = viewer.entities.add({
      name: "corridor",
      corridor: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          -80.0,
          40.0,
          -85.0,
          40.0,
          -85.0,
          35.0,
        ]),
        width: 200000.0,
        height: 200000.0,
        heightReference: Cesium.HeightReference.NONE,
        extrudedHeight: 100000.0,
        extrudedHeightReference: Cesium.HeightReference.NONE,
        cornerType: Cesium.CornerType.ROUNDED,
        granularity: Cesium.Math.RADIANS_PER_DEGREE, 
        fill: true,
        material: Cesium.Color.BLUE.withAlpha(0.5),
        outline: true, 
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 1.0,
        shadows: Cesium.ShadowMode.DISABLED, 
        classificationType: Cesium.ClassificationType.BOTH,
      },
    });

4）cylinder 圆柱、圆锥

    var entity = viewer.entities.add({
      name: "cylinder",
      position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
      cylinder: {
        length: 400000.0, 
        topRadius: 200000.0, 
        bottomRadius: 200000.0, 
        heightReference: Cesium.HeightReference.NONE,
        fill: true,
        material: Cesium.Color.GREEN.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.DARK_GREEN,
        outlineWidth: 1.0,
        numberOfVerticalLines: 16, 
        shadows: Cesium.ShadowMode.DISABLED,
        slices: 128, 
      },
    });

5）ellipse 椭圆或拉伸的椭圆

    var entity = viewer.entities.add({
      name: "Circles and Ellipses",
      position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
      ellipse: {
        show: true,
        semiMajorAxis: 300000.0, 
        semiMinorAxis: 150000.0, 
        height: 20000.0,
        heightReference: Cesium.HeightReference.NONE,
        extrudedHeight: 20000.0,
        extrudedHeightReference: Cesium.HeightReference.NONE,
        stRotation: 0.0, 
        granularity: Cesium.Math.RADIANS_PER_DEGREE, 
        material: Cesium.Color.BLUE.withAlpha(0.5),
        fill: true,
        outline: true,
        outlineColor: Cesium.Color.DARK_GREEN,
        outlineWidth: 1.0,
        numberOfVerticalLines: 16, 
        shadows: Cesium.ShadowMode.DISABLED,
        classificationType: Cesium.ClassificationType.BOTH,
      },
    });

6）ellipsoid 椭球体

    var entity = viewer.ent