[cesium] 三维空间分析模块，基础的通视分析，坡度分析，淹没分析，视域分析等
2024-05-09 20:25:50
效果
通视分析
环视分析 (基于碰撞点)
坡度分析 基于地形
淹没分析 基于polygon拔高
视域分析
挖地分析
方量分析
以及测控过境分析等， 代码示例，后面重构过
/*** 通视分析*/
import Analyser from '../analyser.js';
export default class Visibility extends Analyser{/*** 初始化* @param {*} supers * @param {*} opt */constructor(supers,opt){super(supers);//opt = Cesium.defaultValue(opt, Cesium.defaultValue.EMPTY_OBJECT); //判断是否有值this.opt = opt;this.analyser();}/*** 创建分析*/analyser(){if (!Cesium.defined(this._viewer)) {throw new Cesium.DeveloperError('viewer is required.');}return new VisiblyEffect(this);}
}
/*** 内部分析类* @param {*} _that */
const VisiblyEffect = class {constructor(_that){this._that = _that;this.options = _that.opt;this.viewer = _that._viewer;this.id = Cesium.createGuid();this._markers=[];this._lines=[];this._pickedObjs=[];this.posArray=[];this._resultTip = this.viewer.entities.add({id:this.id,label : {//name: 'visiblyEffect',//show : false,fillColor:Cesium.Color.YELLOW,showBackground : true,font : '14px monospace',horizontalOrigin : Cesium.HorizontalOrigin.LEFT,verticalOrigin : Cesium.VerticalOrigin.BOTTOM,pixelOffset : new Cesium.Cartesian2(0, -10)}});this.state = _that.BEYONANALYSER_STATE.PREPARE;this.init();}init(){//点击var _self = this,_that = _self._that;_that.handler.setInputAction(function (movement) {//var cartesian = Cesium.pickGlobe(viewer.scene,movement.position);let cartesian = _that.mouseManager.piTerrainToModule(movement.position);_self.posArray.push(cartesian);if(_self._markers.length==0){//scope.reset();var startSphere = _self.viewer.entities.add({position : cartesian,ellipsoid : {radii : new Cesium.Cartesian3(2.0, 2.0, 2.0),material : Cesium.Color.BLUE},label:{text:"视线起点",fillColor:Cesium.Color.YELLOW,pixelOffset:{x:0,y:-20},scale:0.5}}); _self._markers.push(startSphere);_self.state= _that.BEYONANALYSER_STATE.OPERATING;}else if(_self._markers.length==1){var redSphere = _self.viewer.entities.add({position : cartesian,ellipsoid : {radii : new Cesium.Cartesian3(2.0, 2.0, 2.0),material : Cesium.Color.RED}});_self._markers.push(redSphere);var results = _that.getIntersectObj(_self.posArray[0],cartesian,_self._markers,true);//分析一下是否都有positionfor (let index = results.length-1; index >=0; index--) {const element = results[index];if(!Cesium.defined(element.position)){results.splice(index,1);} }if(!Cesium.defined(results[0].position)){throw new Cesium.DeveloperError("position is undefined");}var pickPos1 = results[0].position;var dis=Cesium.Cartesian3.distance(pickPos1,cartesian); var bVisibility=dis<5?true:false;var arrowPositions=[_self.posArray[0],results[0].position];var greenLine=_self.viewer.entities.add({polyline : {positions : arrowPositions,width : 10,arcType : Cesium.ArcType.NONE,material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.GREEN)}});_self._lines.push(greenLine);if(!bVisibility){var unArrowPositions=[results[0].position,cartesian];var redLine=_self.viewer.entities.add({polyline : {positions : unArrowPositions,width : 10,arcType : Cesium.ArcType.NONE,material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)}});_self._lines.push(redLine);}_self.showIntersections(results);var pos1=_self.posArray[0];var pos2=cartesian;var rad1 = Cesium.Cartographic.fromCartesian(pos1);var rad2 = Cesium.Cartographic.fromCartesian(pos2);var degree1 = {longitude:rad1.longitude / Math.PI * 180,latitude:rad1.latitude / Math.PI * 180,height:rad1.height};var degree2 = {longitude:rad2.longitude / Math.PI * 180,latitude:rad2.latitude / Math.PI * 180,height:rad2.height};var length_ping = Math.sqrt(Math.pow(pos1.x-pos2.x,2)+Math.pow(pos1.y-pos2.y,2)+Math.pow(pos1.z-pos2.z,2));var length_h = Math.abs(degree2.height-degree1.height);var length = Math.sqrt(Math.pow(length_ping,2)+Math.pow(length_h,2));//console.log(degree1);var visTxt=bVisibility?'是':'否';var text ='起点坐标: ' + (' (' + degree1.longitude.toFixed(6))+ '\u00B0' +',' +(degree1.latitude.toFixed(6))+ '\u00B0'+',' +degree1.height.toFixed(2)+')' +'\n终点坐标: ' + (' (' + degree2.longitude.toFixed(6))+ '\u00B0' +',' +(degree2.latitude.toFixed(6))+ '\u00B0'+',' +degree2.height.toFixed(2)+')' +'\n垂直距离: ' + ' ' + length_h.toFixed(2) +'m'+'\n水平距离: ' + ' ' + length_ping.toFixed(2) +'m'+'\n空间距离: ' + ' ' + length.toFixed(2) +'m'+'\n是否可视: ' + ' ' + visTxt;_that.showTip(_self._resultTip,true,cartesian,text,{fillColor:Cesium.Color.YELLOW});_self.state= _that.BEYONANALYSER_STATE.END;}}, Cesium.ScreenSpaceEventType.LEFT_CLICK );//移动var info;_that.handler.setInputAction(function (movement) {var cartesian = _self.viewer.scene.pickPosition(movement.endPosition);if(_self.state === _that.BEYONANALYSER_STATE.PREPARE){ info ='点击设定起点';_that.showTip(_self._resultTip,true,cartesian,info);}else if(_self.state === _that.BEYONANALYSER_STATE.OPERATING){ info ='点击分析通视情况';_that.showTip(_self._resultTip,true,cartesian,info);}},Cesium.ScreenSpaceEventType.MOUSE_MOVE);}showIntersections(results){let _self = this;for (let i = 0; i < results.length; ++i) {var object = results[i].object;if(object){if (object instanceof Cesium.Cesium3DTileFeature) {_self._pickedObjs.push(object);object.oldColor=object.color.clone();object.color = Cesium.Color.fromAlpha(Cesium.Color.YELLOW, object.color.alpha);}else if (object.id instanceof Cesium.Entity) {var entity=object.id;scope._pickedObjs.push(entity);var color=entity.polygon.material.color.getValue();entity.polygon.oldColor=color.clone();entity.polygon.material = Cesium.Color.fromAlpha(Cesium.Color.YELLOW, color.alpha);}}_self._markers.push(_self.viewer.entities.add({position : results[i].position,ellipsoid : {radii : new Cesium.Cartesian3(0.8, 0.8, 0.8),material : Cesium.Color.RED}}));}}remove(){//恢复颜色for (i = 0; i < this._pickedObjs.length; ++i) {var object=this._pickedObjs[i];if (object instanceof Cesium.Cesium3DTileFeature) {object.color = object.oldColor.clone();}else if (object instanceof Cesium.Entity) {object.polygon.material = object.polygon.oldColor.clone(); }}this._pickedObjs.length=0;for (let index = 0; index < this._markers.length; index++) {var element = this._markers[index];this.viewer.entities.remove(element); }this._markers.length=0;for (let index = 0; index < this._lines.length; index++) {var element = this._lines[index];this.viewer.entities.remove(element); }this._lines.length=0;this.viewer.entities.remove(this._resultTip); this._resultTip=undefined; }
}/*** 淹没分析*/
import Analyser from '../analyser.js';
export default class Submerged extends Analyser{constructor(supers,opt){super(supers);//opt = Cesium.defaultValue(opt, Cesium.defaultValue.EMPTY_OBJECT); //判断是否有值this._resultTip = this._viewer.entities.add({id:Cesium.createGuid(),label : {//name: 'visiblyEffect',//show : false,fillColor:Cesium.Color.YELLOW,showBackground : true,font : '14px monospace',horizontalOrigin : Cesium.HorizontalOrigin.LEFT,verticalOrigin : Cesium.VerticalOrigin.BOTTOM,pixelOffset : new Cesium.Cartesian2(0, -10)}});this.positions = [];this.polyObj = null;this.tempPoints = [];this.entity = [];this.state = this.BEYONANALYSER_STATE.PREPARE; //0this.waterEntity = null;this.analyser(opt);}analyser(options){/*** 点击*/let _self = this,viewer = this._viewer,info = "",maxH = options.maxH == undefined ? 50 :options.maxH,interval = options.interval == undefined ?10 : options.interval,speed = options.speed == undefined ? 1 : options.speed;_self.handler.setInputAction(function (e) {//第一次点击if(_self.Tools.nullBool(e.position)){return false;}let cartesian = _self.mouseManager.screenToWorld(e.position);if(_self.positions == 0){_self.positions.push(cartesian.clone())}_self.positions.push(cartesian); //模拟let cartographic = Cesium.Cartographic.fromCartesian(_self.positions[_self.positions.length - 1]);_self.tempPoints.push({ lon: Cesium.Math.toDegrees(cartographic.longitude), lat: Cesium.Math.toDegrees(cartographic.latitude) ,hei:cartographic.height});/*** 创建实体*/let entity = _self.entitys.createEntity();entity.position = cartesian;entity.point = _self.entitys.getPoint();_self.entity.push(_self.entitys.add(entity)); //创建点},Cesium.ScreenSpaceEventType.LEFT_CLICK);/*** 移动*/_self.handler.setInputAction(function (e) {if(_self.Tools.nullBool(e.endPosition)){return false;}let cartesian = _self.mouseManager.screenToWorld(e.endPosition);if(_self.state === _self.BEYONANALYSER_STATE.PREPARE){ info ='点击设定范围';_self.showTip(_self._resultTip,true,cartesian,info);}else if(_self.state === _self.BEYONANALYSER_STATE.OPERATING){ info ='右键分析淹没情况';_self.showTip(_self._resultTip,true,cartesian,info);}if(_self.positions.length >= 2){if (!Cesium.defined(_self.polyObj)) {_self.polyObj = new _self.entityFactory({type:"createPolygon",data:{positions:_self.positions,material:Cesium.Color.WHITE.withAlpha(0.1)}});_self.waterEntity = _self.entitys.add(_self.polyObj);_self.entity.push(_self.waterEntity); //创建线}else{_self.positions.pop();_self.positions.push(cartesian.clone());}if(_self.positions.length > 4)_self.state = _self.BEYONANALYSER_STATE.OPERATING;}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);/*** 右键取消*/_self.handler.setInputAction(function (e) {if(_self.Tools.nullBool(e.position)){return false;}_self.handler.destroy(); //关闭事件句柄_self.positions.pop(); //最后一个点无效_self.state = _self.BEYONANALYSER_STATE.END; //分析结束//二秒后开始进入淹没分析setTimeout(function () {if (_self.waterEntity) {viewer.scene.globe.depthTestAgainstTerrain = true;_self.waterEntity.polygon.heightReference = "CLAMP_TO_GROUND";_self.waterEntity.polygon.material = "./img/water.png";var h = 0.0;_self.waterEntity.polygon.extrudedHeight = h;var st = setInterval(function () {h = h + speed;if (h >= maxH) {h = maxH;//给个最大值clearTimeout(st); //结束}_self.waterEntity.polygon.extrudedHeight = h;}, interval);}}, 2000);$("body").append('<div id="video_div" style="position:absolute;right:10px;bottom:10px;"><video width="350" height="250" src="video/yanmo.mp4" controls autoplay></video></div>');setTimeout(function () {$("#video_div").remove();},10000)},Cesium.ScreenSpaceEventType.RIGHT_CLICK);}}部分开源，不建议直接使用仅供参考
github地址:传送门
[cesium] 三维空间分析模块，基础的通视分析，坡度分析，淹没分析，视域分析等相关推荐
- ArcGIS基础实验视域分析步骤（图文）
ArcGIS基础实验视域分析步骤(图文) 作者:王朝颖 简介:软件版本更新,原实验步骤与新版本出现略微不同.个人操作仅供参考. 一.视线分析 1.打开ex21.mxd,激活data frame,点状图 ...
- ArcGIS 基于TIN地表面数据和建筑数据进行视域分析
先看下我们已有的数据,有河流.建筑.公园.山体等. 4:在空白处右键激活3D分析工具. 5:查看工具. 1:点击创建视线工具. 2:打开通视分析对话框,把观察点偏移设置为1.2~1.9米左右(按照观察 ...
- 大豆技术面分析_技术贴 | GIS三维视域分析—面要素
GIS 视域分析 理论 01 部分 之前写了一篇技术贴:GIS三维视域分析里面讲了视域分析的相关理论及应用案例,以及具体点.线的视域分析,面要素比较概况,应某位小可爱的要求,今天详细分析面要素的视域分 ...
- 三维显示中可视化分析——视域分析、视点分析
三维显示中可视化分析--视域分析.视点分析 今天来介绍一下三维显示的可视化分析中常见的两种工具(Viewshed与Observer Points)的区别. 一.实验背景 开发商要在本区域建造观 ...
- 360视域分析 cesium_Cesium-空间分析之通视分析(附源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- DEJA_VU3D - Cesium功能集 之 034-可视域分析（纯前端）完整版
前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有实现130个左右的功能,后续也会不断的追加,所以暂时打算一周 ...
- [cesium] | 视域分析 | 基于cesium的可视域效果
效果 说明 基于cesium的可视域 有需要的自提 插件地址:传送门 在线访问:传送门2
- Cesium 可视域分析代码段（源码）补充
很抱歉之前的博客里的代码段是贴的截图:关于可视域分析的实现_总要学点什么的博客-CSDN博客_可视域分析 功能优化后的完整demo: Cesium功能集 之 034-可视域分析(纯前端)完整版 现在将 ...
- Arcgis水文分析模块小流域划分流程
Arcgis水文分析模块小流域划分流程 Arcgis水文分析模块小流域划分流程 总体流程如下 填洼.Fill DEM表面存在着一些凹陷的区域(DEM本身是插值计算的,很难与现实情况完全符合),由于这些 ...
最新文章
- 【Python】6000字、22个案例详解Pandas数据分析/预处理时的实用技巧，超简单
- 麒麟810处理器_华为nova5跑分公布，麒麟810到底是什么水平？
- LwIP应用开发笔记之七：LwIP无操作系统HTTP服务器
- 【JAVA SE】第一章 Java语言概述、环境变量和HelloWorld
- 老男孩教育每日一题-第106天-MySQL如何授权用户admin:password远程访问权限
- qt中如何模拟按钮点击_怎么在qt中实现一个按钮列表？
- cognos数据源的配置
- IDEA添加快捷输入
- niosii spi 外部_【笔记】NIOS II spi详解
- HTML5 与 CSS3 jQuery部分知识总结
- calc(100% - 200px)调整大小
- 2018年11月总结，12月计划
- mysql主从 主机宕机_MySQL主从宕机的解决方法
- Android TV与机顶盒
- 有的人走了，但他的代码还闪耀着光芒
- mysql协议分析 row_MySQL协议分析（结合PyMySQL）
- 阿里云视频点播技术能力盘点
- C语言的按位取反符号~（详解）
- DPDK 学习笔记（一）
- sentry部署整理