Cesium中實時顯示經緯度及視角高

 

 

控件

        <div id="latlng_show" style="position:absolute;">
          <div style="float:left;">
               <font size="1" color="white">經度：<span id="longitude_show"></span></font>
          </div>
          <br>
          <div style="float:left;">
               <font size="1" color="white">緯度：<span id="latitude_show"></span></font>
          </div>
            <br>
          <div style="float:left;">
               <font size="1" color="white">視角高：<span id="altitude_show"></span>km</font>
          </div>
           <br>
          <div style="float:left;">
               <font size="1" color="white">海拔高：<span id="elevation_show"></span></font>
          </div>

        </div>

　　

 

代碼

// g跟隨鼠標獲取經緯度和海拔
var longitude_show=document.getElementById('longitude_show');
var latitude_show=document.getElementById('latitude_show');
var altitude_show=document.getElementById('altitude_show');
var elevation_show=document.getElementById('elevation_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);
                    var elec_String=viewer.scene.globe.getHeight(cartographic).toFixed(4);

                    longitude_show.innerHTML=log_String;
                    latitude_show.innerHTML=lat_String;
                    altitude_show.innerHTML=alti_String;//視角高度 km
                    elevation_show.innerHTML=elec_String;//海拔
               }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);