cesium 视角 -- 相机系统

介绍： 三个方法实现对Cesium相机视角的控制：

1、 setView

通过定义相机飞行目的地的三维坐标和视线方向，将视角直接切换到所设定的视域范围内

DOME

const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400)
viewer.camera.setView({
    destination: position, // 设定相机目的地
    orientation: { // 相机视口方向
        heading: Cesium.Math.toRadians(0), // 视口方向的水平旋转 即沿着Y轴旋转, 0为正北方向
        pitch: Cesium.Math.toRadians(-90), // 控制视口上下旋转，沿X轴旋转,-90为俯视朝向地面
        roll: 0 // 控制视口的翻转角度，沿Z轴旋转，数值为0 表示不翻转
    },
})

效果展示

特点

视角为直接切换，没有空中飞行的过程，适用于快速切换视角

2、 flyTo

通过定义相机飞行目的地的三维坐标和视线方向，将视角直接切换到所设定的视域范围内 区别与 setView的是 可以设置 飞行时间 有动画效果

DOME

  const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400)
  viewer?.camera.flyTo({
      destination: position,
      orientation: {
        // 相机视口方向
        heading: Cesium.ath.toRadians(0), // 视口方向的水平旋转 即沿着Y轴旋转, 0为正北方向
        pitch: Cesium.ath.toRadians(-90), // 控制视口上下旋转，沿X轴旋转,-90为俯视朝向地面
        roll: 0 // 控制视口的翻转角度，沿Z轴旋转，数值为0 表示不翻转
      },
      duration: 7 // 秒
    })

效果展示

特点： 相对于setView 增加了飞行效果，带来更好的视觉效果

3、 lookAt

通过定义相机飞行目的地的三维坐标和视线方向，将视角直接切换到所设定的视域范围内

DOME

    const center = Cesium.Cartesian3.fromDegrees(116.39, 39.91) // 只需要经纬度
    const heading = Cesium.Math.toRadians(50) // 水平旋转视口角度
    const pitch = Cesium.Math.toRadians(-90) // 水平旋转视口角度
    const range = 2500 // 相机距离目标地点高度
    viewer?.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

效果展示

特点

视角为直接切换，没有空中飞行的过程，适用于快速切换视角 区别为setView的是 视角位置不会再改变，只能改变视角方向

如果你想了解更多关于相机视角的方法，点击这里