Cesium绘制动态墙

 1.数据准备：

包括要绘制的围栏坐标以及围栏高度，以及纹理材质中要提供的图片，图片在将在文章顶部展示

let positions = [
			[
				106.54093483238756,
				37.73128859082618,
				1287.2467035732923
			],
			[
				106.54096882123775,
				37.73120923938572,
				1285.23045636352
			],
			[
				106.54080469913156,
				37.73116536856507,
				1285.2307197571026
			],
			[
				106.54077328413864,
				37.731250730122945,
				1287.2464886557223
			],
			[
				106.54077950460314,
				37.731249823726316,
				1289.2465544884512
			]
		];
		// 围栏坐标，高度
		this.addWalls(positions, 10);

2.调用初始化动态墙的方法，主要是运用了Primitive的材质渲染（GLSL语言） 

	addWalls(positionLonLat, height) {
			let tempArr = [];
			let tempHeights = [];
			positionLonLat.forEach((e) => {
				tempArr.push(e[0], e[1]);
				tempHeights.push(e[2]);
			});
			tempArr.push(positionLonLat[0][0], positionLonLat[0][1]);
			let source = // 着色器代码
				"czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    {\n\
        czm_material material = czm_getDefaultMaterial(materialInput);\n\
        vec2 st = materialInput.st;\n\
        vec4 colorImage = texture2D(image, vec2(fract(st.t*rep - speed*czm_frameNumber*0.005), st.t*rep));\n\
        material.alpha = colorImage.a * color.a;\n\
        material.diffuse = color.rgb;\n\
        return material;\n\
    }";
			// 几何形状，定义Primitive图形的结构
			let wallInstance = new Cesium.GeometryInstance({
				geometry: new Cesium.WallGeometry({
					positions: Cesium.Cartesian3.fromDegreesArray(tempArr),
					// 最小高程数组和最大高程数组之差控制围墙高度
					maximumHeights: new Array(tempArr.length / 2).fill(Math.max(...tempHeights) + height),
					minimumHeights: new Array(tempArr.length / 2).fill(Math.min(...tempHeights)),
				}),
			});
			// 定义Primitive图形的外观材质
			let wallAppearance = new Cesium.MaterialAppearance({
				material: new Cesium.Material({
					fabric: {
						uniforms: {
							// 设置渐变条纹颜色
							color: new Cesium.Color.fromCssColorString("rgba(238, 85, 34, 1)"),
							// 条纹图片
							image: "./colors.png(下载的纹理照片路径)",
							// 条带运动速度
							speed: 3,
							// 围栏密度,展示多少条
							rep: 4,
						},
						source: source,
					},
				}),
			});
			let primitive = new Cesium.Primitive({
				geometryInstances: wallInstance,
				appearance: wallAppearance,
				releaseGeometryInstances: false,
			});
			viewer.scene.primitives.add(primitive);
		},