用Cesium做淹沒分析原理其實很簡單,就是給viewer的entities加一個polygon然後通過設置extrudeHeight(拉伸高度)來實現。
網上看了很多帖子都是通過直接設置extrudeHeight來實現,如下面代碼中方式2,但是發現了一個問題,就是每次設置高度都會閃爍一下。最後通過查閱文檔發現一個特別好的方式就是通過Cesium.CallbackProperty這個屬性回調函數來設置高度,完美實現。
廢話不多,直接上代碼:
drawWater(targetHeight, adapCoordi,waterHeight) { //targetHeight 目標高度 adapCoordi 範圍座標[109.2039, 35.6042, 0, 109.2774 ,35.6025, 0,109.2766,35.5738, 0] waterHeight 當前水高度
let _data = this.insData();
var entities = _data.viewer.entities;
//方式1
let entity = entities.add({
polygon : {
hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(adapCoordi)),
perPositionHeight: true,
extrudedHeight: new Cesium.CallbackProperty(function () { //此處用屬性回調函數,直接設置extrudedHeight會導致閃爍。
waterHeight+=3;
if(waterHeight>targetHeight){
waterHeight=targetHeight;//給個最大值
}
return waterHeight
},false),
material : new Cesium.Color.fromBytes(0,191,255,100),
}
});
//方式2 此方式會出現閃爍
// let entity = entities.add({
// polygon : {
// hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(adapCoordi)),
// perPositionHeight: true,
// extrudedHeight: waterHeight,
// material : new Cesium.Color.fromBytes(0,191,255,100),
// }
// });
// this.timer = setInterval(() => {
// let incre = 3;
// if (waterHeight < targetHeight) {
// waterHeight += incre;
//// let tempEntity = entities.add({
//// polygon : {
//// hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(adapCoordi)),
//// perPositionHeight: true,
//// extrudedHeight: waterHeight,
//// material : new Cesium.Color.fromBytes(0,191,255,50)
//// }
//// });
// if (waterHeight > targetHeight) {
// waterHeight = targetHeight
// }
// entity.polygon.extrudedHeight.setValue(waterHeight)
// }
// }, 250)
},