Cesium 限制相机倾斜角(pitch)滑动范围

1.效果


 

2.思路

    在项目开发的时候,有一个需求是限制相机倾斜角,也就是鼠标中键调整视图俯角时,不能过大,一般 pitch 角度范围在 0 至 -90之间,-90刚好为正俯视。

    在网上查阅了很多资料,发现并没有一个合适的解决方案,于是自个研究了半天,终于实现了,下面是我的解决方案。

(1)首先是 viewer.camera.changed.addEventListener 监听相机移动,同时不断获取相机状态,例如 pitch、heading、roll 参数等,后面会用到。

(2)设置最大容许角度,我这里设置了 -10 度,在相机监听中,判断相机 pitch 是否超过最大容许角度。

(3)当相机 pitch 大于 -10度时,停止相机监听(这是关键),同时先禁止鼠标中键移动改变视图倾斜角。最后就是视角修复,前面获取的相机参数这里就用到了,使用 viewer.camera.flyTo() 进行视角修正。

(4)在 viewer.camera.flyTo() 方法的成功回调中(complete)再次开启相机监听,当然不要忘记恢复鼠标中键移动改变视图。


 

3.代码

      _this.viewer.camera.changed.addEventListener(cameraChanged); //监听相机移动function cameraChanged() {// 获取当前相机的状态var camera = _this.viewer.camera;var pitch = camera.pitch;var minPitch = Cesium.Math.toRadians(-10); //角度只能再-10 至 -90之间var heading = camera.heading;var roll = camera.roll;// 当俯角超出设定角度if (pitch >= minPitch) {_this.viewer.camera.changed.removeEventListener(cameraChanged) // 先取消监听// 先静止鼠标中键对相机倾斜角的移动_this.viewer.scene.screenSpaceCameraController.enableTilt = false; // 使用该方法修正一点点视角_this.viewer.camera.flyTo({destination: _this.viewer.camera.position,orientation: {heading: heading,pitch: Cesium.Math.toRadians(-12),roll: roll},duration: 0.5,// 当视角修正完成,再次开启监听complete: function () {_this.viewer.scene.screenSpaceCameraController.enableTilt = true;_this.viewer.camera.changed.addEventListener(cameraChanged);},})}}

 

4.最后

    这里的方法还是有局限性,需要时刻监听相机变化,非常影响性能。不知道还有没有其他办法,欢迎各位大佬在评论区指正。

(ps:如果文章对你有帮助,可以点个赞鼓励下博主噢!)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Navicat for MySQL 查主键、表字段类型、索引

针对Navicat 版本11 ,不同版本查询方式可能不同 1、主键查询 (重点找DDL!!!) 方法(1) :右键 - 对象信息 - 选择要查的表 - DDL - PRIMARY KEY 方法(2&…

软考系分:今日成绩已出

前言 今年报考了11月份的软考高级:系统分析师。 考试时间:11月9日。 总体感觉偏简单,但是知识点记得不牢,估计机会不大。 今日 12.11 ,成绩已出,每科总分 75分,全部45分以上为通过。 成绩总…

Linux学习笔记15 何为HDD,SSD?sata?PCIE?分区,MBR,GPT分区的理解

Linux学习怎么能不知道电脑的重要组成硬盘的知识呢? 前文有学习文件系统的概念。介绍了Linux组织文件的方式和文件的分类。 但是最初的时候,最先有的并不是文件系统。而是磁盘。 要我说,最关键的那句话就是:分区存在自己的文件…

angular图表echarts设置

angular框架ngx-echarts图表的配置 图表高度设置 默认高度是400px 可以自己动态设置容器高度 <div echarts nz-row nzJustify"start" [options]"option" [style.height]"option.echartHeight"></div>option.echartHeight‘600px’…

springboot402航班进出港管理系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统航班进出港管理系统信息管理难度大&#xff0c;容错率低…

umi实现动态获取菜单权限

文章目录 前景登录组件编写登录逻辑菜单的时机动态路由页面刷新手动修改地址 前景 不同用户拥有不同的菜单权限&#xff0c;现在我们实现登录动态获取权限菜单。 登录组件编写 //当我们需要使用dva的dispatch函数时&#xff0c;除了通过connect函数包裹组件还可以使用这种方…

【云原生知识】Kubernets实践-前端服务如何访问后端服务

文章目录 概述步骤1&#xff1a;部署后端服务步骤2&#xff1a;配置Nginx步骤3&#xff1a;创建Nginx服务总结 如何确保 Nginx 能持续访问后端服务&#xff1f;相关文献 概述 假设你正在使用Kubernetes作为容器云平台&#xff0c;以下是如何配置Nginx以及相关服务&#xff0c;…

MySQL中count(*)、count(1)和count(字段名)有什么区别

MySQL中COUNT(*)、COUNT(1)和COUNT(字段名)的区别&#xff1a; 计数类型描述是否计算NULL值性能考虑COUNT(*)计算包括所有列的行数是&#xff0c;不区分列值是否为NULL通常最优&#xff0c;因为不需要检查特定列的值COUNT(1)功能上与COUNT(*)等价&#xff0c;计算行数是&#…

【计算机网络层】数据链路层 :局域网和交换机

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f3af;局域网 &#x1f6a6;局域网…

C# 属性(Property)

C# 属性(Property) C# 中的属性(Property)是一种用于访问和设置类或结构成员的值的特殊类型的方法。属性允许开发者以字段的形式访问方法,提供了更为安全和灵活的数据封装。在本文中,我们将深入探讨 C# 属性的概念、用途、以及如何有效地使用它们。 属性的定义 属性由…

活动预告 |【Part2】Microsoft 安全在线技术公开课:安全性、合规性和身份基础知识

课程介绍 通过参加“Microsoft 安全在线技术公开课&#xff1a;安全性、合规性和身份基础知识”活动提升你的技能。在本次免费的介绍性活动中&#xff0c;你将获得所需的安全技能和培训&#xff0c;以创造影响力并利用机会推动职业发展。你将了解安全性、合规性和身份的基础知…

浏览器定制 | Windows11 编译 Chromium 133.0.6885.0(截稿前Chromium最新版之编译篇[一])

序章回顾 其实&#xff0c;在此之前&#xff0c;我已经发表过如何在Windows下编译Chromium及前期环境准备的系列文章了。 那么&#xff0c;既然之前已然撰写过了&#xff0c;缘何又出这么一篇类似的文章呢&#xff1f; 倘若你看过我那几篇关于windows编译Chromium的系列文章…

【vue2】el-select,虚拟滚动(vue-virtual-scroller)

需求背景​​​​​​ vue2+element-ui项目中,当el-select中数据量较大时(超出5000个dom节点),会导致页面加载和渲染卡顿、el-select下拉列表延迟展开。 在现在的el-select的基础上使用分页或者虚拟列表的形式去处理大量的下拉菜单,可以保证页面的正常渲染及el-select的…

使用webrtc-streamer查看实时监控

摄像头配置&#xff08;海康摄像头为例&#xff09; 摄像头视频编码应改成H264格式 webrtc-streamer下载 webrtc-streamer下载地址 下载后解压出来双击运行&#xff0c;端口默认8000 VUE2项目引入文件 在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“…

Android四大组件——Activity(二)

一、Activity之间传递消息 在&#xff08;一&#xff09;中&#xff0c;我们把数据作为独立的键值对进行传递&#xff0c;那么现在把多条数据打包成一个对象进行传递&#xff1a; 1.假设有一个User类的对象&#xff0c;我们先使用putExtra进行传递 activity_demo06.xml <…

MySQL其四,各种函数,以及模拟了炸裂函数创建用户等操作

目录 一、MySQL中的函数 1、IFNULL 2、IF 3、case &#xff08;难点&#xff09; 4、exists(难) --存在的意思 二、常见的函数 1、字符串函数 2、数学函数 3、日期函数 &#xff08;使用频率不是很高&#xff09; 4、其他函数 5、关于字符集的问题 6、mysql炸裂函数…

泷羽Sec-Burp Suite自动刷漏洞-解放双手

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…

CSS在线格式化 - 加菲工具

CSS在线格式化 打开网站 加菲工具 选择“CSS在线格式化” 或者直接访问 https://www.orcc.online/tools/css 输入CSS代码&#xff0c;点击左上角的“格式化”按钮 得到格式化后的结果

[vscode] 创建erlang gen_serve 文件快捷方式

点击左下角功能按钮&#xff0c;代码片段&#xff0c;新建全局代码片段&#xff0c;然后输入自定义内容就可以 {"Erlang gen_server": {"prefix": "genserver","body": ["-module(${1:module_name}).","-behaviour(ge…

OpenGL 几何着色器高级应用

几何着色器高级应用 概念回顾 几何着色器(Geometry Shader)是 OpenGL 管线中的可选着色器阶段,位于顶点着色器(Vertex Shader) 和光栅化阶段 之间。 其核心功能是基于输入的图元(如点、线或三角形),生成新的图元,或对输入的图元进行修改。 几何着色器的执行是以图元…