三维飞行优化

首先来看下基础api提供的方法

 1 function TestCamera()
 2 {
 3     var sceneControl = new SuperMap.Web.UI.Controls.SceneControl(document.getElementById("sceneControlDiv"));
 4     var scene = sceneControl.get_scene();
 5
 6     使用经纬度和高度构造一个相机对象
 7     var camera = new SuperMap.Web.Realspace.Camera(116,40,350000);
 8
 9     设置相机高度模式
10     camera.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.ClampToGround);
11
12      设置相机视角的方位角
13     camera.set_heading(120);
14
15      设置相机的俯角
16     camera.set_tilt(45);
17
18      弹出相机设置是否有效的提示
19     alert("The camera is set：" + camera.isValid());
20
21     将三维场景飞行到指定的相机处
22     scene.get_flyingOperator().flyTo(camera,1000,SuperMap.Web.Realspace.FlyingMode.JUMP);
23 }

示例

自我评价：

缺点：

1. 飞行直接飞过去，如果camera高度比较低，直接贴着地面飞过去，用户体验相当不好；
2. 飞行的时候，如果设置了一定的tilt角度，跳转过去的时候，定位不准确。

为了解决原始api的这种问题，经过经验总结，现写此种方法分享，如有疑问可以讨论：

基本思路：

在飞行的时候，分为3步骤：

1. 首先从当前位置，视角改为垂直向下，朝向正北，抬高到一定高度（即：tilt:0,heading:0,altitude:n）；
2. 从抬高后的位置，飞行到对应位置，camera姿态不变；
3. camera姿态由垂直向下改为以一定角度查看（目前设置为tilt=60）；

具体代码示例如下：

 1 FlyOpt.prototype.flyToBase=function(p_flyAititude,p_ajustTime,p_longitude,p_latitude,p_altitude,p_flyTime,p_viewRange){
 2     var scene = sceneControl.get_scene();
 3     var _obj=this; // 记录对象
 4
 5     /// 转为正北方向、垂直向下视角，并提升高度
 6     var _c=scene.get_camera();
 7     _c.set_altitude(p_flyAititude);
 8     _c.set_heading(0);
 9     _c.set_tilt(0);
10     scene.get_flyingOperator().flyTo(_c,p_ajustTime,SuperMap.Web.Realspace.FlyingMode.JUMP);
11
12     /// 提升高度后，开始跳转到对应位置
13     setTimeout(function(){
14         var camera = new SuperMap.Web.Realspace.Camera(p_longitude,p_latitude,p_flyAititude);
15
16         //设置相机高度模式
17         camera.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.CLAMP_TO_GROUND);
18
19          //设置相机视角的方位角
20         camera.set_heading(0);
21
22          //设置相机的俯角
23         camera.set_tilt(0);
24
25         //将三维场景飞行到指定的相机处
26         scene.get_flyingOperator().flyTo(camera,p_flyTime,SuperMap.Web.Realspace.FlyingMode.JUMP);
27
28         /// 飞行到位置后，调整俯仰角度
29         setTimeout(function(){
30             var _cc=_obj.getCameraByViewPt(p_longitude,p_latitude,p_altitude,p_viewRange);
31             //
32             var camera = new SuperMap.Web.Realspace.Camera(_cc["x"],_cc["y"],_cc["z"]);
33
34             //设置相机高度模式
35             camera.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.CLAMP_TO_GROUND);
36
37              //设置相机视角的方位角
38             camera.set_heading(_cc["heading"]);
39
40              //设置相机的俯角
41             camera.set_tilt(_cc["tilt"]);
42
43             scene.get_flyingOperator().flyTo(camera,p_ajustTime,SuperMap.Web.Realspace.FlyingMode.JUMP);
44         },p_flyTime+100);
45     },p_ajustTime+100);
46 }

优化后的跳转示例

第1、2步很好实现，主要是第3步：如果设置为定位位置的x,y,z的话，camera视角tilt修改后，目标就不在视角范围内，或者不是正好看着目标。

这种方法怎么解决呢，经过测试，发现一种解决思路，仅供大家参考：

在第三步跳转的时候，故意将目标坐标，向北偏移一定距离，且高度提高一定高度，再调整视角的时候，目标就正好到视角中心。

 1 var _cameraInfo={};
 2     _cameraInfo["x"]=p_x;
 3     /// heading为0
 4     _cameraInfo["heading"]=0;
 5
 6     /// tilt角度
 7     _cameraInfo["tilt"]=60;
 8
 9     ///  默认以向北移动(高度)米, 纬度=距离/111000
10     _cameraInfo["y"]=p_y+p_z/111000.0;
11     _cameraInfo["z"]=p_z+p_range;

第三步示例

注：这里向北偏移 目标坐标z的值，高度增加 目标坐标 altitude+50

自我评价：

该种方法，飞行效果用户体验比较好。

完整代码请查看：http://git.oschina.net/wander_chang/SuperMap_iclient/blob/master/FlyOpt.js