Cesium随笔(3)随鼠标实时显示经纬度坐标以及高度【转】
在网页三维地球上进行可视化开发与经纬度坐标以及高度是分不开的,能够实时获取鼠标位置的经纬度对可视化效果有很好的帮助,Cesium当然能做到:
(1)首先在里创建显示坐标的容器
样式自己调整的合适即可,要注意一点,position必须设成absolute,z-index必须大于1,因为cesiumcontainer的z-index是1.
(2)在
//显示坐标
var canvas = scene.canvas;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function (movement) {
var cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
var ellipsoid = scene.globe.ellipsoid;
if (cartesian) { //能获取,显示坐标
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var coords = '经度' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(2) + ', ' + '纬度' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(2) + '
' + '高度' + Math.ceil(viewer.camera.positionCartographic.height);
' + '高度' + Math.ceil(viewer.camera.positionCartographic.height);
document.getElementByIdx_x_x('coords').innerHTML =
coords; document.getElementByIdx_x_x('coords').style.display =
'';
} else { //不能获取不显示
document.getElementByIdx_x_x('coords').style.display = 'none';
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
这里是用了cesium的mousemove事件。
饮水思源,不忘初心。
要面包,也要有诗和远方。
分类:
cesium
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2011-01-19 DSOFramer.ocx 控件使用