本文共 7852 字,大约阅读时间需要 26 分钟。
本篇文章主要为通过调用WebGL中的控制相机的相关接口,来实现飞行管理,从而实现WebGL中的飞行管理接口不能实现的功能,如不需要.fpf文件,添加站点等。由于使用都是基础的控制camera接口,因此也适用于Cesium。
在SuperMap iClient3D for WebGL中已经有可以对飞行进行管理的接口,具体示例可以参考下面的链接:
通过上面示例可以看到,现有接口已经实现了读取飞行路线,开始飞行,暂停等功能,但是所有功能的实现,都要依托于iDesktop中生成的.fpf文件,并且缺少对站的添加,删除等操作,在真实的项目中很难满足客户需求。在原生Cesium控制相机的接口中,flyto可以实现从一点飞行到另一点的功能,但是其并不是沿线飞行,导致飞行路径不可控。其他接口,都是通过瞬间切换坐标点来进行移动的,算不上沿线飞行。因此需要使用到setInterval()方法。通过setInterval()不停的调用相机移动方法,来实现沿线飞行
首先定义全部站点数组 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为两个站点的飞行时间,下文会用到。
当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
然后将参数传入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差,下面会用到。
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); }
如果要添加复杂的飞行路线,让站点和飞行线路可见更方便规划。这里主要通过 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文章转载出处: