Cesium獲取經度，緯度，高度

時間 2020-04-29

標籤 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>

說明

步驟：javascript
1. 加事件
2. 事件處理中，獲取橢球體笛卡爾座標
3. 笛卡爾座標轉製圖座標
4. 獲取html Dom元素，顯示信息

詳細css

加事件在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=字符串值 
```

本文由創做，採用知識共享署名4.0 國際許可協議進行許可
本站文章除註明轉載/出處外，均爲本站原創或翻譯，轉載前請務必署名
最後編輯時間爲: 2019/02/20 20:18html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Cesium獲取經度 ，緯度，高度

實例代碼

說明

Cesium獲取經度，緯度，高度