supermap 生成飞行路线及实现飞行效果

supermap 的飞行功能可个性化定制对三维模型空间的飞行浏览路线（包括浏览角度、方向、速度等 ），实现沉浸式导航浏览三维模型的目的，效果逼真炫酷，适用于介绍导览城市公共设施配置、风景名胜区景点、大型企业或学校配套建筑等应用场景。

supermap WebGL 3D 文档：http://support.supermap.com.cn:8090/webgl/Build/Documentation/Camera.html

supermap 官网飞行效果示例：http://support.supermap.com.cn:8090/webgl/examples/editor.html#flyRoute

---

一、iDesktop 生成飞行路线文件

1、首先打开 iDesktop 软件，点击菜单栏 【开始】→【工作空间】→【文件型】→选择要打开的工作空间文件（.SMWU格式）

2、点击菜单栏 【飞行管理】→【新建】

飞行管理面板

在飞行管理面板中，可对飞行路线（添加的所有站点）进行统一的参数配置，如设置默认飞行速度，锁定高度、方向角、倾斜角等，当路线制作完成后，可对飞行路线进行浏览、停止、加/减速等操作。上图中已用绿色方框圈出这些操作功能。

3、点击新建后，右侧将出现一个飞行站点管理面板

飞行站点管理面板

该面板主要实现对每个站点参数的个性化设置，在该面板中，可通过场景相机或鼠标拾取方式为飞行添加站点（这些站点会自动连接起来成为飞行线路），并且可以对每一个站点的参数进行更改，可修改的参数已在上图中用红色方框圈出。

（1）建议使用场景相机方式新建站点，它可以自动记录当前视角下的高度、方位角和倾斜角，方便快捷，后续基本不需要再修改参数。

（2）使用鼠标拾取方式新建站点时，点击鼠标左键可新建站点，此时如果需要拖动场景的话，记得点击一下右键取消鼠标拾取状态。

（3）建议只修改高度和速度2个参数，方位角和倾斜角度在新建站点时通过调整场景视角获取。

关于制作三维飞行路线的详细步骤可查看 supermap 三维飞行路线制作视频

4、制作好飞行路线后，保存为 .pfp 文件格式。

二、代码实现飞行效果（WebGL 3D）

飞行效果主要依赖于 cesium 里的2个对象类实现，一个是飞行路线集合对象类 RouteCollection，另一个是飞行管理类 FlyManager，控制飞行的开始、暂停、停止以及站点事件等 。

1、创建飞行路线对象并读取飞行路线文件

var routes = new Cesium.RouteCollection(viewer.entities);

fpfUrl = 'xxx'    // xxx为存放飞行路线文件的路径

routes.fromFile(fpfUrl);

2、初始化当前场景的飞行管理对象

var flyManager = new Cesium.FlyManager({

            scene: scene,

            routes: routes

});

3、添加飞行控制功能

飞行控制工具箱界面 

      开始

      暂停

      退出飞行

     

         

         

     

     

         

              显示飞行路线

         

     

     

         

              显示飞行站点

         

     

 

飞行控制工具箱界面

飞行控制代码

flyManager.readyPromise.then(function () {   // 飞行路线就绪

            var currentRoute = flyManager.currentRoute;     // 获取当前的飞行路线

            currentRoute.isLineVisible = false;           // 不显示飞行线路

            currentRoute.isStopVisible = false;           // 不显示飞行站点标识

            //获取生成飞行文件中的所有站点列表，将数据渲染到 select 选择器中

            var allStops = flyManager.getAllRouteStops();

            var menu = document.getElementById('stopList');

            for (var i = 0, j = allStops.length; i < j; i++) {

              var option = document.createElement('option');

              option.innerHTML = "站点 " + (i + 1);

              option.value = allStops[i].index;

              menu.appendChild(option);

            }

             // 切换站点

            $('#stopList').change(function () {       // 注册站点切换事件

              flyManager && flyManager.stop();

              var index = parseInt($(this).val());     // 站点的索引

              var route = flyManager.currentRoute;

              var stop = route.get(index);

              flyManager.currentStopIndex = index;

              flyManager.viewToStop(stop);

            });

            // 开始飞行

            $('#play').click(function () {

                flyManager && flyManager.play();

            });

            // 暂停飞行

            $('#pause').click(function () {

                flyManager && flyManager.pause();

            });

            // 停止飞行

            $('#stop').click(function () {

                flyManager && flyManager.stop();

               // 设置停止飞行时切回的场景

                scene.camera.flyTo({

                  destination: Cesium.Cartesian3.fromDegrees('目标经度', '目标纬度'),

                  orientation: {

                    heading: Cesium.Math.toRadians(360.0),    // 方位角

                    pitch: Cesium.Math.toRadians(-30.0),         // 俯仰角

                    roll: 0                                                            // 滚动角

                  }

                });

            });

           //控制是否显示飞行线路

            $('#show-line').change(function(){

                currentRoute.isLineVisible = $(this).prop('checked');

            });

            //控制是否显示飞行站点标识

            $('#show-stop').change(function(){

                currentRoute.isStopVisible = $(this).prop('checked');

            });

});