Cesium中常用到的5种相机定位方法详解，每种都适用于不同的场景

大家好，我是日拱一卒的攻城师不浪，专注可视化、数字孪生、前端提效、nodejs、AI学习、GIS等学习沉淀，这是2024年输出的第29/100篇文章。
交流合作：brown_7778

前言

有的小伙伴经常跟我吐槽，说Cesium的API过多，密密麻麻上百个类，看着让人头大。

其实大多数人第一次接触都会有这种感觉，有点让人望而却步。

今天我就来分享下在Cesium中常用到的5中相机Camera定位的方式，并且每一种的用途都有所不同。

Camera

相机主要是为了控制视角移动、旋转、漫游等功能；

在飞行定位前，我们首先要知道往哪飞，所以需要知道点位的信息，无论是笛卡尔坐标还是经纬度坐标都可；

flyTo 过渡飞行（有动画）

const { camera } = window.__viewer;
camera.flyTo({
        // 从以度为单位的经度和纬度值返回笛卡尔3位置。
        destination: Cartesian3.fromDegrees(120.36, 36.09, 40000),
        orientation: {
            heading: Math.toRadians(0.0),
            pitch: Math.toRadians(-90),
            roll: 0.0,
        },
        duration: 3, // 飞行时间（s）
    });

代码解析

• destination：接受两种类型，一个是Cartesian3，我们这里用鼠标点击获取到经纬度之后，转换成笛卡尔坐标系传递。另一个类型是Rectangle，这个我们在下边讲解。

• orientation（欧拉角）：调整相机视角方向的；

• duration：飞行时间，单位秒；

orientation欧拉角

这个参数相当于欧拉角的概念，我们重点说一下这个怎么理解，它有3个参数：heading、pitch、roll，我们用一架飞机和人头做示意图讲解

再结合笛卡尔坐标系示意图：

• heading（Yaw）：以Z轴为中心旋转，单位弧度，控制机头的朝向位置，左右摆头；

• pitch：以Y轴为中心旋转，单位弧度，控制飞机的起降朝向，上下摆头；

• roll：以X轴为中心旋转，单位弧度，控制飞机的侧翻角度；

如何判断所传弧度的正负值？

• heading：绕着Z轴负方向，顺时针旋转为正；

• pitch：绕着Y轴负方向，顺时针旋转为正；

• roll：绕着X轴正方向，顺时针旋转为正；

setView 瞬移（无动画）

相机直接瞬间移动到指定位置

const setView = () => {
    camera.setView({
        destination: Cartesian3.fromDegrees(120.36, 36.09, 40000),
        orientation: {
            heading: Math.toRadians(0.0),
            pitch: Math.toRadians(-90),
            roll: 0.0,
        },
    });
};

flyToBoundingSphere 指定边界

const flyBounding = () => {
    const boundingSphere = new BoundingSphere(
        Cartesian3.fromDegrees(120.36, 36.09, 0),
        40000
    );
    camera.flyToBoundingSphere(boundingSphere, {
        duration: 3,
    });
};

• BoundingSphere：具有中心和半径的包围球，第一个参数是指定中心点，第二个参数是球体半径，单位m；

flyTo 飞行至指定模型

当我们在场景里渲染了一个3D模型，但是找不到的时候，可以使用__viewer.flyTo（tileset）将相机自动定位到模型位置；

const tileset = new Cesium.Cesium3DTileset(tilesetJson);
__viewer.flyTo(tileset);

由于我们还未讲到3D Tile模型加载，所以具体细节放到对应章节讲解。

zoomTo 相机追踪

当你创建好entity实例之后，可以直接将视角定位到实例的可视区域；

const entity = __viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: "../images/Cesium_Logo_overlay.png",
      sizeInMeters: true,
    },
  });

  __viewer.zoomTo(entity);

结语

本文是作者的系列课程**《Cesium从入门到实战》**其中的一小节内容，基于从解决小伙伴们的烦恼的角度出发：

• Cesium的API过多，看着头大；
• 想系统的学习却又无从下手；
• 缺乏3D渲染相关的基础知识；
• 没有系统的教程，遇到问题没人问；

具体课程介绍：https://ww7rybwvygd.feishu.cn/docx/PG1TdAhK0oASyZxluGqciO7BnSg

如果想自学的也可以参考我的【开源项目】：https://github.com/tingyuxuan2302/cesium-vue3-vite

有需要进技术产品开发交流群(可视化&GIS)可以加我：brown_7778（备注来意），也欢迎数字孪生可视化领域的交流合作。

最后，如果觉得文章对你有帮助，也希望可以一键三连👏👏👏，支持我持续开源和分享~