SuperMap iClient3D for WebGL沿线飞行飞行（一）

2024-02-25 09:48
文章标签 webgl supermap 飞行 沿线 iclient3d

本文主要是介绍SuperMap iClient3D for WebGL沿线飞行飞行（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本篇文章主要为通过调用WebGL中的控制相机的相关接口，来实现飞行管理，从而实现WebGL中的飞行管理接口不能实现的功能，如不需要.fpf文件，添加站点等。由于使用都是基础的控制camera接口，因此也适用于Cesium。

1.为何要实现飞行管理

在SuperMap iClient3D for WebGL中已经有可以对飞行进行管理的接口，具体示例可以参考下面的链接：
http://support.supermap.com.cn:8090/webgl/examples/editor.html#flyRoute
通过上面示例可以看到，现有接口已经实现了读取飞行路线，开始飞行，暂停等功能，但是所有功能的实现，都要依托于iDesktop中生成的.fpf文件，并且缺少对站的添加，删除等操作，在真实的项目中很难满足客户需求。

2.主要实现思路

在原生Cesium控制相机的接口中，flyto可以实现从一点飞行到另一点的功能，但是其并不是沿线飞行，导致飞行路径不可控。其他接口，都是通过瞬间切换坐标点来进行移动的，算不上沿线飞行。因此需要使用到setInterval()方法。通过setInterval()不停的调用相机移动方法，来实现沿线飞行

3.各个功能具体实现

1.定义站点和添加站点

首先定义全部站点数组 var allStops=new Array()，主要用于存放所有的站点。然后定义站点变量var Stop = {}，用于存放选定的站点信息。设置一个按钮，点击后获取当前相机参数然后存储在全部站点数组中。

                 //获取当前摄像机参数var position=viewer.scene.camera.position;
//参数传入站点变量Stop.position_x=position.x;Stop.position_y=position.y; Stop.position_z=position.z;Stop.heading=viewer.scene.camera.heading;Stop.pitch=viewer.scene.camera.pitch;Stop.roll=viewer.scene.camera.roll;Stop.time=10;//传入站点数组allStops.push(Stop);//获取当前摄像机参数
var position=viewer.scene.camera.position;
//参数传入站点变量Stop.position_x=position.x;Stop.position_y=position.y; Stop.position_z=position.z;Stop.heading=viewer.scene.camera.heading;Stop.pitch=viewer.scene.camera.pitch;Stop.roll=viewer.scene.camera.roll;Stop.time=10;//传入站点数组allStops.push(Stop);
Time为两个站点的飞行时间，下文会用到。
2.飞行与停止

当allStops中存在两个以上的站点时就可以进行沿线飞行了。飞行之前需要先关闭所有的鼠标控制镜头的方法，避免鼠标操作破坏飞行过程。

	     	scene.screenSpaceCameraController.enableRotate = false;scene.screenSpaceCameraController.enableTranslate = false;scene.screenSpaceCameraController.enableZoom = false;scene.screenSpaceCameraController.enableTilt = false;scene.screenSpaceCameraController.enableLook = false;

相机参数，主要分为两类，第一类是坐标参数x,y,z（一般为经纬度和高度），第二类是镜头俯仰角等参数heading，pitch，roll。首先两点飞行最重要的参数是第一类参数，move(direction, amount)是比较方便控制相机移动的方法，这个方法会沿着三维方向移动一个 的步长，两个变量都是笛卡尔坐标系。把move()和setInterval()两个方法结合，可以实现相机沿线飞行的功能。
首先获取两个站点的笛卡尔坐标位置，然后相减，求出距离和方向。

if(l<allStops.length){x=allStops[l].position_x-allStops[l-1].position_x;y=allStops[l].position_y-allStops[l-1].position_y;z=allStops[l].position_z-allStops[l-1].position_z;p=allStops[l].pitch-allStops[l-1].pitch;h=allStops[l].heading-allStops[l-1].heading;fly(x,y,z,h,p);}

然后将参数传入setInterval()实现飞行。

    function fly(x,y,z,h,p){var ceshi= setInterval(function () {//move移动相机viewer.camera.move(new Cesium.Cartesian3(x,y,z),0.01);b=b+1;if (b==100){l++;stopfly(ceshi,l);b=0;}}, allStops[l-1].time);}

其中x，y，z为来个站点的笛卡尔坐标的差，和h，p为两个站点的pitch和heading差，下面会用到。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190610154153971.gif)
上面我们已经实现沿线飞行，但是三维环境里面不光要考虑相机位置，还要考虑俯仰，方位角，而camera里面能够控制这两个参数的方法不多，lookLeft()等方法经过测试十分不实用，最终还是通过最简单的方法，直接修改camera参数来实现。 
 function fly(x,y,z,h,p){var ceshi= setInterval(function () {//设置俯仰角               viewer.camera.setView({orientation: {heading :viewer.scene.camera.heading+h/100 , pitch :viewer.scene.camera.pitch+p/100  ,roll : 0.0                             }});//move移动相机viewer.camera.move(new Cesium.Cartesian3(x,y,z),0.01);// scene.camera.look(new Cesium.Cartesian3(x,y,z),0.01);b=b+1;if (b==100){l++;stopfly(ceshi,l);b=0;}}, allStops[l-1].time);}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190610151432658.gif)
最后如果要停止，只要使用 clearInterval()结束掉setInterval()和恢复所有的鼠标控制镜头的方法就可以了。
3.站点与飞行路线的现显示和隐藏

如果要添加复杂的飞行路线，让站点和飞行线路可见更方便规划。这里主要通过 viewer.entities.add方法来添加广告牌和线来实现飞行路线的显示。
站点的显示可以通过读取allStops数组中的x，y，z信息就可以实现，飞行路线可以同样可以同过读取两点信息，来练成线。如果要想隐藏站点和路线，可以通过遍历循环viewer.entities中的对象，来设置show属性进行控制。

添加站点时先判断显隐是否打开，再确定是否添加站点后，就显示站点或者飞行路线。

                  //显示飞行路线var drowStop = {};var cartographic = Cesium.Cartographic.fromCartesian(position);drowStop.longitude = Cesium.Math.toDegrees(cartographic.longitude);drowStop.latitude = Cesium.Math.toDegrees(cartographic.latitude);drowStop.height = cartographic.height;drowallStops.push(drowStop);var length=drowallStops.lengthif(line_bool==0){if(drowallStops.length>1){viewer.entities.add({id:drowallStops.length,name : drowallStops.length,polyline : {positions : Cesium.Cartesian3.fromDegreesArrayHeights([drowallStops[length-2].longitude, drowallStops[length-2].latitude, drowallStops[length-2].height,drowallStops[length-1].longitude, drowallStops[length-1].latitude, drowallStops[length-1].height]),width : 5,material : Cesium.Color.WHITE}});}  }//显示站点if(stop_bool==0){viewer.entities.add({position : Cesium.Cartesian3.fromDegrees(drowallStops[length-1].longitude,drowallStops[length-1].latitude,drowallStops[length-1].height),billboard :{image : './images/location4.png',width:30,height:40,},name : drowallStops.length+1000000,id:drowallStops.length+1000000//description: des});}//如果关闭显示了站点和飞行路线，添加的新站点和飞行路线将先不显示if(line_bool==1){if(drowallStops.length>1){viewer.entities.add({id:drowallStops.length,name : drowallStops.length,show:false,polyline : {positions : Cesium.Cartesian3.fromDegreesArrayHeights([drowallStops[length-2].longitude, drowallStops[length-2].latitude, drowallStops[length-2].height,drowallStops[length-1].longitude, drowallStops[length-1].latitude, drowallStops[length-1].height]),width : 5,material : Cesium.Color.WHITE}});}  console.log(1);}//显示站点if(stop_bool==1){viewer.entities.add({position : Cesium.Cartesian3.fromDegrees(drowallStops[length-1].longitude,drowallStops[length-1].latitude,drowallStops[length-1].height),billboard :{image : './images/location4.png',width:30,height:40,},name : drowallStops.length+1000000,id:drowallStops.length+1000000,show:false});}};

通过button来控制显示和隐藏。

 //控制飞行线的显示和隐藏document.getElementById("linevisible").onclick = function() {if(line_bool==0){for(i=1;i<drowallStops.length;i++){var visible=viewer.entities.getById(i+1);visible.show=false;}line_bool=1;$("#linevisible").text("路线显示开启");}else{for(i=1;i<drowallStops.length;i++){var visible=viewer.entities.getById(i+1);visible.show=true;}line_bool=0;$("#linevisible").text("路线显示关闭");}};//控制站点的显示和隐藏document.getElementById("stopvisible").onclick = function() {if(stop_bool==0){for(i=1000001;i<drowallStops.length+1000001;i++){var visible=viewer.entities.getById(i);visible.show=false;}stop_bool=1;$("#stopvisible").text("站点显示开启");}else{for(i=1000001;i<drowallStops.length+1000001;i++){var visible=viewer.entities.getById(i);visible.show=true;}stop_bool=0;$("#stopvisible").text("站点显示关闭");}};

在这里插入图片描述
文章转载出处：https://blog.csdn.net/weixin_42066016/article/details/91378672

这篇关于SuperMap iClient3D for WebGL沿线飞行飞行（一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/745114。

相关文章

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

原文链接： https://tecdat.cn/?p=37628 6月16日，小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞，这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示，公司准备量产，并计划今年四季度开启预售小鹏汇天分体式飞行汽车，探索分体式飞行汽车城际通勤。阅读原文，获取专题报告合集全文，解锁文末271份飞行汽车相关行业研究报告。 据悉，业内人士对飞行汽车行业
阅读更多...
SuperMap iManger 单个镜像更新流程

SuperMap iManger 单个镜像更新流程

1. 下载镜像 docker pull registry.cn-beijing.aliyuncs.com/supermap/common-dashboard-api:11.1.1-240802-amd64 label 没区分架构，在 x64 环境 pull arm64 镜像 通过 --platform=arm64 参数可以实现 docker pull mariadb:10.5.26
阅读更多...
Kubernetes 1.25 containerd 环境部署 SuperMap iManager

Kubernetes 1.25 containerd 环境部署 SuperMap iManager

超图官网目提供的Kubernetes 版本为 1.20 版本，容器运行时为 docker 本次部署使用已有的 Kubernetes 1.25 版本集群，容器运行时为 containerd Kubernetes ，containerd 部署请自行了解，本次不做介绍，下面介绍在此环境上如何部署 iManager 11i 并创建云套件 1. 环境介绍 虚拟机 CPU 内存 操作系统 Ku
阅读更多...
解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘，不能使用手机内置输入法的问题

解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘，不能使用手机内置输入法的问题

整整花费了一天时间测试和解决。试验了多个方法，花了不少美刀，最终才发现抖音这个官方文档，哭了： https://partner.open-douyin.com/docs/resource/zh-CN/mini-game/develop/guide/game-engine/rd-to-SCgame/open-capacity/capability-adaptation/sc_webgl_keyboa
阅读更多...
superMap mapboxgl初始化地图时，地图旋转api与设置地图中心api，同时进行无法完成实现效果

superMap mapboxgl初始化地图时，地图旋转api与设置地图中心api，同时进行无法完成实现效果

superMap mapboxgl初始化地图是，地图旋转api与设置地图中心api，同时进行无法完成实现效果 map = new mapboxgl.Map({center: [113.29840006822727, 23.395243424972175]})map.on("load", () => {map.rotateTo(-75)map.easeTo({center: [lng, lat]
阅读更多...
superMap mapboxgl 跳转其他页面并改变浏览器窗口大小，在跳回地图页面，地图大小异常，变为300*400大小。

superMap mapboxgl 跳转其他页面并改变浏览器窗口大小，在跳回地图页面，地图大小异常，变为300*400大小。

superMap mapboxgl 跳转其他页面并改变浏览器窗口大小，在跳回地图页面，地图大小异常，变为300*400大小。 window.addEventListener("resize", onResize)const onResize = () => {map.resize()}添加监听事件，调用地图api,resize()。
阅读更多...
Unity接入飞行遥杆外设

Unity接入飞行遥杆外设

readme 最近有朋友玩DSC，对于摇杆操控很感兴趣，然后想要接入外设来子级设计一套飞行逻辑。 设备测试 这里使用的设备是罗技X56摇杆套件、图马斯特摇杆套件 Unity使用插件 Rewired 场景搭建 创建空对象，挂载输入脚本：InputManager 接入硬件后，在右侧 Joy数组，会有遥杆名称，根据名称，展开以下的按键或者向量，即获得遥杆的操作值。 脚本测试 创建测试脚
阅读更多...
5.12 飞行控制——PID参数优化

5.12 飞行控制——PID参数优化

文章目录 5.12 飞行控制——PID参数优化5.12.1 XY轴角度系统P参数优化（1）软件设计（2）运行与调试 5.12.2 Z轴角度系统P参数优化5.12.3 Z轴位置系统P参数优化5.12.4 XY轴位置系统P参数优化 总目录：http://t.csdnimg.cn/YDe8m 5.12 飞行控制——PID参数优化   在“5.9.8”小节提到过，使用Matlab自
阅读更多...
WebGL:二、ThreeJs 简介

WebGL:二、ThreeJs 简介

在初步学习OpenGL 和 WebGL（基于 OpenGL ES） 之后，发现这两者都对初学者不够友好，繁多复杂的API，以及高深的建模原理矩阵运算，线代等大大提高了学习的门槛。 ThreeJs是对webGL提供的接口进行了良好的封装，简化了很多专业知识，学习成本明显降低。 以下，是用webGL绘制一个矩形的样例片段： （ps：我就画一个矩形，一下子就整这么多方法，这还算是
阅读更多...
5.11 飞行控制——定点飞行

5.11 飞行控制——定点飞行

文章目录 5.11 飞行控制——定点飞行5.11.1 加入三轴位置的飞行硬件系统 FLY(s)5.11.2 数学模型——三轴位置系统（1）x、y轴位置系统的微分方程（2）z轴位置系统的微分方程（3）三轴位置系统的状态空间方程 5.11.2 A1软件设计5.11.3 A1运行与调试5.11.4 三轴位置串级PID控制器5.11.5 A2软件设计5.11.6 A2运行与调试5.11.7 期望误差
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2