Cesium 飞入相关方法


官网API地址

1. Camera的flyHome方法

默认位置 Cesium.Camera.DEFAULT_VIEW_RECTANGLE
矩形框即视角范围

flyHome ( duration )Scene/Camera.js 1454

将相机飞到主视图。使用 Camera#.DEFAULT_VIEW_RECTANGLE进行设置3D场景的默认视图。二维和哥伦布视图的主视图显示了整个地图。

NameTypeDescription
durationNumber可选飞行持续时间(以秒为单位)。如果省略,Cesium会尝试根据航班要行驶的距离来计算理想持续时间。请参见 Camera#flyTo
// 默认矩形框设置为亚洲
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(51.096847,9.98438,150.589429,70.671623);
// 将相机飞到主视图。使用 Camera#.DEFAULT_VIEW_RECTANGLE 进行设置3D场景的默认视图。二维和哥伦布视图的主视图显示了整个地图。
let duration = 2;
viewer.camera.flyHome(duration)

2. Camera的flyTo方法

flyTo (options)
将相机从当前位置移动到新位置。

// 1. Fly to a position with a top-down view
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2. Fly to a Rectangle with a top-down view
viewer.camera.flyTo({
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

// 3. Fly to a position with an orientation using unit vectors.
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
        up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
    }
});

// 4. Fly to a position with an orientation using heading, pitch and roll.
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        heading : Cesium.Math.toRadians(175.0),
        pitch : Cesium.Math.toRadians(-35.0),
        roll : 0.0
    }
});

3. Camera的flyToBoundingSphere方法

flyToBoundingSphere (boundingSphere, options )
将相机移到当前视图包含所提供的包围球的位置。
偏移是在以边界球的中心为中心的局部东-北-上参考系中的航向/俯仰/范围。航向角和俯仰角是在局部的东西向北参考系中定义的。航向是从y轴到x轴的角度。间距是从xy平面开始的旋转。正螺距角度在平面下方。负俯仰角在平面上方。范围是到中心的距离。如果范围是零,则将计算范围以使整个边界球都可见。
在2D和Columbus视图中,必须有一个俯视图。摄像机将被放置在目标上方并向下看。上方的高度目标将是范围。标题将与当地北部对齐。

var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15000);
 
// Override behavior of home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
    // Fly to custom position
    viewer.camera.flyToBoundingSphere(boundingSphere);

    // Tell the home button not to do anything
    commandInfo.cancel = true;
});

// Set custom initial position
viewer.camera.flyToBoundingSphere(boundingSphere, {duration: 0});

4. Support Viewer’s zoomTo/flyTo with ImageLayer argument #3567

https://github.com/CesiumGS/cesium/pull/3567

var viewer = new Cesium.Viewer('cesiumContainer');
var layerRectangle = Cesium.Rectangle.fromDegrees(15.2, 10.9, 15.3, 11.0);
var layer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({
    url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}), {
    rectangle : layerRectangle
});
viewer.zoomTo(layer);
//viewer.flyTo(layer);

学习网址
Cesium中使用Primitive API 创建平面
百度坐标拾取工具

小小的感叹一下
平时方法不整理,到头来只是书签越来越多,学到的东西也不能变现。这可能就是写博客的价值吧!!!

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是Cesium飞行的方法和步骤: 1.引入Cesium库和相关依赖库 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cesium飞行漫游</title> <script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css"> <style> #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.js"></script> </body> </html> ``` 2.创建Cesium Viewer对象 ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); ``` 3.创建Cesium Camera对象 ```javascript var camera = viewer.camera; ``` 4.设置相机位置和方向 ```javascript camera.setView({ destination: Cesium.Cartesian3.fromDegrees(116.3,39.9, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: Cesium.Math.toRadians(0) } }); ``` 5.创建Cesium Clock对象 ```javascript var clock = new Cesium.Clock({ startTime: Cesium.JulianDate.fromIso8601('2021-01-01T00:00:00Z'), currentTime: Cesium.JulianDate.fromIso8601('2021-01-01T00:00:00Z'), stopTime: Cesium.JulianDate.fromIso8601('2021-01-02T00:00:00Z'), clockRange: Cesium.ClockRange.LOOP_STOP, clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER, multiplier: 1000 }); viewer.clock = clock; ``` 6.创建Cesium Path对象 ```javascript var path = viewer.entities.add({ name: 'Path', path: { resolution: 1, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.1, color: Cesium.Color.YELLOW }), width: 10 } }); ``` 7.设置Cesium Path对象的位置和方向 ```javascript var positions = [ Cesium.Cartesian3.fromDegrees(116.3, 39.9, 10000000), Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), Cesium.Cartesian3.fromDegrees(116.5, 39.9, 10000000), Cesium.Cartesian3.fromDegrees(116.6, 39.9, 10000000) ]; path.position = new Cesium.CallbackProperty(function(time, result) { var position = Cesium.Cartesian3.fromElements(0, 0, 0, result); var timeInSeconds = Cesium.JulianDate.secondsDifference(time, clock.startTime); var index = Math.floor(timeInSeconds / 10) % positions.length; var nextIndex = (index + 1) % positions.length; var timeOffset = (timeInSeconds % 10) / 10; Cesium.Cartesian3.lerp(positions[index], positions[nextIndex], timeOffset, position); return position; }, false); path.orientation = new Cesium.CallbackProperty(function(time, result) { var timeInSeconds = Cesium.JulianDate.secondsDifference(time, clock.startTime); var index = Math.floor(timeInSeconds / 10) % positions.length; var nextIndex = (index + 1) % positions.length; var position = Cesium.Cartesian3.fromElements(0, 0, 0, result); Cesium.Cartesian3.subtract(positions[nextIndex], positions[index], position); Cesium.Matrix4.fromTranslationQuaternionRotationScale( Cesium.Cartesian3.ZERO, Cesium.Quaternion.IDENTITY, Cesium.Cartesian3.UNIT_SCALE, result ); return result; }, false); ``` 8.创建Cesium Viewer的控制面板 ```javascript var toolbar = new Cesium.Toolbar(viewer.container); toolbar.addDefaultActions(Cesium.viewerCesiumNavigationMixin); ``` 9.实现Cesium Viewer的控制面板功能 ```javascript // 开始飞行 viewer.clock.shouldAnimate = true; // 暂停飞行 viewer.clock.shouldAnimate = false; // 向前飞行 viewer.clock.multiplier *= 2; // 向后飞行 viewer.clock.multiplier /= 2; // 设定路线 positions = [ Cesium.Cartesian3.fromDegrees(116.3, 39.9, 10000000), Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), Cesium.Cartesian3.fromDegrees(116.5, 39.9, 10000000), Cesium.Cartesian3.fromDegrees(116.6, 39.9, 10000000) ]; path.position.setCallback(function(time, result) { var position = Cesium.Cartesian3.fromElements(0, 0, 0, result); var timeInSeconds = Cesium.JulianDate.secondsDifference(time, clock.startTime); var index = Math.floor(timeInSeconds / 10) % positions.length; var nextIndex = (index + 1) % positions.length; var timeOffset = (timeInSeconds % 10) / 10; Cesium.Cartesian3.lerp(positions[index], positions[nextIndex], timeOffset, position); return position; }, false); // 保存路线 var positionsJson = JSON.stringify(positions); // 清空路线 positions = []; path.position.setCallback(function(time, result) { return Cesium.Cartesian3.ZERO; }, false); // 退出飞行 viewer.destroy(); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值