Cesium快速入门9：相机动画与交互

一、让相机瞬间飞到指定地点

有同学问："我能不能让镜头像坐飞机一样，'嗖'地飞到天安门广场？"

当然可以！Cesium 已经帮我们封装好了 flyTo 方法，只要一行代码就能搞定。

复制代码

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.3914, 39.88, 2000), // 经度、纬度、高度（米）
  orientation: {
    heading: Cesium.Math.toRadians(0),   // 左右朝向：0° 表示正北
    pitch: Cesium.Math.toRadians(-30),   // 俯仰角：负值表示往地面看
    roll: Cesium.Math.toRadians(0),      // 翻滚角：0° 表示不倾斜
  },
  duration: 3,  // 飞行耗时 3 秒
});

运行后，地球会平滑旋转、下降，最后稳稳停在天安门上空，像电影航拍一样，非常酷！

如果你想"点击按钮再飞"，只要把这段代码放进按钮的点击事件里即可，完全没问题。

二、用键盘实时控制相机

刚才的"自动飞行"很炫，但有时候我们想自己开"飞机"------

按 W 前进，按 S 后退，按 A 左平移，按 D 右平移，甚至抬头、低头、翻滚，全由键盘说了算。

怎么做？分三步：

监听键盘事件
判断按下的是哪个键
调用相机对应的移动/旋转方法

代码直接摆上来（已加中文注释，方便复制粘贴）：

复制代码

// 监听整个页面的按键事件
document.addEventListener('keydown', (event) => {
  // 移动速度 = 当前相机离地高度 ÷ 100，飞得越高动得越快
  const speed = viewer.camera.positionCartographic.height / 100;

  // ============== 平移 ==============
  if (event.code === 'KeyW') {
    viewer.camera.moveForward(speed);   // 沿视线方向前进
  } else if (event.code === 'KeyS') {
    viewer.camera.moveBackward(speed);  // 沿视线方向后退
  } else if (event.code === 'KeyA') {
    viewer.camera.moveLeft(speed);      // 向左平移
  } else if (event.code === 'KeyD') {
    viewer.camera.moveRight(speed);     // 向右平移
  }

  // ============== 旋转视角（左右看） ==============
  else if (event.code === 'KeyQ') {
    viewer.camera.lookLeft(Cesium.Math.toRadians(10));   // 左转 10°
  } else if (event.code === 'KeyE') {
    viewer.camera.lookRight(Cesium.Math.toRadians(10));  // 右转 10°
  }

  // ============== 旋转视角（上下看） ==============
  else if (event.code === 'KeyR') {
    viewer.camera.lookUp(Cesium.Math.toRadians(10));     // 抬头 10°
  } else if (event.code === 'KeyF') {
    viewer.camera.lookDown(Cesium.Math.toRadians(10));   // 低头 10°
  }

  // ============== 翻滚（像飞机做滚筒动作） ==============
  else if (event.code === 'KeyG') {
    viewer.camera.twistLeft(Cesium.Math.toRadians(10));  // 逆时针翻滚 10°
  } else if (event.code === 'KeyH') {
    viewer.camera.twistRight(Cesium.Math.toRadians(10)); // 顺时针翻滚 10°
  }
});

三、实际演示效果

按 W / S：镜头像走路一样前后移动。
按 A / D：左右平移，像螃蟹横着走。
按 Q / E：脑袋左右摇头，视角跟着转。
按 R / F：抬头看天、低头看地。
按 G / H：整个画面像飞机做滚筒飞行动作，逆时针或顺时针旋转。

速度会随高度自动变化：

当你离地面 1000 米时，speed = 10 米/次；

离地面 10000 米时，speed = 100 米/次，

完全不用担心"按烂了键盘还纹丝不动"的尴尬。

四、小结

今天学了两个大招：

用 flyTo 让相机"航拍"到任意坐标。
用键盘事件 + 相机方法，手动开"飞机"，想怎么飞就怎么飞。

大家先把今天的代码跑起来，熟悉一下手感，我们下次见！