cesium 水位模拟_Cesium实现淹没分析
代码思路
Cesium的淹没效果主要使用到的是Cesium库中polygon的extrudedHeight属性。通过定时器对绘制的polygon进行高度增加同时将polygon的颜色设置成淡蓝色，从而实现淹没效果的展示。
实现的效果
淹没实现效果
代码展示
// 淹没效果
function drawPolygon(){
var waterHeight = 100;//初始设定的水位高度
var targetHeight = Number((viewer.camera.positionCartographic.height/1000).toFixed(2)) * 100;
console.log(targetHeight);
var PolygonPrimitive = (function () {
function _(positions) {
this.options = {
name: '多边形',
polygon: {
hierarchy: [],
perPositionHeight: true,
extrudedHeight: 0,
material: new Cesium.Color.fromBytes(64, 157, 253, 150),
}
};
this.hierarchy = positions;
this._init();
}
_.prototype._init = function () {
var _self = this;
var _updateHierarchy = function () {
return _self.hierarchy;
};
//实时更新polygon.hierarchy
this.options.polygon.hierarchy = new Cesium.CallbackProperty(_updateHierarchy, false);
this.timer = setInterval(() => {
if (waterHeight < targetHeight) {
waterHeight += 100;
if (waterHeight > targetHeight) {
waterHeight = targetHeight
}
viewer.entities.add({
name: '多边形',
polygon: {
hierarchy: positions,
perPositionHeight: true,
extrudedHeight: waterHeight,
material: new Cesium.Color.fromBytes(64, 157, 253, 150),
}
})
}
}, 1000);
//viewer.entities.add(this.options);
};
return _;
})();
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var positions = [];
var poly = undefined;
//鼠标单击画点
handler.setInputAction(function (movement) {
var cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
if (positions.length == 0) {
positions.push(cartesian.clone());
}
positions.push(cartesian);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
handler.setInputAction(function (movement) {
var cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {
poly = new PolygonPrimitive(positions);
} else {
if(cartesian != undefined){
positions.pop();
cartesian.y += (1 + Math.random());
positions.push(cartesian);
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//鼠标右键单击结束绘制
handler.setInputAction(function (movement) {
handler.destroy();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
PS：代码有点小Bug，暂时不想改了。如果您改好可以给我留言。