cesium相机(camera)控制

camera基础属性:

Cesium 中的相机通过 viewer.camera 来获取和操作。

position:相机的位置,用 Cartesian3 坐标表示,表示的是相机在世界坐标系中的绝对位置。

javascript 复制代码
viewer.camera.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

direction:相机的朝向,指向相机正在查看的目标。

javascript 复制代码
viewer.camera.direction = new Cesium.Cartesian3(x, y, z);

up:相机的上方向,用于定义相机的倾斜角度(与地面的垂直方向)

javascript 复制代码
viewer.camera.up = new Cesium.Cartesian3(x, y, z);

right:相机的右方向,定义相机横向的方向。

控制相机视角:

setView() 是 Cesium 中一个常用的方法,用于设置相机的视图,包括位置、目标点和相机的方向。

javascript 复制代码
viewer.camera.setView({
   // 相机的位置
  destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),  
  // 相机方向
  orientation: {

// 水平旋转角度,从正北顺时针旋转到目标方向的角度
    heading: Cesium.Math.toRadians(heading),  
// 朝向的方位角,即相机绕着地心的水平方向旋转,范围: 0-2π
//0   - 正北
//π/2 - 正东
// π   - 正南
// 3π/2 - 正西


//直旋转角度,从水平面向上/向下的角度
    pitch: Cesium.Math.toRadians(pitch),      
// 俯仰角,即相机绕着横轴的上下旋转,范围: -π/2 到 π/2
// π/2   - 正上方(90°)
// 0     - 水平(0°)
// -π/2  - 正下方(-90°)

//相机自身的旋转角度
    roll: 0                                   
// 滚转角,即相机绕着前后轴的旋转,范围: -π 到 π
// 0     - 正常
// π     - 倒置
// π/2   - 右倾斜90°
// -π/2  - 左倾斜90°

  }
});

flyTo() 方法提供了平滑的动画过渡,来控制相机飞行到指定的位置。

javascript 复制代码
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
  orientation: {
    heading: Cesium.Math.toRadians(heading),
    pitch: Cesium.Math.toRadians(pitch),
    roll: 0
  },
  duration: 3,  // 飞行持续时间,单位秒
  complete: function() {
    console.log("Fly complete!");
  }
});

lookAt()相机看向某个目标点

javascript 复制代码
var target = Cesium.Cartesian3.fromDegrees(120.0, 30.0);
viewer.camera.lookAt(target, new Cesium.Cartesian3(0.0, 0.0, 5000.0));  // 相机距离目标5000米

zoomTo是Cesium中用于控制相机视角和定位

javascript 复制代码
// viewer.zoomTo 实际上是对 camera.viewBoundingSphere 的封装
viewer.zoomTo(target, offset);  

// 等同于
viewer.camera.viewBoundingSphere(boundingSphere, offset);

// 应用
// 1. 飞向实体
viewer.zoomTo(entity);
// 2. 飞向实体集合
viewer.zoomTo(viewer.entities);

// 3. 飞向数据源
viewer.zoomTo(dataSource);

相机事件:

相机轨迹飞行:

Cesium 还可以让相机沿着一条预设的轨迹飞行,比如沿着多段 Cartesian3 位置点。可以使用 flyTo 配合 Polyline 来模拟轨迹飞行。

javascript 复制代码
var positions = [
  Cesium.Cartesian3.fromDegrees(120.0, 30.0, 5000),
  Cesium.Cartesian3.fromDegrees(121.0, 30.5, 5000),
  Cesium.Cartesian3.fromDegrees(122.0, 31.0, 5000)
];

viewer.camera.flyTo({
  destination: positions[0],
  complete: function() {
    viewer.camera.flyTo({
      destination: positions[1]
    });
  }
});

视觉化理解相机:

假设你是摄影师,相机属性就像这样:

  1. 你站在哪里? -> position
  2. 你看向哪里? -> direction
  3. 你的头顶朝向哪里? -> up
  4. 你的右手指向? - right
  5. 你水平转动脖子左右转头 -> heading
  6. 你点头或抬头 -> pitch
  7. 你歪着头 -> roll
相关推荐
majingming1235 小时前
FUNCTION
java·前端·javascript
A_nanda6 小时前
Vue项目升级
前端·vue3·vue2
SuperEugene6 小时前
Axios 接口请求规范实战:请求参数 / 响应处理 / 异常兜底,避坑中后台 API 调用混乱|API 与异步请求规范篇
开发语言·前端·javascript·vue.js·前端框架·axios
abigale036 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
Setsuna_F_Seiei7 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
新缸中之脑7 小时前
追踪来自Agent的Web 流量
前端
wefly20177 小时前
从使用到原理,深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
英俊潇洒美少年8 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
kyriewen118 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年9 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js