当前位置: 首页 > news >正文

cesium键盘控制相机位置和姿态

       该类主要用于监听键盘事件并在用户按下不同按键时执行相应的相机操作,如改变相机的位置、偏航角、俯仰角和翻滚角,从而实现在三维场景中的漫游。
以下是代码的主要逻辑:
  1. 导入Cesium库,并定义一个flags对象,其中包含了所有可能触发的键盘漫游状态标志。
  2. keyboardRoam 类包含以下方法:
    • start(viewer, setStep): 初始化键盘监听事件,包括keydown和keyup事件,并在每一帧(clock onTick事件)中执行funcTick函数以更新相机状态。同时禁用默认的鼠标移动地图和平移相机的功能。
    • hprSetting(h, p, r): 设置相机的Heading、Pitch、Roll(即偏航角、俯仰角、翻滚角)。
    • getFlagFromKeyboard(k): 根据按下的键盘按键返回对应的按键名称。
  3. funcTick函数中,根据flags对象中的状态标志来更新相机的位置和姿态。
  4. quit()方法用于销毁键盘监听事件以及恢复鼠标移动地图和平移相机的功能。
通过实例化 keyboardRoam 类并调用 start 方法,可以启用键盘漫游功能;调用 quit 方法则停止漫游并恢复默认的相机控制方式。
      // 引入键盘漫游方法import keyboardRoam from "../utils/roam/keyboardRoam";// 键盘控制相机方法初始化keyboard = new keyboardRoam();// 键盘控制相机方法开始keyboard.start(window.viewer, 1)// 键盘控制相机方法结束keyboard.quit();
import * as Cesium from "cesium";
// 定义事件组
let flags = {// 相机位置moveForward: false,moveBackward: false,moveLeft: false,moveRight: false,moveUp: false,moveDown: false,translateFront: false,translateBehind: false,// 相机姿态picthUp: false,picthDown: false,rollLeft: false,rollRight: false,headingLeft: false,headingRight: false,
};
let cameraHeight;
let heading;
let pitch;
let roll;
let funcTick;
/*** 键盘漫游*/
class keyboardRoam {/*** 键盘漫游加载方法* @param: 使用键盘控制地图漫游,* @param {Cesium.Viewer} viewer -cesium地图容器* @param {Number} setStep -相机视角移动步长*/start(viewer, setStep) {let that = this;// 添加键盘监听事件document.addEventListener("keydown",(this.down = function (e) {let flagName = that.getFlagFromKeyboard(e);if (typeof flagName !== "undefined") {flags[flagName] = true;}}),false);// 相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。viewer.scene.screenSpaceCameraController.enableTranslate = false;// 相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。viewer.scene.screenSpaceCameraController.enableTilt = false;document.addEventListener("keyup",(this.up = function (e) {let flagName = that.getFlagFromKeyboard(e);if (typeof flagName !== "undefined") {flags[flagName] = false;}}),false);console.log(funcTick, '0000');// 为每一帧添加监听事件let m = viewer.clock.onTick.addEventListener(  // 键盘按下事件funcTick = () => {let camera = viewer.camera;let ellipsoid = viewer.scene.globe.ellipsoid;cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;// 根据相机高度设置移动距离let moveRate = (cameraHeight / 150.0) * setStep;heading = viewer.camera.heading;pitch = viewer.camera.pitch;roll = viewer.camera.roll;// 根据事件调整相机// 相机的偏航角、翻滚角和俯仰角// 偏航角if (flags.headingLeft) {that.hprSetting(-0.005 * setStep, 0, 0);}if (flags.headingRight) {that.hprSetting(0.005 * setStep, 0, 0);}// 俯仰角if (flags.picthUp) {that.hprSetting(0, 0.01 * setStep, 0);}if (flags.picthDown) {that.hprSetting(0, -0.01 * setStep, 0);}// 翻滚角if (flags.rollLeft) {that.hprSetting(0, 0, 0.01 * setStep);}if (flags.rollRight) {that.hprSetting(0, 0, -0.01 * setStep);}// 向中心点靠近if (flags.moveForward) {camera.moveForward(moveRate);}// 从中心点远离if (flags.moveBackward) {camera.moveBackward(moveRate);}// 相机本身前后左右上下平移if (flags.moveUp) {camera.moveUp(moveRate);}if (flags.moveDown) {camera.moveDown(moveRate);}if (flags.moveLeft) {camera.moveLeft(moveRate);}if (flags.moveRight) {camera.moveRight(moveRate);}// 相机向前平移if (flags.translateFront) {camera.rotateDown(Math.PI / 3600000 * setStep)}// 相机向后平移if (flags.translateBehind) {camera.rotateUp(Math.PI / 3600000 * setStep)}});return m;}// 相机翻滚角设置方法hprSetting(h, p, r) {viewer.camera.setView({orientation: {heading: heading + h,pitch: pitch + p,roll: roll + r,},});}// 监听键盘按下和松开的状态getFlagFromKeyboard(k) {switch (k.key) {// 按字符的Unicode编码// 相机姿态case "ArrowUp":return "picthUp";case "ArrowDown":return "picthDown";case "ArrowLeft":return "headingLeft";case "ArrowRight":return "headingRight";case "j":return "rollRight";case "l":return "rollLeft";// 相机向屏幕中心点前进后退case "i":return "moveForward";case "k":return "moveBackward";// 相机前后左右上下平移case "w":return "translateFront";case "s":return "translateBehind";case "a":return "moveLeft";case "d":return "moveRight";case "q":return "moveUp";case "e":return "moveDown";default:return undefined;}}/*** 销毁键盘漫游事件*/quit() {document.removeEventListener("keydown", this.down, false);document.removeEventListener("keyup", this.up, false);viewer.clock.onTick.removeEventListener(funcTick);// 解除禁用鼠标移动地图事件viewer.scene.screenSpaceCameraController.enableTranslate = true;// 解除视图锁定事件。viewer.scene.screenSpaceCameraController.enableTilt = true;}
}
export default keyboardRoam;

相关文章:

cesium键盘控制相机位置和姿态

该类主要用于监听键盘事件并在用户按下不同按键时执行相应的相机操作,如改变相机的位置、偏航角、俯仰角和翻滚角,从而实现在三维场景中的漫游。 以下是代码的主要逻辑: 导入Cesium库,并定义一个flags对象,其中包含了…...

基于ArrayList实现简单洗牌

前言 在之前的那篇文章中,我们已经认识了顺序表—>http://t.csdnimg.cn/2I3fE 基于此,便好理解ArrayList和后面的洗牌游戏了。 什么是ArrayList? ArrayList底层是一段连续的空间,并且可以动态扩容,是一个动态类型的顺序表&…...

Paddle实现人脸对比

人脸对比 人脸对比,顾名思义,就是对比两个人脸的相似度。本文将用Paddle实现这一功能。 PS:作者肝了整整3天才稍微搞明白实现方法 数据集准备 这里使用百度AI Studio的开源数据集: 人脸数据_数据集-飞桨AI Studio星河社区 (b…...

挖一挖:PostgreSQL Java里的double类型存储到varchar精度丢失问题

前言 大概故事是这样的,PostgreSQL数据库,表结构: create table t1(a varchar);然后使用标准的Java jdbc去插入数据,其基本代码如下: import java.sql.*; public class PgDoubleTest {public static void main(Stri…...

函数对象基本使用

一、函数对象概念 1.重载函数调用操作符的类,其对象常称为函数对象 2.函数对象使用重载的()时,行为类似函数调用,也叫仿函数 本质: 函数对象(仿函数)是一个类,不是一个函数 二、函数对象使用 特点: 函…...

浅谈HTTP

浅谈HTTP 要通过netty实现HTTP服务器(或者客户端),首先你要了解HTTP协议。 HTTP在客户端 - 服务器计算模型中用作请求 - 响应协议。 例如,web浏览器可以是客户端,并且在托管网站的计算机上运行的应用程序可以是服务器。 客户端向服务器提交…...

HarmonyOS NEXT应用开发之@Provide装饰器和\@Consume装饰器:与后代组件双向同步

Provide和Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递,Provide和Consume摆脱参数传递机制的束缚,实现跨层级传递。 其中Provide装饰的变…...

Docker 安装 | 部署MySQL 8.x 初始设置

1、准备工作 如果不想看前面的废话请直接右边目录跳到 运行容器 处 默认你已经有 docker 环境。 Windows 推荐 Docker Desktop (下载地址)并基于 WSL2 运行 Docker 环境 mac 推荐 Orbstack (下载地址)(这个很节省资源&…...

linux三剑客之流编辑器sed

sed(stream editor)是Linux和Unix系统中一个非常强大的文本处理工具。它主要用于对文本数据进行过滤和转换。sed 可以在不打开文件的情况下,直接对输入流进行操作,并且可以将结果输出到标准输出或文件。 基本语法: s…...

【Android Studio】上位机-安卓系统手机-蓝牙调试助手

【Android Studio】上位机-安卓系统手机-蓝牙调试助手 文章目录 前言AS官网一、手机配置二、移植工程三、配置四、BUG五、Java语言总结 前言 提示:以下是本篇文章正文内容,下面案例可供参考 AS官网 AS官网 一、手机配置 Android Studio 下真机调试 …...

怎样把学浪购买的课程下载下来

如何把学浪已购买的课程下载下来?这里就教大家一个方法,利用一个工具轻轻松松把视频下载下来 这个工具我打包成压缩包了,有需要的自己取一下 链接:https://pan.baidu.com/s/1y7vcqILToULrYApxfEzj_Q?pwdkqvj 提取码:kqvj --来自百度网盘超级会员V1…...

SD-WAN如何解决更有性价比地跨境网络问题

云桥通SD-WAN利用智能路由和负载均衡技术,优化数据传输路径,提高网络性能和可靠性。这意味着数据在跨国传输时可以更快到达目的地,减少延迟和丢包率。跨境SD-WAN提高了网络连接速度和质量,使用户能够更快地访问跨国业务所需的资源…...

第15章 File类与IO流

一 java.io.File类的使用 1.1 概述 File类及本章下的各种流,都定义在java.io包下。一个File对象代表硬盘或网络中可能存在的一个文件或者文件目录(俗称文件夹),与平台无关。(体会万事万物皆对象)File 能新…...

C语言基础语法-教案16(从小白到劝退之结构体初阶)

最近给大家争取到一个 深夜福利 保证你在深夜手机刷到 嘎嘎香~ 那就是 大流量卡 缺点:月租太便宜 185GB~ 100分钟通话时长~ 长期套餐~ 畅想自由的气息 流量自由的同时还拥有超长通话,而且免费领取。 名额有限,咱们废话不多说直接上…...

Linux:ip和ip协议的初步认识

文章目录 ip协议基本认识ip协议的报头网段划分ip的类型划分 ip协议基本认识 前面对于TCP的内容已经基本结束了,那么这也就意味着在传输层也已经结束了,那么下一步要进入的是的是网络层,网络层中也有很多种协议,这里主要进行解析的…...

Android12 简单的共享内存驱动实现 参考Ashmem

Android12 共享内存驱动实现 SOC:RK3568 system:Android12 概述: 1. 概述 Ashmem(Anonymous Shared Memory,Android 匿名共享内存),它基于 mmap 系统调用,可以让不同进程将同一段…...

物理安全和逻辑安全在信息安全中的重要作用

在信息时代,信息安全已经成为企业和个人不可或缺的重要组成部分。物理安全和逻辑安全作为信息安全的两大支柱,发挥着至关重要的作用。 什么是物理安全和逻辑安全? 物理安全是指通过技术手段,对计算机设备、网络设备、数据中心等…...

每日一题 --- 滑动窗口最大值[力扣][Go]

滑动窗口最大值 题目:239. 滑动窗口最大值 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1…...

TensorBoard可视化+Confustion Matrix Drawing

for later~ 代码阅读 1. 加载trainset import argparse import logging import os import numpy as npimport torch from torch import distributed from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterfrom backbones import get_…...

012——LED模块驱动开发(基于I.MX6uLL)

目录 一、 硬件原理图 二、 驱动程序 三、 应用程序 四、 Makefile 五、操作 一、 硬件原理图 又是非常经典的点灯环节 ,每次学新语言第一步都是hello world,拿到新板子或者学习新的操作系统,第一步就是点灯。 LED 的驱动方式&#xff0…...

基于springboot实现房屋租赁管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现房屋租赁系统演示 摘要 房屋是人类生活栖息的重要场所,随着城市中的流动人口的增多,人们对房屋租赁需求越来越高,为满足用户查询房屋、预约看房、房屋租赁的需求,特开发了本基于Spring Boot的房屋租赁系统。 …...

168.乐理基础-中古调式概述

如果到这五线谱还没记住还不认识的话去看102.五线谱-高音谱号与103.五线谱-低音谱号这两个里,这里面有五线谱对应的音名,对比着看 如果不认识调号去看112.五线谱的调号(一)、113.五线谱的调号(二)、114.快…...

【项目实战】【Docker】【Git】【Linux】部署V2rayA项目

今天着手了一个全新领域的项目,从完全没有头绪到成功运行,记录一下具体的部署流程 github项目链接V2rayA 一开始拿到以后完全没有抓手,去阅读了一下他的帮助文档 写着能用docker运行,就去下载了一个Docker配置了一下 拉取代码到…...

mac 切换 jdk

查看 mac 上都有哪些版本 /usr/libexec/java_home -V看准版本切换 按前缀切换 比如 export JAVA_HOME/usr/libexec/java_home -v 1.8这样会随机一个 1.8 的 如果想再确定一个比如 openjdk export JAVA_HOME/usr/libexec/java_home -v 1.8.0_292这个方式是临时的&#xff0c…...

MD5加密返回32位密文字符串

前言: 项目中需要调用其他系统的 api 接口,接口使用的是按一定规则生成 MD5 密文作为签名来进行身份验证,本文仅记录 32 位 MD5 密文的生成方式,仅供参考。 什么是MD5 加密? MD5 加密是一种加密算法,MD5…...

npm常用命令技巧

NPM (Node Package Manager) 是 JavaScript 的包管理工具,广泛用于管理项目中的依赖。无论是前端项目还是Node.js后端项目,NPM 都扮演着重要的角色。本文将介绍 NPM 中常用的几个命令,并提供相应的代码示例。 1. 初始化项目:npm …...

intellij idea 使用git撤销(取消)commit

git撤销(取消) 未 push的 commit Git,选择分支后,右键 Undo Commit ,会把这个 commit 撤销。 git撤销(取消) 已经 push 的 commit 备份分支内容: 选中分支, 新建 分支,避免后续因为操作不当,导…...

【计算机网络】四层负载均衡和七层负载均衡

前言 1、分层方式 首先我们知道,在计算机网络中,常用的协议分层方式:OSI和TCP/IP,以及实际生产中使用的协议划分方式。 在OSI中,各层的职责如下: 应用层:对软件提供接口以使程序能使用网络服…...

IP-guard WebServer 任意文件读取漏洞复现

0x01 产品简介 IP-guard是由溢信科技股份有限公司开发的一款终端安全管理软件,旨在帮助企业保护终端设备安全、数据安全、管理网络使用和简化IT系统管理。 0x02 漏洞概述 由于IP-guard WebServer /ipg/static/appr/lib/flexpaper/php/view.php接口处未对用户输入的数据进行严…...

【IoTDB 线上小课 01】我们聊聊“金三银四”下的开源

关于 IoTDB,关于物联网,关于时序数据库,关于开源...你是否仍有很多疑问? 除了自己钻研文档,群里与各位“大佬”的沟通,你是否还希望能够有个学习“捷径”? 天谋科技发起社区小伙伴,正…...

网站扁平化结构和树形结构/网络服务有哪些

一、修改文件所有者 chown newowner 文件/目录 改变所有者 chown newowner:newgroup文件/目录改变所有者和所在组 -R 如果是目录则使其下所有子文件或目录递归生效 案列1:请将/home/aa.txt文件的所有者修改成yaya 案列2:请将/home/zhangsan目录…...

虚拟主机可以建设什么网站/没被屏蔽的国外新闻网站

社会经济的持续发展是靠通用技术的不断出现而持续推动的。所谓通用技术,简单理解就是要有多种用途,应用到经济的几乎所有地方,并且有巨大的技术互补性和溢出效应。 ——理查德利普西(R…...

成都手机网站建/免费下载百度

Matlab 中经常需要对矩阵进行维度上的操作&#xff0c;下面做一个简单的总结&#xff1a; 在Matlab中&#xff0c;不管矩阵的维度是多少&#xff0c;数据在内存中的存储都是按照 “行-列-页” 的顺序进行存储的。比如&#xff1a; >> a [11,12,13; 21,22,23]a <spa…...

网站标题的重要性/网站优化方案

一、Java平台体系及应用场景从1995年Sun Microsystems公司正式推出Java&#xff0c;到2006年时Sun公司将其开源&#xff0c;迄今为止已经有了20年的历史。Java本身已不仅仅只是一门面向对象的编程语言&#xff0c;而是由一系列计算机软件和规范形成的技术体系&#xff0c;这个技…...

网站建站主机/淘宝运营培训班哪里有

1.简介   jstat是一个很强大的JVM内存监视工具。它能对Java应用程序的资源和性能进行实时的命令行的监控,主要包括堆大小和GC情况的监控。 2.命令格式 jstat -<option> [-t] [-h<lines>] <vmid> [<interval> [<count>]] jstat -命令选项 -输出…...

营销型网站的优缺点/域名注册购买

这是一款效果非常炫酷的纯CSS3圆形图片鼠标滑过旋转翻盖特效。该CSS3特效中&#xff0c;当鼠标滑过圆形图片时&#xff0c;图片以顶边的一个定位点为中心向下旋转&#xff0c;显示出下面的圆形说明文本。使用方法HTML结构该特效使用bootstrap网格系统来布局&#xff0c;基本的H…...