用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)
},