Cesium中实时显示经纬度及视角高

转载：https://blog.****.net/XLSMN/article/details/78755421

如何在cesium中实时根据鼠标的位置显示经纬度以及视角高

具体效果如下：

具体代码如下：

//html代码

<div id="latlng_show" style="width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">



  <div style="width:100px;height:30px;float:left;">




       <font size="3" color="white">经度：<span id="longitude_show"></span></font>




  </div>




  <div style="width:100px;height:30px;float:left;">




       <font size="3" color="white">纬度：<span id="latitude_show"></span></font>




  </div>




  <div style="width:140px;height:30px;float:left;">




       <font size="6" color="white">视角高：<span id="altitude_show"></span>km</font>




  </div>




</div>

//相应的js代码

<!-- 经纬度实时显示 -->




var longitude_show=document.getElementById('longitude_show');




var latitude_show=document.getElementById('latitude_show');




var altitude_show=document.getElementById('altitude_show');




var canvas=viewer.scene.canvas;



//具体事件的实现




var ellipsoid=viewer.scene.globe.ellipsoid;




var handler = new Cesium.ScreenSpaceEventHandler(canvas);



handler.setInputAction(function(movement){



            //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点




             var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);



              if(cartesian){



                   //将笛卡尔三维坐标转为地图坐标（弧度）




                   var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);



                   //将地图坐标（弧度）转为十进制的度数




                    var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);



                    var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);



					var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);



					longitude_show.innerHTML=log_String;



					latitude_show.innerHTML=lat_String;



					altitude_show.innerHTML=alti_String;



               }



        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);