cesium实现水面水流及淹没效果绘制的封装

https://blog.csdn.net/weixin_42496466/article/details/80747565之前写的绘制河流代码比较原生，现在用es6重写封装及项目应用

一、配置数据结构信息

primitivePolygon:{
  isRLayerPanel: true,
  primitives:[],
  url: '/static/data/polygon.json',
  dataPath: '',
  dataGeoField: 'positions',
  dataIdField: 'code',
  options:{
    id:'primitivePolygon',
    name:'水面',
    isShow: true
  },
  location: {
    "destination":{"x":-2299198.6726013585,"y":4751964.065160188,"z":3584927.7927483744},
    "orientation":{"heading":5.306048485719572,"pitch":-0.5409977477562071,"roll":6.283156824584358},
    duration: 2
  },
  entityType:'primitive'
}

二、解析代码实现

/**
 * common create Primitive *
 * */
export function CommonDrawPrimitiveEntities(data,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,layerId,PostionsField,IDField){
    // CommonRemoveEntities(zjnCesium,layersInfo,layerId);
    let len = data.length;
    for (let i = 0; i < len; i++) {
        if (data[i][PostionsField] != null){
            // let positionsXYZ = Cartesian3.fromDegrees(parseFloat(data[i][LGTDField]), parseFloat(data[i][LTTDField]));
            // let curID = zjnCesium.viewer.entities.getById(data[i][IDField]);
            //如果当前实体不存在则绘制
            // if(curID != undefined){
            //     continue;
            // }
            let waterPrimitive;
            // let symbol=getLyaerRenderSymbol(LayersRenderSet,layerId,data[i]);
            // if(symbol==undefined){
            //     continue;
            // }
            let waterc=[]
            for(let j = 0; j < data[i][PostionsField].length; j++){
                waterc.push(data[i][PostionsField][j])
                if(j%2 == 1){
                    waterc.push(203)
                }
            }
            console.log(Cartesian3.fromDegreesArray(data[i][PostionsField]))
            console.log(Cartesian3.fromDegreesArrayHeights(waterc))
            waterPrimitive = new Primitive({
                id:data[i][IDField]||generateUUID(),
                show: true,// 默认隐藏
                allowPicking:false,
                geometryInstances : new GeometryInstance({
                    geometry : new PolygonGeometry({
                        polygonHierarchy : new PolygonHierarchy(Cartesian3.fromDegreesArrayHeights(waterc)),
                        //extrudedHeight: 0,//注释掉此属性可以只显示水面
                        perPositionHeight : true//注释掉此属性水面就贴地了
                    })
                }),
                // 可以设置内置的水面shader
                appearance : new EllipsoidSurfaceAppearance({
                    material : new Material({
                        fabric : {
                            type : 'Water',
                            uniforms : {
                                //baseWaterColor:new Cesium.Color(0.0, 0.0, 1.0, 0.5),
                                //blendColor: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
                                //specularMap: 'gray.jpg',
                                normalMap: '/static/Textures/waterNormals.jpg',
                                frequency: 1000.0,
                                animationSpeed: 0.01,
                                amplitude: 10.0
                            }
                        }
                    }),
                    fragmentShaderSource: 'varying vec3 v_positionMC;\n' +
                        'varying vec3 v_positionEC;\n' +
                        'varying vec2 v_st;\n' +
                        'void main()\n' +
                        '{\n' +
                        'czm_materialInput materialInput;\n' +
                        'vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));\n' +
                        '#ifdef FACE_FORWARD\n' +
                        'normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);\n' +
                        '#endif\n' +
                        'materialInput.s = v_st.s;\n' +
                        'materialInput.st = v_st;\n' +
                        'materialInput.str = vec3(v_st, 0.0);\n' +
                        'materialInput.normalEC = normalEC;\n' +
                        'materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);\n' +
                        'vec3 positionToEyeEC = -v_positionEC;\n' +
                        'materialInput.positionToEyeEC = positionToEyeEC;\n' +
                        'czm_material material = czm_getMaterial(materialInput);\n' +
                        '#ifdef FLAT\n' +
                        'gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);\n' +
                        '#else\n' +
                        'gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);\n' +
                        'gl_FragColor.a=0.85;\n' +
                        '#endif\n' +
                        '}\n'
                })
            });
            zjnCesium.viewer.scene.primitives.add(waterPrimitive);
            layersInfo[layerId].primitives.push(waterPrimitive)
        }
    }

}

三、实现效果

 

四、厂区洪水淹没应用效果

 

 

 如果对您有帮助

 感谢支持技术分享，请扫码点赞支持：

技术合作交流qq:2401315930