cesium 文本标注被遮挡_Cesium中Primitive讲解

前面介绍了entity方式绘制对象，现在我们开始接触primitive方式，primitive方式更接近渲染引擎底层，由于我对webgl知之甚少，因此primitive接口我现在也是一知半解，写这个博客我参考了这一篇博客Cesium(三) 几何图形与外观。(https://blog.csdn.net/happyduoduo1/article/details/51868042)

1、Primitive由两个部分组成

(1)几何形状(Geometry)：定义了Primitive的结构，例如三角形、线条、点等

(2)外观(Appearance )：定义Primitive的着色(Sharding)，包括GLSL(OpenGL着色语言，OpenGL ShadingLanguage)顶点着色器和片段着色器( vertex and fragment shaders)，以及渲染状态(render state)

Cesium支持以下几何图形：

image.png

image.png

image.png

使用Geometry和Appearance 具有以下优势：

(1)性能：绘制大量Primitive时，可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行，UI保持响应性

(2)灵活性：Geometry与Appearance 解耦，两者可以分别进行修改

(3)低级别访问：易于编写GLSL 顶点、片段着色器、使用自定义的渲染状态

同时，具有以下劣势：

(1)需要编写更多地代码

(2)需要对图形编程有更多的理解，特别是OpenGL的知识

下面代码是entity与primitive方式对比：

//entity方式

viewer.entities.add({

rectangle: {

coordinates: Cesium.Rectangle.fromDegrees(110.20, 34.55, 111.20, 35.55),

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(105.20, 30.55, 106.20, 31.55),

vertexFormat:Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT

})

});

viewer.scene.primitives.add(new Cesium.Primitive({

geometryInstances: instance,

appearance: new Cesium.EllipsoidS