Cesium 获取当前视图范围

简介: Cesium作为一个开源的WebGlobe解决方案已经很牛了,不过因为开发的资料不多,很多功能不知道怎么实现。下面记录下自己获取Cesium当前场景范围的方法(2维中对应的是extent)。   extent其实对我们有用的也就是左上角和右下角坐标,于是首先应该想办法实现的是获取场景左上角和右下角的经纬度坐标。

Cesium作为一个开源的WebGlobe解决方案已经很牛了,不过因为开发的资料不多,很多功能不知道怎么实现。下面记录下自己获取Cesium当前场景范围的方法(2维中对应的是extent)。

 

extent其实对我们有用的也就是左上角和右下角坐标,于是首先应该想办法实现的是获取场景左上角和右下角的经纬度坐标。

接下来说下point1和point2获取方法。

我没有发现Cesium有直接获取范围的方法,不过根据经验,场景范围在三维中应该从Camera来获取,Cesium倒是有个获取Camera范围的方法,就是获取up和right的坐标,但是获取出来的结果不是经纬度,使用cameraToWorldCoordinatesPoint也无法转换成需要用的数据,于是放弃。

 

后来看到了getPickRay这个方法,官方解释是Create a ray from the camera position through the pixel at windowPosition in world coordinates.大体意思是能够通过屏幕坐标转换成经纬度坐标。屏幕坐标的话,我们可以通过div位置来获取,这样屏幕的左上角坐标和右下角坐标是可以很容易获取到的。

以下是获取point1和point2的详细代码:

var pt1 = new Cesium.Cartesian2(0,0);
var pt2= new Cesium.Cartesian2(500,500);

var pick1= viewer.scene.globe.pick(viewer.camera.getPickRay(pt1), viewer.scene);
var pick2= viewer.scene.globe.pick(viewer.camera.getPickRay(pt2), viewer.scene);

//将三维坐标转成地理坐标
var geoPt1= viewer.scene.globe.ellipsoid.cartesianToCartographic(pick1);
var geoPt2= viewer.scene.globe.ellipsoid.cartesianToCartographic(pick2);

//地理坐标转换为经纬度坐标
var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180];            
var point2=[geoPt2.longitude / Math.PI * 180,geoPt2.latitude / Math.PI * 180];            

  

以上是只是个人工作学习中记录下的一些过程,如果有更好的实现方案,请各位留言指教O(∩_∩)O~

相关文章
|
3月前
|
IDE JavaScript 前端开发
【全网最详细】VS2022下载、安装、使用一篇搞定(附社区版安装包)
Visual Studio 2022(VS2022)是微软推出的首个原生64位IDE,突破4GB内存限制,性能更强。支持C/C++、C#、Python、JavaScript等多语言,提供免费社区版(功能完整)、专业版和企业版。推荐初学者与个人开发者使用社区版,安装灵活、学习成本低,是高效开发的理想选择。(239字)
|
存储 前端开发 区块链
基于区块链的慈善捐赠平台:透明与信任的未来
基于区块链的慈善捐赠平台:透明与信任的未来
879 24
|
机器学习/深度学习 运维 分布式计算
Pandas数据应用:异常检测
本文介绍如何使用Pandas进行异常检测,涵盖异常值定义及其对数据分析的影响。通过简单统计方法(如均值+3标准差)、箱线图法(基于四分位距IQR)和基于密度的方法(如DBSCAN),并提供代码案例。同时,针对数据类型不匹配、缺失值处理不当及大数据量性能问题等常见报错给出解决方案。掌握这些技术有助于提高数据分析的准确性和可靠性。
789 19
|
存储 移动开发 数据管理
localStorage 和 sessionStorage 的相同与不同
`localStorage` 和 `sessionStorage` 是 HTML5 提供的两种 Web 存储机制,用于在用户的浏览器中存储数据。它们都采用键值对形式存储字符串数据,并遵循同源策略,容量约为 5-10 MB。两者均支持 `setItem`、`getItem` 等方法。主要区别在于存储期限和作用域:`localStorage` 数据持久化,适用于用户偏好设置等长期存储;`sessionStorage` 数据仅限当前会话,适用于表单信息等临时数据。根据需求选择合适的存储方式可提升用户体验和数据管理效率。
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
945 3
|
人工智能 数据挖掘 程序员
设计师的技能要求:如何在快速变化的环境中保持竞争力
设计不仅是美学的追求,更是解决问题的过程。本文从设计者的角度探讨了现代设计的演变,包括手工艺术、工业革命、信息时代及用户体验设计的兴起,分析了现代设计的特征如用户中心、跨学科协作和持续迭代,以及当前面临的挑战和未来趋势,强调了设计师应具备的适应能力和创新能力。
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
1011 0
|
存储 数据挖掘 数据库
【办公自动化】使用Python一键往Word文档的表格中填写数据
【办公自动化】使用Python一键往Word文档的表格中填写数据
1622 1
|
前端开发 JavaScript API