Cesium初探-相机

在 Cesium 中,相机(Camera)是一个非常重要的概念,它代表了用户观察 3D 场景的视角。相机不仅决定了用户看到的内容,还定义了观察的角度、距离和方向。理解 Cesium 中的相机是如何工作的对于创建有效的 3D 地图和地球应用程序至关重要。

Cesium通过Orientation来确定相机的方向,其设定原理和右手笛卡尔坐标系原理相同,主要包括以下三个参数:

heading( 偏航角): 默认方向为正北(0°),正角度为向东旋转,即左右摇头。

pitch( 俯仰角): 默认角度为-90°,即朝向地面,0°为平视,正角度为仰视,负角度为俯视,即抬头低头。

roll( 翻转角): 默认角度为0°,正角度向右旋转,负角度向左旋转,即左右翻滚。

Cesium 提供了一系列的方法来控制相机的移动和视图的变化:

  1. setView: 用于直接设置相机的位置、方向和视场角。
  2. flyTo: 使相机以动画的方式移动到指定的目标位置。
  3. flyHome: 将相机移动回默认的视图位置。
  4. lookAt: 移动相机使得它看向指定的目标,可以任意旋转视角,但不会改变位置。
  5. viewBoundingSphere: 移动相机以确保给定的边界球体完全可见。
  6. zoomInzoomOut: 改变相机的视场角,从而放大或缩小场景。
javascript 复制代码
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';

var camera, options
onMounted(()=>{
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NmQ2YjQwMC0wOTAzLTQxYWItODliMC1iYTFjMzdiM2U4YzEiLCJpZCI6MjMyMjU4LCJpYXQiOjE3MjI1ODkzNzV9._ql6Oa6Tls-APS5Ag0692Co91xG_QqcEmd4sAo8azJ8'
  const viewer = new Cesium.Viewer('container',{
    
  })
  // 经纬度转笛卡尔
  const cartesian3_1 = new Cesium.Cartesian3.fromDegrees(116, 30, 200)  //经纬度+高度
 

  // 获取场景中的相机
  camera = viewer.scene.camera
  // 定义飞行到目的地的参数
  options = {
      destination : cartesian3_1,
      orientation : {
          heading : Cesium.Math.toRadians(0), // 方位角
          pitch : Cesium.Math.toRadians(-30), // 俯仰角
          roll : 0.0 // 滚转角
      }
    }
})
const setView = ()=>{
  camera.setView(options)
}
const flyTo = ()=>{
  camera.flyTo(options)
}
const lookAt = ()=>{
  const position = Cesium.Cartesian3.fromDegrees(117, 30)
  camera.lookAt(position,new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(-30),
    2000
  ))
}
</script>
相关推荐
程序员清洒1 小时前
Flutter for OpenHarmony:GridView — 网格布局实现
android·前端·学习·flutter·华为
VX:Fegn08951 小时前
计算机毕业设计|基于ssm + vue超市管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·课程设计
0思必得02 小时前
[Web自动化] 反爬虫
前端·爬虫·python·selenium·自动化
LawrenceLan2 小时前
Flutter 零基础入门(二十六):StatefulWidget 与状态更新 setState
开发语言·前端·flutter·dart
秋秋小事2 小时前
TypeScript 模版字面量与类型操作
前端·typescript
2401_892000522 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加提醒实现
前端·javascript·flutter
Yolanda943 小时前
【项目经验】vue h5移动端禁止缩放
前端·javascript·vue.js
VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue酒店管理系统(源码+数据库+文档)
vue.js·spring boot·课程设计
广州华水科技4 小时前
单北斗GNSS形变监测一体机在基础设施安全中的应用与技术优势
前端
EndingCoder4 小时前
案例研究:从 JavaScript 迁移到 TypeScript
开发语言·前端·javascript·性能优化·typescript