学习【Cesium】第五篇，Cesium相机系统（学不会揍我）

 1. Cesium 相机系统-setView方法：  设置视图位置

 // Cesium 相机系统 --setView
const position = Cesium.Cartesian3.fromDegrees(114.21, 30.55, 600)
this.viewer.camera.setView({
    destination: position, // 相机位置
    orientation: {
        heading: Cesium.Math.toRadians(0), // 水平旋转  -正北方向
        pitch: Cesium.Math.toRadians(-90), // 上下旋转  --俯视朝向
        roll: 0 // 视口翻滚角度
    }
})

以上代码执行后，相机视角定位在绿色的小球这里，如图：

2. Cesium 相机系统-flyHome方法： 将相机飞到主视图

 // Cesium 相机系统 --flyHome   将相机飞到主视图
loadFlyHome() {
    this.loadView()
    // 三秒后飞回主视图
    setInterval(() => {
        this.viewer.camera.flyHome(1)
    }, 3000)
}

以上代码需要结合相机系统其他方法进行联合操作，方能体现其作用，我这边以flyHome和setView联合使用，效果即将相机还原为主视图：

   

3.  Cesium 相机系统-flyTo方法：空中飞行逐步切换视域效果

 // Cesium 相机系统 --flyTo   空中飞行逐步切换视域效果  相对setView视觉效果更出彩
loadFlyTo() {
    const position = Cesium.Cartesian3.fromDegrees(114.21, 30.55, 600)
    this.viewer.camera.flyTo({
        destination: position, // 相机位置
        orientation: {
            heading: Cesium.Math.toRadians(0), // 水平旋转  -正北方向
            pitch: Cesium.Math.toRadians(-90), // 上下旋转  --俯视朝向
            roll: 0 // 视口翻滚角度
        },
    duration: 5   // 动画持续时间
    })
}

以上代码执行后，相机视角定位过程中会有动画效果，如图（地球没加载出来，不过不重要，主要看效果）：

4.  Cesium 相机系统-lookAt方法：场景视角锁定

// Cesium 相机系统 --lookAt   场景视角锁定
loadLookAt() {
    const center =  Cesium.Cartesian3.fromDegrees(114.21, 30.55)  // 目标位置
    const heading =   Cesium.Math.toRadians(50)// 水平旋转  -正北方向
    const pitch =  Cesium.Math.toRadians(-90) // 上下旋转  --俯视朝向
    const range = 2500 // 目标点高度
    this.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))
}

以上代码执行后，场景视角锁定，拖动视图主要以小球视角进行环绕查看，如图：

 5. Cesium 相机系统-viewBoundingSphere方法：飞到视图包含提供的边界球的位置

// Cesium 相机系统 --viewBoundingSphere  将相机飞到当前视图包含提供的边界球的位置。
// 设置相机，以便当前视图包含提供的边界球。
// 偏移量是在以边界球体中心为中心的局部东西向上参考系中的航向/俯仰/范围。航向角和俯仰角在当地东西北上参考系中定义。航向是从 y 轴到 x 轴增加的角度。俯仰是从 xy 平面的旋转。正俯仰角在平面下方。负俯仰角在平面上方。范围是到中心的距离。如果范围为零，则将计算范围以使整个边界球体可见。
// 在 2D 中，必须有自上而下的视图。摄像机将放置在目标上方向下看。目标上方的高度将是范围。航向将根据偏移量确定。如果无法根据偏移量确定航向，则航向将为北。
loadViewBoundingSphere() {
    const position =  Cesium.Cartesian3.fromDegrees(114.21, 30.55, 1500)  // 目标位置
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new             Cesium.HeadingPitchRoll(-90, 0, 0)) // 方向
    this.viewer.entities.add({
        position,
        orientation,
        model: {
            uri: window.CESIUM_BASE_URL + '/SampleData/models/CesiumAir/Cesium_Air.glb', // 模型路径
            minimumPixelSize: 100, // 最小缩放大小
            maximumScale: 10000, // 缩放最大比例
            show: true
        }
    })
this.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 20), new Cesium.HeadingPitchRange(0, 0, 0))
}

以上代码主要以飞机作为实体，将摄像机放置在实体飞机为中心进行局部视角环绕，如下图：

 当然，想要知道其他的方法，在官方文档、实例中也有介绍，我这边也是跟着大神的思路去逐步学习，目前关于相机的方法就举例到此了。下一章，学习地图、地形加载，go go