Cesium 飞入相关方法

最新推荐文章于 2026-05-15 10:29:55 发布

原创最新推荐文章于 2026-05-15 10:29:55 发布 · 4.8k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

AboutCesium

本文详细介绍了Cesium中Camera的三种飞行方法：flyHome、flyTo 和 flyToBoundingSphere，并提供了具体的使用示例代码。此外还简述了如何通过zoomTo 和 flyTo 方法与ImageLayer结合使用。

文章目录

官网API地址

1. Camera的flyHome方法

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

flyHome ( duration )Scene/Camera.js 1454

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

Name	Type	Description
`duration`	Number	可选飞行持续时间（以秒为单位）。如果省略，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);