Cesium快速入门

Appearance

相机快速入门 ​

Cesium 的 Camera 是控制三维场景视角的核心对象，管理视角位置、方向、移动动画及交互行为

相机在创建时将查看的默认位置 ​

使用DEFAULT_VIEW_RECTANGLE设置相机的默认位置,值为new Cesium.Rectangle(west, south, east, north)

  • west：西经在[-Pi， Pi]范围内，以弧度为单位
  • south：南纬在[-Pi/2， Pi/2]范围内，以弧度为单位
  • east：东经在[-Pi， Pi]范围内，以弧度为单位
  • north：北纬在[-Pi/2， Pi/2]范围内，以弧度为单位

注意：设置默认位置需要在创建 Viewer 之前设置，否则无效

js
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.99, // 西经
  39.9, // 南纬
  116.41, // 东经
  39.92 // 北纬
);

相机基本参数 ​

js
const camera = viewer.camera;

// 获取相机位置（笛卡尔坐标）
const position = camera.position;
// 获取相机方向矩阵
const directionMatrix = camera.direction;
// 获取相机方位角
const heading = camera.heading;
// 获取相机俯仰角
const pitch = camera.pitch;
// 获取相机滚动角
const roll = camera.roll;
// 获取相机高度（米）
const height = camera.positionCartographic.height;

相机的控制方法 ​

setView（options）：直接定位到指定位置 ​

options:

  • destination：目标位置
  • orientation：
    第一种(常用)：
    • heading：水平方向
    • pitch：垂直方向
    • roll：旋转方向
      第二种：
    • direction：自定义视线方向向量
    • up：定义相机的“上”方向
js
// 1. headingPitchRoll
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.404, 39.915, 1000), // 目标位置
  orientation: {
    heading: Cesium.Math.toRadians(0), // 水平方向
    pitch: Cesium.Math.toRadians(-30), // 垂直方向
    roll: 0, // 旋转方向
  },
});

// 2. directionUp
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.404, 39.915, 1000), // 目标位置
  orientation: {
    direction: new Cesium.Cartesian3(0, 0, -1), // 自定义视线方向向量
    up: new Cesium.Cartesian3(0, 1, 0), // 定义相机的“上”方向
  },
});

flyTo（options）：平滑过渡到指定位置 ​

options:

  • destination：目标位置
  • easingFunction：控制时间在飞行持续时间内的插值方式
  • orientation：同 setView
  • duration：飞行时间
  • complete：飞行完成后的回调函数
  • cancel：取消飞行的回调函数
js
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.404, 39.915, 1000), // 目标位置
  easingFunction: Cesium.EasingFunction.LINEAR_NONE, // 缓动插值，解决在终点卡顿
  orientation: {
    heading: Cesium.Math.toRadians(0), // 水平方向
    pitch: Cesium.Math.toRadians(-30), // 垂直方向
    roll: 0, // 旋转方向
  },
  duration: 5, // 飞行时间
  complete: function () {
    console.log("飞行完成");
  },
  cancel: function () {
    console.log("飞行取消");
  },
});

lookAt（target,offset）：固定视角，观察目标位置 ​

target：目标位置
offset：偏移量

  • Cartesian3 | HeadingPitchRange
js
// 1. Cartesian3
viewer.camera.lookAt(
  Cesium.Cartesian3.fromDegrees(116.404, 39.915, 1000), // 目标位置
  new Cesium.Cartesian3(0, 0, 1000) // 偏移量
);

// 2. HeadingPitchRange
viewer.camera.lookAt(
  Cesium.Cartesian3.fromDegrees(116.404, 39.915, 1000), // 目标位置
  new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0), // 水平方向
    Cesium.Math.toRadians(-30), // 垂直方向
    1000 // 偏移量
  )
);

相机自由移动，可通过按键控制相机 ​

方法描述单位：米类型：Number
moveForward向前移动
moveBackward向后移动
moveLeft向左移动
moveRight向右移动
moveUp向上移动
moveDown向下移动
------------------------------
lookLeft向左旋转
lookRight向右旋转
lookUp向上旋转
lookDown向下旋转
------------------------------
twistLeft向左倾斜
twistRight向右倾斜
js
// 监听键盘事件
document.addEventListener("keydown", function (event) {
  const camera = viewer.camera;
  const distance = 100; // 每次移动的距离
  switch (event.key) {
    case "ArrowUp": // 上按键
      camera.moveForward(distance); // 向前移动
      break;
    case "ArrowDown": // 下按键
      camera.moveBackward(distance); // 向后移动
      break;
    case "ArrowLeft": // 左按键
      camera.moveLeft(distance); // 向左移动
      break;
    case "ArrowRight": // 右按键
      camera.moveRight(distance); // 向右移动
      break;
    case "w": // w按键
      camera.lookUp(distance); // 向上旋转
      break;
    case "s": // s按键
      camera.lookDown(distance); // 向下旋转
      break;
    case "a": // a按键
      camera.lookLeft(distance); // 向左旋转
      break;
    case "d": // d按键
      camera.lookRight(distance); // 向右旋转
      break;
    case "q": // q按键
      camera.twistLeft(distance); // 向左倾斜
      break;
    case "e": // e按键
      camera.twistRight(distance); // 向右倾斜
      break;
    default:
      break;
  }
});

相机常用方法 ​

viewer.camera.computeViewRectangle()：提取视域边界，Demo 案例