已被阅读 2565 次 | 文章分类:cesium | 2021-06-24 22:41
在某些大场景,比如洼地区域,或者在区省级别,全国范围内的项目,可以借鉴;首先实现淹没效果,然后结合业务,实现淹没分析相关功能。
1 效果预览
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),
}
});
}
QQ群:713985494 | 技术问题解答
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号