cesium 顯示視角高度以及鼠標經緯度


HTML中的內容

 1 <div id="cesiumContainer">
 2     <!-- 設置經緯度顯示 -->
 3     <span style="font-size:24px;">
 4         <div id="latlng_show" style="width:450px;height:30px;position:absolute;bottom:40px;right:400px;z-index:1;font-size:15px;">
 5             <div style="width:120px;height:30px;float:left;">
 6                 <font size="3" color="white">經度:
 7                     <span id="longitude_show"></span>°
 8                 </font>
 9             </div>
10             <div style="width:120px;height:30px;float:left;">
11                 <font size="3" color="white">緯度:
12                     <span id="latitude_show"></span>°
13                 </font>
14             </div>
15             <div style="width:210px;height:30px;float:left;">
16                 <font size="3" color="white">視角高:
17                     <span id="altitude_show"></span>km</font>
18             </div>
19         </div>
20     </span>
21     <script>
22 
23     </script>
24 </div>

js中的內容

 1  // 設置鼠標位置經緯度\視角高度實時顯示
 2     var longitude_show=document.getElementById('longitude_show');  
 3     var latitude_show=document.getElementById('latitude_show');  
 4     var altitude_show = document.getElementById('altitude_show');
 5     var canvas = viewer.scene.canvas;
 6     //具體事件的實現  
 7     var ellipsoid = viewer.scene.globe.ellipsoid;
 8     var handler = new Cesium.ScreenSpaceEventHandler(canvas);
 9     handler.setInputAction(function (movement) {
10         //捕獲橢球體,將笛卡爾二維平面坐標轉為橢球體的笛卡爾三維坐標,返回球體表面的點  
11         var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
12         if (cartesian) {
13             //將笛卡爾三維坐標轉為地圖坐標(弧度)  
14             var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
15             //將地圖坐標(弧度)轉為十進制的度數  
16             var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
17             var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
18             // 獲取相機的海拔高度作為視角高度/km
19             alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
20             longitude_show.innerHTML = log_String;
21             latitude_show.innerHTML = lat_String;
22             altitude_show.innerHTML = alti_String;
23         }

 


免責聲明!

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



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