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

最新推荐文章于 2024-06-13 15:59:53 发布

那那那那那么长的哲尘

最新推荐文章于 2024-06-13 15:59:53 发布

阅读量2.9k

点赞数 3

分类专栏：三维gis 文章标签： Supermap webgl Cesium 前端三维 gis

本文链接：https://blog.csdn.net/weixin_42066016/article/details/91378672

版权

三维gis 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

本篇文章主要为通过调用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差，下面会用到。

上面我们已经实现沿线飞行，但是三维环境里面不光要考虑相机位置，还要考虑俯仰，方位角，而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);
      }

最后如果要停止，只要使用 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.length
                  if(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("站点显示关闭");
            }
        };

在这里插入图片描述

那那那那那么长的哲尘

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
10
评论
SuperMap iClient3D for WebGL沿线飞行飞行（一）

本篇文章主要为通过调用WebGL中的控制相机的相关接口，来实现飞行管理，从而解决WebGL中飞行管理接口的中不能实现的功能，如不需要.fpf文件，添加站点等。由于使用都是基础的控制camera接口，因此也适用于Cesium。1.为何要实现飞行管理在SuperMap iClient3D for WebGL中已经有可以对飞行进行管理的接口，具体示例可以参考下面的链接：http://support...
复制链接

扫一扫