實例代碼
<!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