《Cesium性能优化：高效加载大量多边形的技巧与方法》加载大量的polygon导致页面卡顿、卡死_cesium加载大量模型

在cesium中加载矢量白模通常是使用的geojson数据，通过GeoJsonDataSource来加载。
这个方式加载的模型是通过polygon的方式呈现的，几百栋建筑数据对性能的影响不大，但是当数据量到几万的时候影响就非常大了，通常浏览器会直接卡死。
cesium有一种性能更强的加载方式，Primitive。
Primitive是直接在WebGL中绘制几何图形，而Entity是在Cesium的实体系统中进行管理的高级对象。
Primitive可以更高效地利用底层图形硬件和API，从而在大规模场景中呈现大量的几何图形。

使用primitive代替entity的好处：

1. 更高的性能：Primitive直接在WebGL中绘制几何图形，可以更高效地利用底层图形硬件和API。相比之下，Entity是在Cesium的实体系统中进行管理的高级对象，可能会带来一些性能开销。因此，使用Primitive可以在大规模场景中呈现大量的几何图形，并获得更好的性能。
2. 更少的内存占用：Primitive只需要存储几何数据和一些简单的属性，而Entity可能需要存储更复杂的属性和行为。这意味着使用Primitive可以减少内存占用，特别是当需要绘制大量的几何图形时。
3. 更灵活的控制：使用Primitive可以更直接地控制几何图形的属性和样式。你可以自定义几何图形的顶点位置、颜色、纹理坐标等属性，以及应用自定义的着色器程序。这样可以实现更精细的几何图形渲染效果，并且可以根据具体需求进行优化。

接下来是Primitive的加载示例

// 假设geojson中有一万条数据，先创建一个instances数组，用于存放GeometryInstance
let instances = []
for(let i = 0; i < 10000; i++) {
	// 创建几何实例
	let geometry = new Cesium.PolygonGeometry({
		polygonHierarchy: new Cesium.PolygonHierarchy(new Cesium.Cartesian3.fromDegreesArray([...坐标])),
		height: 0,
		extrudedHeight: 100
	})
	// 创建GeometryInstance，将几何实例赋值给geometry
	let instance = new Cesium.GeometryInstance({
		geometry,
	})
	// 存入instances数组
	instances.push(instance)
}
// 加载primitive，通过geometryInstances可以将多个PolygonGeometry一次性加载出来
let primitive = new Cesium.Primitive({
	geometryInstances: instances,
	// 使用MaterialAppearance自定义材质，缺点不能单独设置某一个geometry
	// 想要通过MaterialAppearance给每个几何实例都设置单独的外观也是可以实现的
	// 可以给每个GeometryInstance都实例化一个Primitive，在将所有的primitive放入viewer.scene.primitives
	// 但是这样也会造成卡顿，primitive的性能优势就不能体现出来了
	appearance: new Cesium.MaterialAppearance({ 
		material: new Cesium.Material({
			fabric : {
				type : 'Color',
                uniforms : {
                	color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
                }
			}
		})
	})
})
viewer.scene.primitives.add(primitive)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

如果要单独给几何对象加外观的话可以使用PerInstanceColorAppearance
PerInstanceColorAppearance中文网解释：这允许使用相同的 Primitive 绘制多个几何实例，每个实例具有不同的颜色
以上代码可以修改为

// 在GeometryInstance中添加attributes，使用color属性可以设置颜色
let instance = new Cesium.GeometryInstance({
	geometry,
	attributes: {
		// 设置单独的color可以使每个几何实例的外观都不一样
		color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
	}
})
// 同时primitive也需要调整
let primitive = new Cesium.Primitive({
	geometryInstances: instances,
	// PerInstanceColorAppearance中可以设置参数，具体可以参考官方文档
	appearance: new Cesium.PerInstanceColorAppearance({})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

以上就是关于primitive的优化示例，关于appearance外观又是另一个话题，这个在下一篇再讨论。