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 }