Skip to content

视角

Cesium中,我们确定的视角,需要设置相机的位置和方向

destination用于设置相机的位置;orientation用于设定相机的方向

相机的方向由三个参数决定:heading(偏航角)、pitch(俯仰角)和 roll(翻滚角),这些角度都是以弧度为单位的

  • heading:偏航角,表示相机绕垂直轴旋转的角度,正值表示顺时针旋转,负值表示逆时针旋转,默认值为0
  • pitch:俯仰角,表示相机绕水平轴旋转的角度。正值表示向上旋转,负值表示向下旋转,默认值为-90
  • roll:翻滚角,表示相机绕其视线方向旋转的角度。正值表示顺时针旋转,负值表示逆时针旋转,默认值为0

常见的相机视角控制:

  • Camera.setView(options): 立即设置相机位置和朝向

  • Camera.zoomIn(amount): 沿着相机方向移动相机。

  • Camera.zoomOut(amount): 沿着相机方向远离

  • Camera.flyTo(options) : 创建从一个位置到另一个位置的相机飞行动画。

  • Camera.lookAt(target, offset): 依据目标偏移来设置相机位置和朝向。

  • Camera.move(direction, amount) : 沿着direction方向移动相机。

  • Camera.rotate(axis, angle): 绕着任意轴旋转相机。


setView

setView用于设置相机飞行目的点的三维坐标和视角,没有飞行过程,直接定位到设定的视域范围,用于快速切换视角

js
const position = Cesium.Cartesian3.fromDegrees(120, 30, 20000)
viewer.camera.setView({
    destination: position,
    orientation: { //默认(0,-90,0)
      // 需要将角度转化为弧度的形式
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(90),
      roll: Cesium.Math.toRadians(0)
    }
})

flyTo

flyTo是快速切换视角,带有飞行动画,可以设置飞行时长

js
const position = Cesium.Cartesian3.fromDegrees(120, 30, 20000)
viewer.camera.flyTo({
      destination: position,
      orientation: {
        heading: Cesium.Math.toRadians(20),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: 0.0
      },
      duration: 3,   // 设置飞行器动画时间
 })

Released under the MIT License.