ceisum中使用后处理实现区域颜色渐变

cesium中为了实现区域颜色渐变使用cesium中后处理方式

实现思路：

1. 首先设置绘制区域的经纬度点;
2. 创建一个椭球区域；
3. 给椭球区域高度；
4. 创建primitive实例，然后给实例添加材质material；
5. 对材质进行后处理（通过修改材质渲染后的片元着色器进行颜色修改）

glsl中代码解析：

1. cesium中内置很多相关的变量和方法其中czm_material材质变量，czm_getMaterial
2. 通过czm_getDefaultMaterial获取每个片元着色器的原始材质
3. 然后通过getMixColor函数对4个区域根据材质的x，y进行颜色混合（x,y）取值范围为0--1之间
4. 然后将对应的颜色配置到漫反射属性diffuse参数中
5. 设置材质的透明质alpha

具体代码如下：

        //czm_materail 在是Cesium库内部自带或预定义的一组功能、材质、着色器或其他资源
        const glslMaterial = `
            uniform float u_alpha; // 纹理透明度
            uniform vec4 u_color;
            uniform vec4 u_color1;
            uniform vec4 u_color2;
            uniform vec4 u_color3;


            czm_material getMixColor(czm_material material, vec2 st) {
                vec3 colorTemp = mix(u_color.rgb, u_color1.rgb, st.x);
                vec3 colorTemp1 = mix(u_color2.rgb, u_color3.rgb, st.x);
                material.diffuse = mix(colorTemp, colorTemp1, st.y);
                return material;
            }

            czm_material czm_getMaterial(czm_materialInput materialInput) {
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st;
                material = getMixColor(material, st);
                material.alpha = u_alpha;
                return material;
            }
        `;
        


        const positionArray = new Cesium.Cartesian3.fromDegreesArray([
            100, 60,
            100, 70,
            110, 70,
            110, 60
        ]);
        const polygonHierarchyData = new Cesium.PolygonHierarchy(positionArray);
        const instanceObj = new Cesium.GeometryInstance({
            geometry: new Cesium.PolygonGeometry({
                polygonHierarchy: polygonHierarchyData,
                // extrudedHeight: 1,
                height: 100000
            })
        })
        const materialData = new Cesium.Material({
            fabric: {
                source: glslMaterial,
                uniforms: {
                    // 外部传入材质中的数据
                    u_alpha: 0.5,
                    u_color: new Cesium.Color.fromCssColorString('rgb(255, 0, 0)'),
                    u_color1: new Cesium.Color.fromCssColorString('rgb(0, 255, 0)'),
                    u_color2: new Cesium.Color.fromCssColorString('rgb(0, 0, 255)'),
                    u_color3: new Cesium.Color.fromCssColorString('rgb(255, 255, 0)'),
                }
            },
            translucent: 0.5
        })
        const primitiveData = new Cesium.Primitive({
            geometryInstances: [instanceObj],
            appearance: new Cesium.EllipsoidSurfaceAppearance({
                material: materialData
            })
        })
        this.viewer.scene.primitives.add(primitiveData) //添加到场景中

实现效果：