cesium相机(camera)控制

camera基础属性:

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

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

    viewer.camera.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
    
  • direction:相机的朝向,指向相机正在查看的目标。

    viewer.camera.direction = new Cesium.Cartesian3(x, y, z);
    
  • up:相机的上方向,用于定义相机的倾斜角度(与地面的垂直方向)

    viewer.camera.up = new Cesium.Cartesian3(x, y, z);
    
  • right:相机的右方向,定义相机横向的方向。

控制相机视角:

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

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() 方法提供了平滑的动画过渡,来控制相机飞行到指定的位置。

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()相机看向某个目标点

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中用于控制相机视角和定位

// 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 来模拟轨迹飞行。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/901274.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

沈阳乐晟睿浩科技有限公司抖音小店领域的强者

在当今数字化浪潮的推动下,电子商务以其便捷性、高效性和广泛的覆盖面,成为了推动经济发展的新引擎。而抖音小店,作为短视频平台上的新兴电商形态,更是凭借其庞大的用户基础、精准的内容推送机制以及独特的购物体验,迅…

方形件组批优化问题

在中国制造 2025 目标背景之下,发展环境保护型、资源节约型的智能制造业已成为制造行业的当务之急。为了应对客户提出的各式各样的产品需求、订单组批难且产品质量 要求高的问题,使用数学模型辅助企业对定制化产品进行组批优化具有重要意义。本文通 过…

2024.7最新子比主题zibll7.9.2开心版源码+授权教程

授权教程: 1.进入宝塔搭建一个站点 绑定 api.zibll.com 域名 并上传 index.php 文件 2.设置伪静态 3.开启SSL证书,找一个能用的域名证书,将密钥(KEY)和证书(PEM格式)复制进去即可 4.在宝塔文件地址栏中输入 /etc 找到 hosts文件并打开&a…

hcia复习篇

计算机网络: 云技术: 云储存---将数据通过计算机网络传输并储存在第三方服务器。(百度网盘) 云计算---分布式计算。(即共享硬件资源) 计算机技术: 文字、图片、视频等---抽象文字。 抽象语言…

【Nginx系列】499错误

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Java应用程序的测试覆盖率之设计与实现(一)-- 总体设计

一、背景 作为测试,如何保证开发人员提交上来的代码都被测试覆盖到,是衡量测试质量的一个重要指标。 本系列文章将要说一说,如何搭建一套测试覆盖率的系统。 包括以下内容: jacoco agent采集执行覆盖率数据jacoco climaven集成jacoco:jacoco-maven-pluginant集成jacoco:…

Linux: network: wireshark IO图的一个问题

今天遇到一个问题,发现wireshark画的IO图,前几秒没有数据,但是根据Raw的pcap看,是有包的,这就迷惑了。 经同事提醒,这个IO在设置了多个画图filter的时候,可能导致开始前几秒没有输出。如下图 这…

HexForge:一款用于扩展安全汇编和十六进制视图的IDA插件

关于HexForge HexForge是一款用于扩展安全汇编和十六进制视图的IDA插件,在该工具的帮助下,广大研究人员可以方便地直接从 IDA Pro 界面数据解码、解密或执行安全数据审计任务。 功能介绍 1、从 IDA 的反汇编或十六进制视图复制原始十六进制;…

安康旅游指南:基于SpringBoot的网站开发实践

第一章 绪论 1.1 研究现状 时代的发展,我们迎来了数字化信息时代,它正在渐渐的改变着人们的工作、学习以及娱乐方式。计算机网络,Internet扮演着越来越重要的角色,人们已经离不开网络了,大量的图片、文字、视频冲击着我…

spring整合使用xml方式整合Druid数据源连接池

1.普通的JDBC数据库连接使用 DriverManager 来获取,每次向数据库建立连接的时候都要将 Connection加载到内存中,再验证用户名和密码(得花费0.05s~1s的时间)。需要数据库连接的时候,就向数据库要求 一个,执行完成后再断…

测试造数,excel转insert语句

目录 excel转sql的insert语句一、背景二、直接上代码 excel转sql的insert语句 一、背景 在实际测试工作中,需要频繁地进行测试造数并插入数据库验证,常规的手写sql语句过于浪费时间,为此简单写个脚本,通过excel来造数&#xff0…

用更多的钱买电脑而不是手机

如果,我们对自己的定义是知识工作者,那么在工作、学习相关的电子设备投入上,真的别舍不得花钱。 需要留意的是,手机,对于大部分在电脑前工作的人,不是工作设备。在我看来,每年投入到电脑的钱&…

Go语言Linux环境搭建以编写第一个Go程序

目录 文章目录 目录Go语言入门1、说明2、CentOS7安装Go3、编写第一个程序3.1、编写程序3.2、运行程序3.3、生成二进制文件4、编写第一个web程序4.1、编写代码4.2、运行程序4.3、测试访问4.4、生成二进制配置Vim-go语法高亮1)、下载和设置Vundle.vim(vim安装插件的工具)2)、…

[Linux网络编程]05-TCP状态和端口复用,shutdown函数(主动方建立/关闭连接状态,被动方建立/关闭连接状态,2MSL时长,TCP其他状态)

一.TCP状态图表示 netstat -apn | grep client 查看客户端网络连接状态 netstat -apn | grep port 查看端口的网络连接状态 二.主动方,被动方TCP连接状态 1. 主动发起连接请求端: CLOSE – 发送SYN – SEND_SYN – 接收 ACK、SYN – SEND_SYN – 发送 A…

查看Chrome安装路

谷歌Google浏览器查看安装路径,浏览器Google Chrome浏览器查看安装路径 chrome://version/ 来源:笔记云

vuex使用modules模块化

1、main.js引入 //引入vuex import store from ./store new Vue({el: #app,router,store,components: { App },template: <App/>,data:function(){return{wbWinList: [] // 定义的变量&#xff0c;全局参数}}, })2、index.js import Vue from vue; import Vuex from …

刷题 - 图论

1 | bfs/dfs | 网格染色 200. 岛屿数量 访问到马上就染色&#xff08;将visited标为 true)auto [cur_x, cur_y] que.front(); 结构化绑定&#xff08;C17&#xff09;也可以不使用 visited数组&#xff0c;直接修改原始数组时间复杂度: O(n * m)&#xff0c;最多将 visited 数…

英语语法笔记

内容源于b站英语兔 目录 一、综述 动作&#xff08;动词&#xff09;&#xff1a; 1.可以独立完成的动作&#xff1a;主语加不及物动词 2.有1个动作的承受者&#xff1a;主语单及物动词宾语 3.有2个承受者&#xff1a;主语双及物动词间接宾语直接宾语 4.只有1个动作承受…

从零开始:构建一个高效的开源管理系统——使用 React 和 Ruoyi-Vue-Plus 的实战指南

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

Kafka-代码示例

一、构建开发环境 File > New > Project 选择一个最简单的模板 项目和坐标命名 配置maven路径 添加maven依赖 <dependencies><!-- https://mvnrepository.com/artifact/org.apache.kafka/kafka-clients --><dependency><groupId>org.apache.kaf…