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、添加飞行控制功能
飞行控制工具箱界面
<div id='toolbar' class="param-container tool-bar">
<span type="button" id="play" class="button black" title="开始">开始</span>
<span type="button" id="pause" class="button black" title="暂停">暂停</span>
<span type="button" id="stop" class="button black" title="退出飞行">退出飞行</span>
<div style="width: 150px; padding-top: 10px;">
<select id="stopList" class="form-control" style="width: 100%;">
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="show-line"> 显示飞行路线
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="show-stop"> 显示飞行站点
</label>
</div>
</div>
飞行控制工具箱界面
飞行控制代码
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');
});
});
网友评论