cesium添加淹没分析测量面积
var viewer=ysc.createNormalCesium("cesiumContainer",{
//添加cesium中的基础属性
infoBox:true
,globalImagery:"谷歌"
,navigationHelpButton:true
,showGroundAtmosphere:false//关闭大气 默认开启,true;
});
viewer.terrainProvider=new Cesium.CesiumTerrainProvider({ //地形
url : Cesium.IonResource.fromAssetId(3956),
requestVertexNormals : true
});
function measureAreaSpace(viewer,maxH,interval,speed){
var waterEntity;
// 取消双击事件-追踪该位置
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// 鼠标事件
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);
var positions = [];
var tempPoints = [];
var polygon = null;
// var tooltip = document.getElementById("toolTip");
var cartesian = null;
var floatingPoint;//浮动点
// tooltip.style.display = "block";
handler.setInputAction(function(movement){
// tooltip.style.left = movement.endPosition.x + 3 + "px";
// tooltip.style.top = movement.endPosition.y - 25 + "px";
// tooltip.innerHTML ='<p>单击开始，右击结束</p>';
// cartesian = viewer.scene.pickPosition(movement.endPosition);
let ray = viewer.camera.getPickRay(movement.endPosition);
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
//cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
if(positions.length >= 2){
if (!Cesium.defined(polygon)) {
polygon = new PolygonPrimitive(positions);
}else{
positions.pop();
// cartesian.y += (1 + Math.random());
positions.push(cartesian);
}
// tooltip.innerHTML='<p>'+distance+'米</p>';
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement){
// tooltip.style.display = "none";
// cartesian = viewer.scene.pickPosition(movement.position);
let ray = viewer.camera.getPickRay(movement.position);
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
// cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
if(positions.length == 0) {
positions.push(cartesian.clone());
}
//positions.pop();
positions.push(cartesian);
//在三维场景中添加点
var cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
var heightString = cartographic.height;
tempPoints.push({ lon: longitudeString, lat: latitudeString ,hei:heightString});
floatingPoint = viewer.entities.add({
name : '多边形面积',
position : positions[positions.length - 1],
point : {
pixelSize : 10,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 3,
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
}
});
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function(movement){
handler.destroy();
positions.pop();
var textArea = getArea(tempPoints) + "平方公里";
//面积标签
viewer.entities.add({
name : '多边形面积',
position : positions[positions.length - 1],
label : {
text : textArea,
font : '18px sans-serif',
fillColor : Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(20, -40),
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
}
});
//二秒后开始进入淹没分析
setTimeout(function () {
if(waterEntity){
viewer.scene.globe.depthTestAgainstTerrain = true;
waterEntity.polygon.heightReference="CLAMP_TO_GROUND";
waterEntity.polygon.material="../images/water.png";
// var h=0;
// waterEntity.polygon.extrudedHeight=new Cesium.CallbackProperty(function () { //或water.polygon.extrudedHeight来进行 定时设置
// h+=speed;
// if(h>maxH){
// h=maxH;//给个最大值
// }
// return h
// });
var h=0;
waterEntity.polygon.extrudedHeight=0;//需要提前设置 不然会全部出现
var st=setInterval(function () {
h=h+speed;
if(h>=maxH){
h=maxH;//给个最大值
alert("达到最高值");
clearTimeout(st);
}
waterEntity.polygon.extrudedHeight=h;
},interval);
}
},2000);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK );
var radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)
var degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度
//计算多边形面积
function getArea(points) {
var res = 0;
//拆分三角曲面
for (var i = 0; i < points.length - 2; i++) {
var j = (i + 1) % points.length;
var k = (i + 2) % points.length;
var totalAngle = Angle(points[i], points[j], points[k]);
var dis_temp1 = distance(positions[i], positions[j]);
var dis_temp2 = distance(positions[j], positions[k]);
res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle)) ;
console.log(res);
}
return (res/1000000.0).toFixed(4);
}
/*角度*/
function Angle(p1, p2, p3) {
var bearing21 = Bearing(p2, p1);
var bearing23 = Bearing(p2, p3);
var angle = bearing21 - bearing23;
if (angle < 0) {
angle += 360;
}
return angle;
}
/*方向*/
function Bearing(from, to) {
var lat1 = from.lat * radiansPerDegree;
var lon1 = from.lon * radiansPerDegree;
var lat2 = to.lat * radiansPerDegree;
var lon2 = to.lon * radiansPerDegree;
var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
if (angle < 0) {
angle += Math.PI * 2.0;
}
angle = angle * degreesPerRadian;//角度
return angle;
}
/* 多边形*/
var PolygonPrimitive = (function(){
function _(positions){
this.options = {
name:'多边形',
polygon : {
hierarchy : [],
material:Cesium.Color.WHITE.withAlpha(0)
}
};
this.hierarchy = positions;
this._init();
}
_.prototype._init = function(){
var _self = this;
var _update = function(){
return _self.hierarchy;
};
//实时更新polygon.hierarchy
this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update,false);
waterEntity= viewer.entities.add(this.options);
};
return _;
})();
//计算距离
function distance(point1,point2){
var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
var point2cartographic = Cesium.Cartographic.fromCartesian(point2);
/**根据经纬度计算出距离**/
var geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(point1cartographic, point2cartographic);
var s = geodesic.surfaceDistance;
//console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
//返回两点之间的距离
s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
return s;
}
}
//运行
measureAreaSpace(viewer,2000,10,1); //maxH 设置为2000;最大淹没海拔 每10毫秒前进1海拔;
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(102.5, 30.0,50000)
});
详情可见
跃焱邵隼
cesium添加淹没分析测量面积相关推荐
- cesium开发淹没分析_淹没在Web开发行业的工具中
cesium开发淹没分析 Every once in a while in this industry we need a reminder that our trade as front-end d ...
- vue3+SuperMap iClient3D for Cesium实现淹没分析功能
本人小白一枚,文章如有问题还请各位大神评论区指出.整体实现是参考SuperMap iClient3D for Cesium的淹没分析功能源码~ 文章目录 前言 一.主要功能 二.具体实现 1.HTML ...
- Cesium(六)淹没分析（polygon版本）
淹没分析是三维分析常用的的其中一种分析,本文借鉴已有资料通过在地形图上动态拉伸polygon达到淹没分析的效果,下面给出淹没分析的主要代码: 效果: 一.容器创建&添加地形服务. var cu ...
- vue + cesium 洪水淹没分析完整示例
目录 一.洪水淹没分析效果 二.部分核心代码 1.绘制多边形范围 2.处理多边形区域的最大和最小高程 三.JS完整代码 一.洪水淹没分析效果 二.部分核心代码 1.绘制多边形范围 /*** @auth ...
- cesium实现淹没分析（基于polygon）并解决屏闪
文章目录 1.实现效果 2.实现方法 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 基于面状entity的extrudedHeight高度来拉伸面,实现简单的淹没分析效果. 但 ...
- Cesium洪水淹没分析 洪水淹没高度的上涨与下降
最近在基于cesium做水利项目的淹没分析 因为真实的洪水情况下,对于不同的地势来说 每个淹没区间的不同时刻水位高度肯定是不一样的 所以要求对多河段的高度做一个动态的水位上涨与下降的效果 不同河段水位 ...
- cesium polygon 淹没分析
获取 AccessToken 思路 实时更新 polygon 的 extrudedHeight 代码 <!DOCTYPE html> <html lang="en" ...
- 【Cesium】【vue】空间查询——量距(测量距离)、量面(测量面积)
目录 一.量距 二.量面 三.清除测量 四.页面结构 注意 参考 一.量距 // 距离测量measureLineSpace() {this.removeMeasure();let _this = th ...
- Cesium淹没分析（干货）
Cesium淹没分析 淹没分析主要研究的是某一块指定的研究的区域,根据当前地表起伏(也可以依据三维模型),动态展示不同时刻.区域.水深.流速等的淹没可视化结果. 需要具备的参数:淹没范围的设定,水面上 ...
最新文章
- robot framework安装问题排查
- s3cmd安装与使用
- 禁止复制的网页怎么复制
- 信息学奥赛一本通 1136：密码翻译 | OpenJudge NOI 1.7 09
- 失去循环标签的Python，我这样实现跳出外层循环
- oracle是delete可以加并行吗,提高Oracle DELETE性能的策略
- 关于jQuery获取html标签自定义属性值或data值
- SQLyog客户端 导入sql文件乱码的解决方法
- 百度小程序怎么添加到主屏幕将百度小程序放到手机桌面？
- Unity Android 加载Sprite
- 计算机塑性成形论文,6061铝合金的高温变形的力学性能及热塑性成形工艺研究...
- python当前时间减一年_python当前时间减一年_Python 日期时间datetime 加一天，减一天，加减一小时一分钟,加减一年......
- 关于人工神经网络的论文,人工神经网络参考文献
- 【基于obs插件-4】-音频频谱
- 工科生福利(嫖MacBook Pro 15) 拯救者AMD Ryzen 7 4800H Window11系统完美体验MAC生态
- redhat 5.4 启动服务
- 用户登录之SHA1加密
- 什么时候进行套利交易比较好？
- 2020年末知识大总结：Java程序员转Android开发必读经验一份
- 【贪心算法】Leetcode 714. 买卖股票的最佳时机含手续费