cesium 之三维漫游飞行效果实现篇内容概览本篇实现 cesium 三维漫游飞行效果，效果图如下：实现的思路初始

内容概览

1.基于cesium 实现三维漫游飞行效果
2.源代码 demo 下载

本篇实现 cesium 三维漫游飞行效果，效果图如下：

实现的思路

初始化函数

Init:function(cesium,drawHelper){ this.cesium = cesium; //cesium对象 this.drawHelper = drawHelper;//drawHelper对象 this.InitEvent(); this.loadData(); },

三维漫游的初始化参数 cesium、drawHelper，其中 cesium 是 cesium 创建对象，drawHelper 是绘制工具创建对象；InitEvent() 界面监听事件；loadData() 漫游列表信息

漫游路线列表信息

loadData:function () { //请求三维漫游轨迹 $.ajax({ url: "/information/fly/queryAll", type: 'post', async: true,//异步 dataType: 'json', success: function (data) { var html='' if (data.length>0) { for(var i=0;i<data.length;i++){ var flydata=data[i]; html+='<tr>'+ '<td><a style="color:#fff;text-decoration:none;font-size:12px;">'+flydata.name+'</a></td>'+ '<td><button class="btn btn-default btn-xs" style="color:#fff;">飞行</button></td>'+ '<td><button class="btn btn-default btn-xs" style="color:#fff;">修改</button></td>'+ '<td><button class="btn btn-default btn-xs" style="color:#fff;">删除</button></td>'+ "<td><a style='color:black;text-decoration:none;font-size:13px;'>" + flydata.id + "</a></td>" + "<td><a style='color:black;text-decoration:none;font-size:13px;'>" + flydata.geojson + "</a></td>" + "<td><a style='color:black;text-decoration:none;font-size:13px;'>" + flydata.position + "</a></td>" + "<td><a style='color:black;text-decoration:none;font-size:13px;'>" + flydata.orientation + "</a></td>" + '</tr>'; }$ ("#overFly_table tbody").html(html); $('#overFly_table').find('td:eq(4)').hide();//隐藏id字段列$ ('#overFly_table').find('td:eq(5)').hide();//隐藏geojson字段列 $('#overFly_table').find('td:eq(6)').hide();//隐藏position字段列$ ('#overFly_table').find('td:eq(7)').hide();//隐藏orientation字段列 //表格---行点击事件 bxmap.FlyCesium.flyTableOnclick(); } else { } } }); }
监听事件

开始飞行

//开始飞行 $("#start_Fly3DPaths").click(function(){ bxmap.FlyCesium.cesium.showFly3DPaths(bxmap.FlyCesium.draw3DObj); }); /** * 飞行漫游路径 * @method showFly3DPaths * @param pathsData 飞行路径信息,格式如下:{"orientation":{"heading":2.411783930363565,"pitch":-0.21097267398444197,"roll":0.0015622392231300353},"position": {"x":-2206260.239730831,"y":5510911.392077349,"z":2331987.10863007}, "geometry":{"type": "LineString", "coordinates": [[101.80089882736969, 26.60700234866561], [101.80082205161088, 26.607156056057718]]} } * @param position 飞行路径跳转位置 * @return * function computeCirclularFlight() { var property = new Cesium.SampledPositionProperty(); for (var i = 0; i < position.length; i++) { if (i == 0) { var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()); //var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 1170); var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 0); property.addSample(time, _position); } if (i < 10000 && i > 0) { var position_a = new Cesium.Cartesian3(property._property._values[i * 3 - 3], property._property._values[i * 3 - 2], property._property._values[i * 3 - 1]); if (i < 976) { //var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 1170); var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 0); } else if (i > 975 && i < 986) { //var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 1170 + 20 * (i - 980)); var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 0); } else if (i > 985) { //var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 1170 + 200); var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 0); }
```
                        var positions = [Cesium.Ellipsoid.WGS84.cartesianToCartographic(position_a), Cesium.Ellipsoid.WGS84.cartesianToCartographic(_position)];
                        var a = new Cesium.EllipsoidGeodesic(positions[0], positions[1]);
                        var long = a.surfaceDistance;
                        var _time = long/50;
                        var time = Cesium.JulianDate.addSeconds(property._property._times[i - 1], _time, new Cesium.JulianDate());

                        property.addSample(time, _position);
                    }
                }
                return property;
```
}
暂停飞行

//暂停飞行 $("#pause_Fly3DPaths").click(function(){ bxmap.FlyCesium.cesium.pauseFly3DPaths(); });
向前飞行

//向前飞行 $("#playForward_Fly3DPaths").click(function(){ bxmap.FlyCesium.cesium.playForwardFly3DPaths(); });
向后飞行

//向后飞行 $("#playReverse_Fly3DPaths").click(function(){ bxmap.FlyCesium.cesium.playReverseFly3DPaths(); });
退出飞行

//退出飞行 $("#stop_Fly3DPaths").click(function(){$ ("#cesiumFly3DPaths").click(); bxmap.FlyCesium.cesium.stopFly3DPaths(); });
设定路线

//设定路线 $("#draw_Fly3DPaths").click(function(){ if(!bxmap.FlyCesium.drawHelper){ bxmap.FlyCesium.drawHelper = new DrawHelper(bxmap.FlyCesium.cesium.cesiumViewer); } bxmap.FlyCesium.draw3DObj = bxmap.FlyCesium.cesium.DrawFly3DPaths(bxmap.FlyCesium.drawHelper); });
保存路线

var draw3DObj=JSON.stringify(bxmap.FlyCesium.draw3DObj); //将JSON对象转化为JSON字符 var TbFly={name: $("#FlyAdd_name").val(),geojson:draw3DObj}; //保存三维漫游轨迹$ .ajax({ url: GLOBAL.domainRest + "/information/fly/saveOrUpdate", type: 'post', async: true,//异步 dataType: 'json', data:TbFly, success: function () { $("#overFlyClick").click(); jDialog.dialog({ title: "提示信息", modal: true,// 非模态，即不显示遮罩层 autoClose: 1000, content: "保存成功" }); dialog.close(); bxmap.FlyCesium.cesium.clearFly3DPaths(); } });

cesium 之三维漫游飞行效果实现篇

内容概览

实现的思路

link==>