HTML中的内容
1 <div id="cesiumContainer"> 2 <!-- 设置经纬度显示 --> 3 <span style="font-size:24px;"> 4 <div id="latlng_show" style="450px;height:30px;position:absolute;bottom:40px;right:400px;z-index:1;font-size:15px;"> 5 <div style="120px;height:30px;float:left;"> 6 <font size="3" color="white">经度: 7 <span id="longitude_show"></span>° 8 </font> 9 </div> 10 <div style="120px;height:30px;float:left;"> 11 <font size="3" color="white">纬度: 12 <span id="latitude_show"></span>° 13 </font> 14 </div> 15 <div style="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 }