cesium 淹没分析效果实现

在某些大场景，比如洼地区域，或者在区省级别，全国范围内的项目，可以借鉴；首先实现淹没效果，然后结合业务，实现淹没分析相关功能。

1 效果预览

见 http://xiaobaigis.com/GiSarticles/GiSArticle?ID=77

2 实现原理

结合多边形的扩展高度 extrudedHeight属性实现，其实就是多边形的拉伸效果；同样设计到动画问题，需要使用回调函数，在回调函数中不断更新拉伸的高度，实现平滑淹没效果

extrudedHeight: new CallbackProperty(function () {
    height+=step
    return height
})

3 全部代码

/**
 * 初始化相机位置解释
 */
import {
  Viewer,
  IonResource,
  CesiumTerrainProvider,
  PolygonHierarchy,
  Cartesian3,
  CallbackProperty,
  Color,
  Ion,
  Math as cesiumMath,
  Cartographic,

} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import viewOption from './viewerOption';
Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNzBlMTYxMC02YTkwLTQ5Y2EtOTU2NC1kNDUwYTg5ZGNjZTkiLCJpZCI6ODc0Mywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MjY0MzE0NH0.1hZ8wb3Tq-58PXFaG9o-XPS0U7FmaOMr1qZocIEkIBM"
var V = new Viewer('gisContainer', viewOption);
var globe = V.scene.globe;
globe.depthTestAgainstTerrain = true;
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display =
  'none';
  V.terrainProvider=new CesiumTerrainProvider({
        url:IonResource.fromAssetId(1),
        requestWaterMask:true,
        requestVertexNormals: true
    })

  V.camera.setView({//定位到范围中心点
        destination: Cartesian3.fromDegrees(100.1057121,38.7622031, 3000),
        orientation: {
          heading: cesiumMath.toRadians(130.304929908965146),//1
          pitch: cesiumMath.toRadians(-17.364771143804237),
          roll:0.09931507517437696
        }
      });

    let points=[
      [100.04055555555556,38.765],
      [100.15777777777778,38.74777777777778],
      [100.15444444444445,38.723055555555554],
      [100.04,38.72277777777778]
    ]
    let polygonArr=[];
    for(let i=0;i<points.length;i++){
      polygonArr.push(points[i][0]);
      polygonArr.push(points[i][1]);
      polygonArr.push(0);
    }
    document.getElementById("coverStart").onclick=function(){
      drawWater(3000,polygonArr,2000);
    }
   /**
    *      
    * @param {*} targetHeight 目标高度
    * @param {*} adapCoordi  范围坐标
    * @param {*} waterHeight 当前水高度
    */
    function drawWater(targetHeight, areaCoor,waterHeight) {  
      let entity =  V.entities.add({
          polygon : {
              hierarchy : new PolygonHierarchy(Cartesian3.fromDegreesArrayHeights(areaCoor)),
              perPositionHeight: true,
              extrudedHeight: new CallbackProperty(function () {  //此处用属性回调函数，直接设置extrudedHeight会导致闪烁。
                waterHeight+=2;
                if(waterHeight>targetHeight){
                    waterHeight=targetHeight;//给个最大值
                }
                return waterHeight
              },false),
              material : new Color.fromBytes(0,191,255,100),
          }
      });
     
    }