企业官网建设流程全解析

做Cesium开发，绕不开camera。上一章我们搭好了viewer，很多人私信问：怎么把视角转到目标位置？怎么飞过去？为什么有时候一旋转地图就“翻车”？这些问题全都指向同一个核心模块——Cesium.Camera。相机不仅是你看地球的窗口，也是所有动态效果、交互控制、多视图展示的地基。这篇我一次把camera的位置、姿态、飞行、事件和应用场景讲透，适合刚学Cesium不久、已经开始写viewer但是对视角控制一知半解的同学，也适合想用相机做雷达扫描、动态光照、多视图对比的进阶玩家。我会尽量用实际代码和踩坑记录来讲，而不是空谈概念。

1. Camera是整个Cesium的“眼睛”——先搞懂它管什么

1.1 相机在Cesium里到底管什么

Cesium的camera，对应的是你在三维地球上观察世界的那个视点。你可以把它理解成一台摄像机：它有个位置，有个朝向，有个上下方向，还有一个决定“视野多大”的视锥体。你看到的地球、模型、雷达扫描圈、动态光照、可视域分析，最终都要通过这台摄像机投影到屏幕上。

所以camera不是“辅助功能”，它是Cesium渲染管线的核心输入之一。viewer.camera和viewer.scene.camera其实是同一个对象，用来控制视点的位置和方向。日常开发里最常见的需求：进入页面定位到某个城市、点击列表飞行到某栋楼、拖拽旋转、模拟无人机绕飞，全部都是在操作camera。

初学者最容易犯的错，就是只记API不记原理。比如用setView不知道怎么计算destination，用flyTo不知道orientation里的heading、pitch、roll是什么。结果就是：代码能跑，但换个方向就出问题，或者相机飞到地底下。所以这一章我先把几何关系讲清楚，再上代码。

1.2 相机的关键属性：position、direction、up、right

在Cesium里，相机的位置用camera.position表示，类型是Cartesian3，也就是一个ECEF世界坐标，单位是米，原点在地球中心。你可能有点懵：为什么不用经纬度？因为Cesium底层是3D数学引擎，用笛卡尔坐标做矩阵运算最方便。日常开发里我们通常用Cesium.Cartesian3.fromDegrees(lon, lat, height)把经纬度转成世界坐标，再传给相机。

相机朝向靠三个互相垂直的单位向量组合出来：direction表示相机镜头朝向，up表示相机的“头顶”方向，right表示相机的“右侧”方向。这三个向量构成一个右手坐标系，也是相机自身坐标系的基向量。很多人不理解为什么要有up和right——明明有了位置和朝向，应该就能确定视角了吧？你可以做个生活化类比：你站在某地看向正前方，这个“看向哪里”只定了direction，但如果你的头向左歪90度，虽然还是看向同一个方向，屏幕上看到的画面却是旋转的。所以Cesium必须用direction、up、right一起定义完整的相机姿态，否则无法确定最终的画面旋转。

还有一个底层矩阵：camera.viewMatrix把世界坐标变换到相机坐标，camera.inverseViewMatrix则把相机坐标变换回世界坐标。配合camera.frustum的投影矩阵，就完成了“世界坐标→相机坐标→裁剪坐标→屏幕坐标”的渲染链路。面试如果被问到“相机相关八股”，这些关系基本是必考项。

2. 绕不开的坐标系与相机姿态：用错一个，视角就偏了

2.1 世界坐标、本地坐标、屏幕坐标怎么换算

Cesium开发里常见的坐标系有三种，建议一次性搞清。

第一种是ECEF世界坐标，即Cartesian3。地球是一个椭球体，坐标原点在地心，X轴指向赤道与零度经线的交点，Z轴指向北极。第二种是以某个点为中心的本地坐标，常选用东北天（ENU），比如以某栋楼为原点，X轴向东、Y轴向北、Z轴向上。第三种是屏幕坐标，即你在页面上看到的以像素为单位的坐标。

很多相机错误都发生在三者混用上。举个典型例子：

// 错误示范：直接把Cartographic结果传给Cartesian3 const carto = viewer.camera.positionCartographic; viewer.camera.setView({ destination: carto, // 这是Cartographic，不是Cartesian3 });

positionCartographic返回的是Cartographic对象，包含经度、纬度、高度，表示上是{longitude, latitude, height}，不是可直接当destination使用的坐标。要转换可以使用：

const carto = viewer.camera.positionCartographic; const destination = Cesium.Cartesian3.fromRadians( carto.longitude, carto.latitude, carto.height );

屏幕坐标和世界坐标的换算，用到的是SceneTransforms：

const screenPosition = Cesium.SceneTransforms.worldToWindowCoordinates( viewer.scene, position );

这在做鼠标拾取、雷达扫描范围可视化时非常常用。你点击屏幕上的点，想知道它对应地球上哪个位置，或者反过来把某个建筑物的坐标投影到屏幕画UI，就用这个接口。

2.2 Heading、Pitch、Roll到底怎么理解

定义相机姿态时，Cesium提供了HeadingPitchRoll三个角。理解它们可以想象你站在一架飞机驾驶舱里：

• Heading（航向角）：机头绕垂直轴旋转，通俗说就是“面向东南西北哪个方向”，0度指向正北，90度指向正东。
• Pitch（俯仰角）：机头向上抬或向下低，正数向上看，负数向下看。
• Roll（翻滚角）：机身绕机头方向旋转，往左倾或往右倾。

在Cesium里，HeadingPitchRoll的构造函数默认使用弧度，所以很多人会写出让人困惑的代码。实际开发中我建议统一使用Cesium.Math.toRadians或Cesium.HeadingPitchRoll.fromDegrees：

const hpr = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(45), Cesium.Math.toRadians(-30), 0 ); // 或 const hpr = Cesium.HeadingPitchRoll.fromDegrees(45, -30, 0);

setView和flyTo里的orientation可以直接接收HeadingPitchRoll对象。这里有一个容易混淆的点：HeadingPitchRoll定义的是“相机的局部姿态”，但最终Cesium需要把它转换成direction、up、right三个向量。转换时可以使用Cesium.Matrix3.fromHeadingPitchRoll和Cesium.Matrix3.multiplyByVector，虽然一般不手动算，但理解这一步对排查问题很有帮助。

2.3 位置、方向、上方向的数学关系

相机本质上是一个刚性变换。固定一个位置，固定一个朝向向量，再固定一个不跟朝向平行的“上参考方向”，就可以用叉积求出right，再用叉积重新算出真正垂直的up。这就是为什么Cesium的setView里只需要destination和orientation，它内部会自动补齐完整的相机基向量。

底层对应的数学工具是Cesium.Matrix4.lookAt，它根据眼睛位置、目标位置和上方向构建一个视图矩阵。Cesium的camera对象内部也有lookAtTransform，可以用来让相机观察某个目标点。

另外一个不能忽略的概念是frustum，中文叫视锥体。默认Cesium相机的frustum是一个透视投影视锥，也就是近大远小的效果。如果你改了frustum.fov（视场角），画面会明显变广角或变长焦；如果改了near和far，会影响物体被裁剪的远近范围。调frustum是动态光照、三维渲染里很常见的优化手段，比如雷达范围很大时，把far设置得太小会导致远距离扫描圈被裁剪掉。

3. Cesium Camera 相机的几种飞行定位方法：直接看代码操作

3.1 setView：瞬间切换到指定视角

setView是最基础、最直接的方法。没有动画，瞬间把视角切换到目标位置。适合页面初始化、从菜单点击切到固定点位、相机同步等场景。

viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(116.397, 39.908, 20000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-60), roll: 0, }, });

这里destination除了可以传Cartesian3，还可以传Rectangle，表示让相机合适地框住一个矩形范围。注意一点：如果你只传destination而不传orientation，Cesium会保留当前相机的方向，直接平移过去。很多人第一次用会疑惑“为什么位置变了，视角还是歪的”，其实就是因为没设置orientation。

3.2 flyTo：带飞行动画，体验更好

绝大多数业务场景我不会用setView，而是用flyTo。它和setView的区别是：相机从当前视角平滑飞过去，用户不会觉得画面突然跳变。可以指定飞行时长、飞行最大高度、缓动函数、取消回调等。

viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.397, 39.908, 20000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-45), roll: 0, }, duration: 3, maximumHeight: 50000, easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT, });

duration单位是秒，默认根据距离自动计算。实际项目里我通常显式传一个2到4秒的duration，避免距离远时飞太久，用户等得心焦。maximumHeight用来限制飞行途中的最高高度，避免视角从地球背面绕过来时穿过整个地球。这也是新手常见问题：从北京飞到纽约，如果没有限制高度，相机飞行路径可能会“穿地”或长时间贴近地表，观感很差。

还有一种常见需求：点击一个实体，飞到它旁边。可以不用camera.flyTo，而是直接viewer.flyTo(entity)，它会根据实体的包围球自动计算合适的相机位置和距离，省去手动算高度。

3.3 lookAt / viewBoundingSphere：锁定目标、环绕查看

当你想盯着某个目标点旋转，比如查看模型细节、模拟雷达扫描，直接用flyTo飞到目标附近后，再把相机模式切换成“锁定目标”，就用lookAt：

viewer.camera.lookAt({ target: Cesium.Cartesian3.fromDegrees(116.397, 39.908, 0), offset: new Cesium.HeadingPitchRange( Cesium.Math.toRadians(0), Cesium.Math.toRadians(-30), 5000 ), });

HeadingPitchRange表示目标为中心、相机相对于目标的方位角、俯仰角和距离。设置之后，如果用户用鼠标拖拽，相机会围绕目标点旋转，而不是自由平移。这个特性在做“围绕模型查看”或“某个点位布设雷达扫描圈”时非常好用。

viewBoundingSphere则是根据一个包围球自动计算最近的合适视角：

const boundingSphere = new Cesium.BoundingSphere( Cesium.Cartesian3.fromDegrees(116.397, 39.908, 0), 2000 ); viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -45, 10000));

它的特点是省心，不需要你根据目标大小手动调距离，适合动态数据出现后自动聚焦。

3.4 手动控制视角：move、rotate、zoom

除了面向目标的飞行，还有一些游戏式、漫游式的相机控制需求。比如无人机巡航、地铁沿线漫游、第一人称视角。Cesium为此提供了一批相对移动方法：

// 沿相机自身方向移动 viewer.camera.moveForward(100); viewer.camera.moveBackward(50); viewer.camera.moveRight(20); viewer.camera.moveUp(10); // 旋转 viewer.camera.rotateUp(0.01); viewer.camera.rotateDown(0.01); viewer.camera.rotateRight(0.01); viewer.camera.rotateLeft(0.01); // 缩放 viewer.camera.zoomIn(100); viewer.camera.zoomOut(100);

这些方法默认每调用一次移动一个固定距离/角度。实际做连续动画时，通常放在viewer.clock.onTick或requestAnimationFrame里，每次前进一小步，就能得到平滑的巡航效果。需要注意：moveForward是沿着相机本身的direction方向，而不是沿地球表面。如果你要保持离地高度不变，需要自己计算方向投影到水平面，否则相机会越飞越高或钻进地里。

4. Cesium Camera 相机的交互事件与控制技巧

4.1 自己控制鼠标拖拽缩放：ScreenSpaceCameraController

Cesium默认的鼠标操作——左键拖拽旋转、右键拖拽平移、滚轮缩放、中键倾斜——都是由ScreenSpaceCameraController实现的。它挂在viewer.scene.screenSpaceCameraController上。

你可以通过它的属性禁止某些交互：

const controller = viewer.scene.screenSpaceCameraController; controller.enableRotate = true; // 允许旋转 controller.enableTranslate = true; // 允许平移 controller.enableZoom = true; // 允许缩放 controller.enableTilt = true; // 允许倾斜 controller.minimumZoomDistance = 50; // 最近缩放距离 controller.maximumZoomDistance = 100000; // 最远缩放距离

minimumZoomDistance和maximumZoomDistance是防止相机穿梭到地底或者飞得太远看不到地球的关键参数。我建议在业务场景里，如果相机只需要在一定范围内观看，就设置这两个数值，能避免很多操作问题。

4.2 监听相机变化：moveStart、moveEnd、changed

很多功能需要知道相机什么时候停下来了，比如飞行完成后加载数据、停止拖拽后保存当前视角、地图静止后再去截图。

Cesium提供了三个常用事件：

viewer.camera.moveStart.addEventListener(() => { console.log('相机开始移动'); }); viewer.camera.moveEnd.addEventListener(() => { const carto = viewer.camera.positionCartographic; console.log('移动结束，当前经纬度：', Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude)); }); viewer.camera.changed.addEventListener((amount) => { console.log('相机持续变化，变化幅度：', amount); });

moveStart和moveEnd是成对的，适合做“飞行中禁用某些按钮”这种UI状态控制。changed事件在相机连续变化时高频触发，适合实时同步多个视图或更新雷达扫描朝向，但性能压力大，回调里不要写重逻辑，必要时做节流。

有一个容易被忽略的点：setView这种瞬间切换也会触发moveStart和moveEnd，但可能因为切换太快，事件顺序是同步的。如果你在moveEnd里读取位置，需要确保相机初始化完成后才监听，否则首次进入页面时会拿到一次空值。

4.3 限制相机不穿地、不出边界

相机穿地和越界是做得越多越容易踩的坑。比较简单的做法是在changed或moveEnd事件里检查相机高度：

viewer.camera.changed.addEventListener(() => { const height = viewer.camera.positionCartographic.height; if (height < 500) { viewer.camera.zoomOut(500 - height); } });

如果你希望更严格地限制在某个矩形区域内，可以对经纬度做判断，越界时强制回到边界附近。但要注意，在changed事件里直接调用setView或zoomOut可能引发事件循环，导致相机抖动。我的经验是：不要每次都强制回跳，而是先判断是否确实越界，然后使用一个很小的校正量，或者把校正逻辑放在requestAnimationFrame里统一处理。还有一点，多视图同步或与three.js联动时，相机事件容易重复触发，记得加防抖。

5. Cesium Camera 相机的高级应用：雷达、多视图、动态光照与three.js联动

5.1 多视图对比：主相机同步从相机

“Cesium多视图对比”是很多可视化大屏会做的功能，比如同时展示全局视角和局部视角。最简单的方法是在页面上创建多个Viewer，然后以其中一个Viewer为主相机，把它的相机参数同步给其他Viewer。

function syncCamera(mainViewer, subViewer) { mainViewer.camera.changed.addEventListener(() => { subViewer.camera.setView({ destination: mainViewer.camera.position, orientation: { heading: mainViewer.camera.heading, pitch: mainViewer.camera.pitch, roll: mainViewer.camera.roll, }, }); }); }

这里有三个坑：第一，多Viewer每个都有独立的Canvas和性能开销，不要开太多；第二，subViewer.camera.setView可能再次触发changed事件，造成回调循环，所以同步时最好加一个标志位跳过当前来源；第三，主相机使用flyTo时，从相机会不断收到更新事件，如果主相机和从相机的视场角不同，最终看到的范围会不一致。如果你需要完全一致的画面，还需要同步camera.frustum.fov和canvas宽高比。

5.2 雷达扫描效果如何依赖相机

雷达扫描是Cesium中很常见的特效，热搜词里的“cesium雷达”“cesium绘制雷达效果”指向同一个需求：在一个地点画一个扫描扇区或雷达波。实现方式多种多样，但底层都绕不开把雷达中心点、扫描半径和当前朝向换算成3D位置，然后用自定义几何体或Material绘制。

其中camera的作用主要在两方面。一是雷达波覆盖范围显示，需要通过camera.viewMatrix或camera.frustum来判断哪些区域在视野内，从而做层级或细节优化；二是当雷达扫描扇区跟随某个实体方向旋转时，需要把heading角转换成雷达扇区的顶点偏移方向。举个例子：你可以拿到雷达中心点的Cartesian3，然后利用Matrix3.fromHeadingPitchRoll生成旋转矩阵，把“雷达初始扇形方向”旋转到目标heading方向。这个过程中如果相机的朝向设置不对，你会得到看起来正确但实际旋转轴偏移的扇形，所以建议先画一个简单的扇形Debug一下。

5.3 动态光照效果和相机的关系

Cesium原生支持多种光照阴影效果，比如太阳阴影、模型自阴影。“cesium 动态光照”通常是希望模拟一个移动光源或者让建筑表面随角度变化出现明暗变化。这时camera扮演的角色是观察者，也是阴影计算的关键输入。

Cesium的阴影映射（Shadow Map）是从光源视角渲染深度图，然后在主相机视角去采样阴影。如果你只设置viewer.shadows = true，感觉阴影不明显，可以尝试把太阳方向设置得更倾斜：

viewer.scene.globe.enableLighting = true; viewer.scene.sun.show = true;

不过这里有一个容易忽略的点：动态光照效果和相机的frustum远近裁剪有直接关联。如果相机far平面设置得太小，远处建筑的阴影会被裁掉；如果near平面设置太大，近处物体会缺失阴影。所以做光照效果时，记得检查相机的frustum.near和frustum.far。

5.4 three.js与Cesium共享GL上下文时的相机同步

搜索热词里有很多“cesium + three.js 共享 gl 上下文”，这是一个比较硬核的方向。通常做法是在同一个canvas上同时渲染Cesium和three.js，或者把two渲染器叠加到three.js场景中。核心难点就是两个渲染器各自维护一套相机，必须保持同步。

我试过一种相对稳定的做法：Cesium作为主渲染器，three.js作为辅助渲染器，每帧把Cesium相机的视图矩阵和投影矩阵交给three.js camera。关键代码如下：

const threeCamera = new THREE.PerspectiveCamera(); function syncThreeCamera() { // Cesium viewMatrix是观察矩阵 threeCamera.matrixAutoUpdate = false; threeCamera.matrix.fromArray(viewer.camera.viewMatrix.clone().toArray()); threeCamera.matrixWorld.fromArray(viewer.camera.inverseViewMatrix.clone().toArray()); threeCamera.projectionMatrix.fromArray(viewer.camera.frustum.projectionMatrix.clone().toArray()); threeCamera.updateMatrixWorld(); }

这里必须注意坐标系的匹配。Cesium是右手坐标系，three.js默认使用右手坐标系（新版本），但Y轴方向等可能存在差异，实际联调时要做一次转换。不要直接把矩阵塞进去就期望完全同步，我踩过坑：three.js里的模型出现在Cesium地球内部，或者角度对不上。建议先输出Cesium和three.js的camera.position/direction，对比确认后再处理模型摆放。

6. Cesium Camera 相机常见问题与排查技巧

6.1 相机飞到奇怪的位置，甚至看不到地球

遇到这种情况，八成是坐标单位混用了。比如把Cartographic直接当成Cartesian3，或者把Cartesian3.fromDegrees返回的对象再当经纬度处理后传给SetView。排查思路很简单：在设置camera前打印destination并确认它是Cartesian3类型，以及每个坐标值是否在合理范围。

6.2 设置heading和pitch后方向不对

这个问题经常是角度单位导致。Cesium很多API默认用弧度，heading: 90并不代表90度，而是90弧度，看起来就像乱转。建议始终用Cesium.Math.toRadians(90)，或者直接Cesium.HeadingPitchRoll.fromDegrees(90, -30, 0)。

6.3 flyTo飞行中被用户拖拽打断

用户点击flyTo后马上拖动地图，飞行一般会被打断。这未必是bug，但业务上可能不希望用户中途打断。我建议在飞行前禁用交互，飞行后恢复：

viewer.scene.screenSpaceCameraController.enableInputs = false; viewer.camera.flyTo({ destination: ..., duration: 3, complete: () => { viewer.scene.screenSpaceCameraController.enableInputs = true; }, cancel: () => { viewer.scene.screenSpaceCameraController.enableInputs = true; }, });

6.4 多视图相机同步失灵或卡顿

如果你做了多视图同步，发现相机一直在“抖动”或“飘”，大概率是同步回调之间互相触发。解决办法是加一个isSyncing标志位，在同步函数里跳过本次来源的重复事件。卡顿方面，则尽量别在changed事件里频繁创建对象和调用setView，可以考虑只在moveEnd时做一次最终同步，或者使用requestAnimationFrame合并多次更新。

6.5 相机和three.js联动时手势方向相反

这是坐标系旋转方向不同造成的。Cesium相机默认使用Z轴向上的地理坐标系，three.js常用Y轴向上的渲染坐标。你在Page里看到的“拖拽方向反了”多数不是Cesium和three.js自身的问题，而是矩阵变换时没有做坐标轴映射。简单的方法是：在两个坐标系之间建立单位向量映射关系，或者在模型导入时统一做一次旋转。不要试图靠修改鼠标事件的方向去硬掰，会越修越乱。

实操避坑速查表

最后分享一个小技巧。每次做一个需要“记住视角”的功能时，不要只存位置，建议把camera.position、camera.heading、camera.pitch、camera.roll和camera.frustum.fov一起存下来。这样下次进入场景可以完整复原视角。我在实际项目中踩过几次坑之后，已经习惯把camera的完整状态序列化到URL参数里，调试和演示都非常方便。这一章的内容把camera基础吃透之后，后面再玩雷达扫描、动态光照、多视图同步，都会顺手很多。