Cesium开发高级篇 | 01空间数据可视化之Primitive

在基础篇中我们讲过空间数据可视化之Entity实体类，今天我们介绍另外一个比较接近渲染引擎底层的类Primitive，虽然两者都可用于绘制同样的几何图形，但考虑到性能问题，我们更推荐您使用Primitive类实现。在使用Primitive API之前，您最好具备WebGL基础知识，如果对WebGL不是太了解，建议先学习《WebGL编程指南》这本书。

Primitive介绍

1. Primitive组成
Primitive由两部分组成：几何形状（Geometry）和外观（Appearance）。几何形状定义了Primitive的结构，例如三角形、多边形、折线、点、标签等；外观则定义了Primitive的着色或渲染（Shading），包括GLSL（OpenGL着色语言，OpenGL Shading Language）顶点着色器和片元着色器（ vertex and fragment shaders），以及渲染状态（render state）。

2. Primitive优劣势
相对于Entity，使用Primitive具有以下优势：
（1）性能：绘制大量Primitive时，可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行，以保持UI响应性；
（2）灵活性：Geometry与Appearance 解耦，两者可以分别进行修改；
（3）低级别访问：易于编写GLSL顶点、片段着色器、使用自定义的渲染状态。

同时，也具有以下劣势：
（1）需要编写更多的代码，并且对图形编程有更深刻的理解，尤其是OpenGL知识；
（2）需要对组合几何形状对于静态数据有效，而对于动态数据则不一定有效。

3.几何图形绘制方式
以下是通过Entity和Primitive两种方式绘制矩形图形的方法：

// Entity方式
viewer.entities.add({
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
        material : new Cesium.StripeMaterialProperty({
            evenColor: Cesium.Color.WHITE,
            oddColor: Cesium.Color.BLUE,
            repeat: 5
        })
    }
});

// Primitive方式
var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  })
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Stripe')
  })
}));

几何Geometry

1.支持的几何类型

从基础篇的Entity篇幅我们知道，Entity支持的图形类型是以Graphics结尾的，一共有17种类型。而Primitive支持的几何类型则是以Geometry结尾的，和Entity除了结尾命名不一样之外，Cesium中还提供了独有的点形状PointPrimitive和一些形状的集合，包括PointPrimitiveCollection、BillboardCollection、LabelCollection、PolylineCollection。支持的形状如下图所示：