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~

相关文章
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4111 0
干货!解决Cesium中Entity移动漂移的问题
|
7月前
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
人工智能 自然语言处理 JavaScript
需要的效果它都有,让AI对话开发效率翻倍!这款Ant Design扩展组件库绝了
ant-design-x-vue 是基于 Ant Design Vue 的扩展组件库,专注于增强聊天和AI交互场景的体验。项目提供开箱即用的对话式UI组件,支持消息气泡、智能建议、思维链展示等特色功能,特别适合快速搭建智能客服、AI助手类应用。
596 5
|
12月前
|
前端开发
ThreeJs通过canvas和Sprite添加标签
这篇文章介绍了在Three.js中利用Canvas和Sprite实现动态文本标签的方法,使得标签可以跟随模型并在3D空间中始终保持面向摄像机。
510 0
ThreeJs通过canvas和Sprite添加标签
|
存储 XML 数据格式
GeoServer实现NetCDF气象文件自动发布
众所周知,GeoServer是一个地理服务器,提供了管理页面进行服务发布,样式,切片,图层预览等一系列操作,但是手动进行页面配置有时并不满足业务需求,所以GeoServer同时提供了丰富的rest接口可供用户自己组织业务逻辑进行自动化管理。
2123 0
|
Linux
使用Kali Linux跟踪任何设备位置
如果您的手机在某处丢失或被某人偷走了,您可以使用此技巧,或者如果您的兄弟姐妹/朋友/家人失踪并使用他们的电话,那么您可以使用此技巧来定位并找到他们,
958 0
使用Kali Linux跟踪任何设备位置
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
974 1
|
消息中间件 缓存 网络协议
RabbitMQ消息确认
RabbitMQ消息确认
342 0
|
SQL 关系型数据库 MySQL
一文带你学透MySQL核心——DQL语言
DQL:英文全称是Data Query Language(数据查询语言),数据查询语言,用来查询数据库中表的记录。
642 0
|
IDE 开发工具 Android开发
OpenMV串口通讯详解
OpenMV串口通讯详解
1656 1