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); 
 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隨筆(3)隨鼠標實時顯示經緯度坐標以及高度

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM