cesium 水面、淹没效果

淡淡的烟草味﹌ 2023-10-11 11:29 10阅读 0赞

**水面效果**

参考：

[http://cesiumcn.org/topic/158.html][http_cesiumcn.org_topic_158.html]

[http://api.rivermap.cn/cesium/rivermap/map.html][http_api.rivermap.cn_cesium_rivermap_map.html]

[https://blog.csdn.net/weixin\_42496466/article/details/80747565][https_blog.csdn.net_weixin_42496466_article_details_80747565]

demo效果：

![987843-20190723154156809-1619641388.gif][]

主要代码：

//绘制水面波浪效果
        drawWater: function(){
          this.viewer.scene.globe.depthTestAgainstTerrain = false;
          var waterFace=[
            130.0, 30.0, 0,
            150.0, 30.0, 0,
            150.0, 10.0, 0,
            130.0, 10.0, 0];
          var waterPrimitive = new Cesium.Primitive({
            show:true,// 默认隐藏
            allowPicking:false,
            geometryInstances : new Cesium.GeometryInstance({
              geometry : new Cesium.PolygonGeometry({
                polygonHierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(waterFace)),
                //extrudedHeight: 0,//注释掉此属性可以只显示水面
                //perPositionHeight : true//注释掉此属性水面就贴地了
              })
            }),
            // 可以设置内置的水面shader
            appearance : new Cesium.EllipsoidSurfaceAppearance({
              material : new Cesium.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: '../assets/waterNormals.jpg',
                    normalMap: '本地贴图地址 或 base64',
                    frequency: 1000.0,
                    animationSpeed: 0.01,
                    amplitude: 10.0
                  }
                }
              }),
              fragmentShaderSource:'varying vec3 v_positionMC;\nvarying vec3 v_positionEC;\nvarying vec2 v_st;\nvoid main()\n{\nczm_materialInput materialInput;\nvec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));\n#ifdef FACE_FORWARD\nnormalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);\n#endif\nmaterialInput.s = v_st.s;\nmaterialInput.st = v_st;\nmaterialInput.str = vec3(v_st, 0.0);\nmaterialInput.normalEC = normalEC;\nmaterialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);\nvec3 positionToEyeEC = -v_positionEC;\nmaterialInput.positionToEyeEC = positionToEyeEC;\nczm_material material = czm_getMaterial(materialInput);\n#ifdef FLAT\ngl_FragColor = vec4(material.diffuse + material.emission, material.alpha);\n#else\ngl_FragColor = czm_phong(normalize(positionToEyeEC), material);\
    gl_FragColor.a=0.5;\n#endif\n}\n'//重写shader，修改水面的透明度
            })
          });
          this.viewer.scene.primitives.add(waterPrimitive);
    
          this.viewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(140, 20, 6000000.0),
            orientation : {
              heading: Cesium.Math.toRadians(0.0), //默认朝北0度，顺时针方向，东是90度
              pitch: Cesium.Math.toRadians(-90), //默认朝下看-90,0为水平看，
              roll: Cesium.Math.toRadians(0) //默认0
            }
          });
    
        }

注意这里

this.viewer.scene.globe.depthTestAgainstTerrain = false;

而淹没效果需要将其设置为 true；当其值为 true 时，水面效果 会出现缝隙，如下图所示。

![987843-20190723170817575-1311573337.png][]

贴图从参考链接中可获取，这里附上：

[http://api.rivermap.cn/cesium/Build/CesiumUnminified/Assets/Textures/waterNormals.jpg][http_api.rivermap.cn_cesium_Build_CesiumUnminified_Assets_Textures_waterNormals.jpg]

![http_api.rivermap.cn_cesium_Build_CesiumUnminified_Assets_Textures_waterNormals.jpg][]

**淹没效果**

参考：

[https://github.com/liyangis/sn\_cesium][https_github.com_liyangis_sn_cesium]

demo效果：

![987843-20190723171127630-262050885.gif][]

主要代码（包含未用到的热力图效果代码）：

import Cesium from 'cesium/Source/Cesium'
    import HeatMap from "../modules/heatmap";
    // 淹没分析
    export default class SubmergenceAnalysis {
        constructor(viewer, isTerrain = true, height_max, height_min, step, map_type,positionsArr,speed) {
            this.viewer = viewer
            this.isTerrain = isTerrain
            this.handler = null
            this.tempEntities = []
            this.polygonEntities = []
            this.linePositionList = []
            this.tempPoints = []
            this.extrudedHeight = height_min
            this.height_max = height_max
            this.height_min = height_min
            this.step = step
            // 默认是范围图/深度图
            this.map_type = map_type
            this.polygon_degrees = positionsArr
            this.speed = speed
            //this._initViewStatus(this.viewer)
            this._addDisListener()
        }
        _initViewStatus(viewer) {
            var scene = viewer.scene
            scene.globe.depthTestAgainstTerrain = true
            viewer.camera.flyTo({
            //scene.camera.setView({
         
                // 摄像头的位置
                destination: Cesium.Cartesian3.fromDegrees(108.9, 34, 5000.0),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),//默认朝北0度，顺时针方向，东是90度
                    pitch: Cesium.Math.toRadians(-20),//默认朝下看-90,0为水平看，
                    roll: Cesium.Math.toRadians(0)//默认0
                }
            });
            viewer.skyAtmosphere = false
        }
        // 根据矩形范围得到行列数点坐标和高程信息
        _getPoints(xmin, xmax, ymin, ymax) {
            const x_count = 10
            const y_count = 10
            let cartesians = new Array(x_count * y_count);
            const x_d = (xmax - xmin) / x_count
            for (var i = 0; i < x_count; ++i) {
                const start_pt = { x: xmin + i * x_d, y: ymax }
                const end_pt = { x: xmin + i * x_d, y: ymin }
                for (let j = 0; j < y_count; j++) {
                    const offset = j / (y_count - 1);
                    const x = Cesium.Math.lerp(start_pt.x, end_pt.x, offset);
                    const y = Cesium.Math.lerp(start_pt.y, end_pt.y, offset);
                    cartesians[j + i * y_count] = Cesium.Cartographic.fromDegrees(x, y);
                }
            }
            return cartesians
    
        }
        _getHeights(cartesians, extrudedHeight, callback) {
    
            var terrainProvider = new Cesium.createWorldTerrain({
                    requestVertexNormals: true
                })
            // 根据地形计算某经纬度点的高度
            var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, cartesians);
            Cesium.when(promise, function (updatedPositions) {
    
                let positions = updatedPositions.filter(d => {
                    const cartographic = d
                    if (cartographic) {
                        const h_d = extrudedHeight - cartographic.height
                        return h_d > 0
                    }
                })
                positions = positions.map(d => {
                    const cartographic = d
                    let h = extrudedHeight - cartographic.height
                    return {
                        x: Cesium.Math.toDegrees(cartographic.longitude),
                        y: Cesium.Math.toDegrees(cartographic.latitude),
                        value: h
                    }
    
                })
    
                if (callback) {
    
                    callback(positions)
                }
            });
        }
    
        _addDisListener() {
            let viewer = this.viewer
            let scene = viewer.scene
            let linePositionList = this.linePositionList
            viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
            this.handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
            // 绘制线
            this._drawLine(linePositionList)
            //this.loadGrandCanyon()
            // 绘制面
            if (this.map_type) {
                this._drawPoly(this.polygon_degrees)
            } else {
                // 得到插值网格
                const bounds = {
                    west: 115.8784,
                    east: 115.9614,
                    south: 39.9912,
                    north: 40.0381
                }
    
                const positions_cartesian = this._getPoints(bounds.east, bounds.west, bounds.south, bounds.north)
                this._getHeights(positions_cartesian, this.extrudedHeight, (d) => {
                    this.heatMapObj = new HeatMap(this.viewer, d, bounds);
                })
            }
    
        }
        _reDraw() {
            this.tempPoints = []
            this.linePositionList.length = 0
            this.areaPositionList.length = 0
            for (let entity of this.tempEntities) {
                this.viewer.entities.remove(entity)
            }
            this.tempEntities = []
        }
    
        _drawLine(linePositionList) {
            let lineStyle = {
                width: 2,
                material: Cesium.Color.CHARTREUSE
            }
    
            let entity = this.viewer.entities.add({
                polyline: lineStyle,
            })
    
            entity.polyline.positions = new Cesium.CallbackProperty(function () {
                return linePositionList
            }, false)
    
            this.polygonEntities.push(entity)
        }
        _drawPoint(point_Cartesian3) {
            let entity =
                this.viewer.entities.add({
                    position: point_Cartesian3,
                    point: {
                        pixelSize: 10,
                        color: Cesium.Color.GOLD,
                        // disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                    }
                })
            this.tempEntities.push(entity)
        }
    
    
        _drawPoly(degrees) {
            const that = this
            let entity =
                this.viewer.entities.add({
                    polygon: {
                        hierarchy: {},
                        material: new Cesium.Color.fromBytes(64, 157, 253, 100),
                        perPositionHeight: true,
    
                    }
                })
            entity.polygon.hierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(degrees))
            entity.polygon.extrudedHeight = new Cesium.CallbackProperty(() => that.extrudedHeight, false)
            this.polygonEntities.push(entity)
        }
    
        // 世界坐标转经纬坐标
        _car3ToLatLon(cartesian) {
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
            let longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
            let latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
            return {
                lon: longitudeString,
                lat: latitudeString,
                height: cartographic.height
            }
        }
    
        //移除整个资源
        remove() {
            let viewer = this.viewer
            for (let tempEntity of this.tempEntities) {
                viewer.entities.remove(tempEntity)
            }
            for (let lineEntity of this.polygonEntities) {
                viewer.entities.remove(lineEntity)
            }
            this.handler.destroy()
        }
        start() {
            const that = this
            this.timer = window.setInterval(() => {
                if ((that.height_max > that.extrudedHeight) && (that.extrudedHeight >= that.height_min)) {
                    that.extrudedHeight = that.extrudedHeight + that.step
                } else {
                    that.extrudedHeight = that.height_min
                }
                if (!that.map_type) {
                    if (this.heatMapObj) {
                        const bounds = {
                            west: 115.8784,
                            east: 115.9614,
                            south: 39.9912,
                            north: 40.0381
                        }
                        const positions_cartesian = this._getPoints(bounds.east, bounds.west, bounds.south, bounds.north)
                        this._getHeights(positions_cartesian, this.extrudedHeight, (d) => {
                            this.heatMapObj.update(d);
                        })
                    }
                }
    
            },that.speed*1000)
            if (that.map_type) {
                that._drawPoly(that.polygon_degrees)
            } else {
                if (this.heatMapObj) { }
    
            }
    
        }
        clear() {
            let viewer = this.viewer
            if (this.timer) {
                window.clearInterval(this.timer)
                this.timer = null
            }
            this.extrudedHeight = this.height_min;
            if (this.heatMapObj)
                this.heatMapObj.show(false)
            for (let entity of this.polygonEntities) {
                viewer.entities.remove(entity)
            }
            viewer.skyAtmosphere = true;
    
        }
        changeMapType(type) {
            if (!type) {
                if (!this.heatMapObj) {
                    // 得到插值网格
                    const bounds = {
                        west: 115.8784,
                        east: 115.9614,
                        south: 39.9912,
                        north: 40.0381
                    }
                    const positions_cartesian = this._getPoints(bounds.east, bounds.west, bounds.south, bounds.north)
                    this._getHeights(positions_cartesian, this.extrudedHeight, (d) => {
                        this.heatMapObj = new HeatMap(this.viewer, d, bounds);
                    })
                }
    
                this.heatMapObj && this.heatMapObj.show(true)
                for (let entity of this.polygonEntities) {
                    entity.show = false;
                }
            } else {
                this.heatMapObj.show(false)
                for (let entity of this.polygonEntities) {
                    entity.show = true;
                }
            }
        }
    
        // 切割一部分地形
        loadGrandCanyon() {
            var globe = this.viewer.scene.globe;
            const viewer = this.viewer
            // viewer.skyAtmosphere = false,
            // Pick a position at the Grand Canyon
            var position = Cesium.Cartographic.toCartesian(new Cesium.Cartographic.fromDegrees(115.9165534, 40.0139345, 100));
            var distance = 30000.0;
            var boundingSphere = new Cesium.BoundingSphere(position, distance);
    
            globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
                modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
                planes: [
                    new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), distance),
                    new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), distance),
                    new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), distance),
                    new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), distance)
                ],
                unionClippingRegions: true
            });
            globe.clippingPlanes.enabled = true;
            viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.5, -0.5, boundingSphere.radius * 5.0));
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        }
    
    }

**洪水淹没效果**

在上一步的基础上，希望达到“洪水顺着河流向前淹没”效果

效果如下图：（注：只能在特定地区，特定观察角度，效果才会稍好一点 ?）

![987843-20190725132601307-1089892155.gif][]

原理：沿河道下游方向连续绘制长条状的蓝色立方体（由长条状矩形polygon拉伸而来），并使用上文“淹没效果”不断抬升。

几点需要注意：

1、上下游落差较大，因此上下游的立方体，起始高度不同（demo里仅仅做了均匀减少一定值的操作，实际应根据该位置河道具体高度）

2、长条状立方体的南北宽度要超过河道（demo里设置为固定值，实际应根据该位置河道具体宽度设置）

3、因为是连续绘制长条状立方体，所以相邻立方体之间的连接处很明显，效果较差。

4、目前只是演示，挑了一段东西走向的河道，绘制方向仅仅是向东每次平移一个长条立方体宽度的距离，不符合实际情况。

这个demo演示了连续（根据长条状矩形polygon）绘制立方体的效果，只能作为演示。

实际应根据dem 处理获得很多个连续的polygon（非长条状，包含时间属性、高度属性），然后逐一绘制。

dem的数据处理参考：

[https://blog.csdn.net/wqy248/article/details/81119550][https_blog.csdn.net_wqy248_article_details_81119550]

待下一步测试。~

![987843-20190725131941709-1102737464.gif][]

转载于:https://www.cnblogs.com/mumu122GIS/p/11233063.html

[http_cesiumcn.org_topic_158.html]: http://cesiumcn.org/topic/158.html
[http_api.rivermap.cn_cesium_rivermap_map.html]: http://api.rivermap.cn/cesium/rivermap/map.html
[https_blog.csdn.net_weixin_42496466_article_details_80747565]: https://blog.csdn.net/weixin_42496466/article/details/80747565
[987843-20190723154156809-1619641388.gif]: https://img2018.cnblogs.com/blog/987843/201907/987843-20190723154156809-1619641388.gif
[987843-20190723170817575-1311573337.png]: https://img2018.cnblogs.com/blog/987843/201907/987843-20190723170817575-1311573337.png
[http_api.rivermap.cn_cesium_Build_CesiumUnminified_Assets_Textures_waterNormals.jpg]: http://api.rivermap.cn/cesium/Build/CesiumUnminified/Assets/Textures/waterNormals.jpg
[https_github.com_liyangis_sn_cesium]: https://github.com/liyangis/sn_cesium
[987843-20190723171127630-262050885.gif]: https://img2018.cnblogs.com/blog/987843/201907/987843-20190723171127630-262050885.gif
[987843-20190725132601307-1089892155.gif]: https://img2018.cnblogs.com/blog/987843/201907/987843-20190725132601307-1089892155.gif
[https_blog.csdn.net_wqy248_article_details_81119550]: https://blog.csdn.net/wqy248/article/details/81119550
[987843-20190725131941709-1102737464.gif]: https://img2018.cnblogs.com/blog/987843/201907/987843-20190725131941709-1102737464.gif