CesiumCesium实现淹没CallbackProperty方式
一、淹没分析简介
淹没分析是指根据某区域的地形以及洪水流量速度,动态模拟该地形区域水位上涨过程。**该功能适用于地形起伏较大的区域。**目前Cesium实现淹没分析功能主要利用polygon的extruedHeight属性,在地形区域拾取几个点划定洪水淹没区,并规定洪水上涨限定高度,洪水从划定区域的最低处以polygon的方式逐渐上涨,达到限定高度后停止上涨,淹没过程结束。
二、淹没分析实现
2.1 淹没核心代码
//淹没分析
function floodAnalysis(positions,targertWaterHeight,waterHeight){
console.log(targertWaterHeight);
console.log(waterHeight);
viewer.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(positions),
extrudedHeight: new Cesium.CallbackProperty(function(){
waterHeight = 0.5;
if (waterHeight > targertWaterHeight) {
waterHeight = targertWaterHeight;
}
return waterHeight;
}, false),
material: new Cesium.Color.fromBytes(64, 157, 253, 150),
perPositionHeight: true,
}
})
}
其中positions为限定区域端点坐标数组,targetWaterHeight为洪水上涨限定高度,waterHeight为洪水起始高度。这里通过CallbackProperty来动态拉伸polygon。CallbackProperty是一个值,其值通过回调函数来决定,从它被创建开始,它就会不断地调用回调函数。
2.2 获取范围内地形高程极值
由于不确定地形高程的最低点,若extruedHeight从0开始增加,则很可能从地底处开始上涨(因为地形高度一般大于0),所以要确定范围地形的最低点,才能很好的实现淹没分析效果
目前Cesium没有提供相关方法来获取范围地形的高度极值,参考
Cesium获取绘制范围内地形高程进行淹没分析
这篇文章提供的思路,先构建范围地形的外接矩形,再构建矩形范围的格网,获取每个格网点处的高程,即可粗略计算洪水范围内地形的极值(采用了第三方库turf.js来构建网格):
//创建polygon外接矩形,并生成点格网,返回所有格网点坐标
function buildPolygonGrid(positions){
const tempPoints = []
for (let i = 0; i < positions.length; i ) {
cid;
var cartographic = ellipsoid.cartesianToCartographic(positions[i]);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
tempPoints.push([lng, lat]);
}
//生成外接矩形
var line = turf.lineString(tempPoints);
var bbox = turf.bbox(line);
var bboxPolygon = turf.bboxPolygon(bbox);
var area = turf.area(bboxPolygon);
//生成格网
//计算网格点之间的距离,尽量保证范围内有1万个左右格网点。
var cellSide = Math.sqrt(area/1000000)/100;
var options = { units: 'kilometers'};
var grid = turf.pointGrid(bbox, cellSide, options);
const gridPositions = [];
grid.features.forEach(f => {
gridPositions .push(Cesium.Cartographic.fromDegrees(f.geometry.coordinates[0], f.geometry.coordinates[1]));
})
const promise = Cesium.sampleTerrainMostDetailed(terrain, gridPositions);
let maxHeight = 0;
let minHeight = 10000.0;
Promise.resolve(promise).then(function(updatedPositions) {
for(let i=0;i<updatedPositions.length;i ){
let height = updatedPositions[i].height;
//获取格网点处地形高度
minHeight = height < minHeight ? height:minHeight;
maxHeight = height > maxHeight ? height:maxHeight;
}
document.getElementById("maxHeight").value = maxHeight;
document.getElementById("minHeight").value = minHeight;
});
}
最终效果如下:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghaeaf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13