Cesium获取经度 ，纬度，高度
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取坐标转经纬度</title>
<!--引入Cesium框架和部件css-->
<script src="../ThirdParty/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../ThirdParty/Cesium/Widgets/widgets.css">
</head>
<body>
<!-- Cesium 容器 -->
<div id="cesiumContainer" style="width:100%;height:100%"></div>
<span id="mes" style="position: absolute;top:20px;left: 20px;z-index: 2;color: white;"></span>
<!-- 应用代码 -->
<script >
//资源访问key，可以换成你的
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c';
//创建容器
var viewer=new Cesium.Viewer('cesiumContainer',{
})
//获取事件触发所在的 html Canvas容器
var canvas=viewer.scene.canvas;
//获取事件句柄
var handler=new Cesium.ScreenSpaceEventHandler(canvas);
//处理事件函数
handler.setInputAction(function(movement){
//拾取笛卡尔坐标
var ellipsoid=viewer.scene.globe.ellipsoid;//全局椭球体
var cartesian=viewer.scene.camera.pickEllipsoid(movement.endPosition,ellipsoid)//拾取鼠标在椭圆上的结束点笛卡尔坐标点
//转化笛卡尔坐标 为经纬度
var mesDom=document.getElementById('mes');
if(cartesian){
var cartographic=ellipsoid.cartesianToCartographic(cartesian);//笛卡尔坐标转制图坐标
var coordinate="经度:"+Cesium.Math.toDegrees(cartographic.longitude).toFixed(2)+",纬度:"+Cesium.Math.toDegrees(cartographic.latitude).toFixed(2)+
"相机高度:"+Math.ceil(viewer.camera.positionCartographic.height);
mesDom.innerHTML=coordinate;
mesDom.style.display="block";
}else{
mesDom.style.display="none";
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);//监听的是鼠标滑动事件
</script>
</body>
</html>
说明
-
步骤：
- 加事件
- 事件处理中，获取椭球体笛卡尔坐标
- 笛卡尔坐标转制图坐标
- 获取html Dom元素，显示信息
-
详细
- 加事件 在Cesium中先new事件句柄,然后设置处理输入动作函数action，第二个参数是枚举,实际值为数字
var handler=new Cesium.ScreenSpaceEventHandler(canvas) handler.setInputAction(处理函数:匿名函数/自定义函数的名，事件类型:Cesium.ScreenSpaceEventType.MOUSE_MOVE); - 事件处理 在处理函数中写，事件处理代码获取坐标
//拾取笛卡尔坐标 var ellipsoid=viewer.scene.globe.ellipsoid;//全局椭球体 var cartesian=viewer.scene.camera.pickEllipsoid(movement.endPosition,ellipsoid)//拾取鼠标在椭球体上的结束点笛卡尔坐标点 pickEllipsoid 拾取椭球体 - 转坐标为经纬度,使用Cesium的Math toDegrees转度数
转度数： Cesium.Math.toDegrees（） 经度：cartesian.longitude 纬度：cartesian.latitude 高度：使用的是相机所在位置的高度 viewer.camera.positionCartographic.height - 显示 使用JS dom API 如果获取到则显示，获取不到则不显示
var dom=document.getElementById("id") dom.style.innerHTML=字符串值
- 加事件 在Cesium中先new事件句柄,然后设置处理输入动作函数action，第二个参数是枚举,实际值为数字
本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/02/20 20:18
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
2017-08-02 jstree CHECKBOX PLUGIN
2017-08-02 数据库迁移之从oracle 到 MySQL
2017-08-02 cannot load oci dll,193-navicate连接oracle的解决方法
2017-08-02 jsTree使用记录
2017-08-02 jquery jstree 插件的使用