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

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

具体效果如下:

Cesium中实时显示经纬度及视角高_第1张图片

具体代码如下:

//html代码

[html] view plain copy print ?
  1. <span style="font-size:24px;"><div id="latlng_show" style="width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">  
  2.   <div style="width:100px;height:30px;float:left;">  
  3.        <font size="3" color="white">经度:<span id="longitude_show">span>font>  
  4.   div>  
  5.   <div style="width:100px;height:30px;float:left;">  
  6.        <font size="3" color="white">纬度:<span id="latitude_show">span>font>  
  7.   div>  
  8.   <div style="width:140px;height:30px;float:left;">  
  9.        <font size="6" color="white">视角高:<span id="altitude_show">span>kmfont>  
  10.   div>  
  11. div>span>  
[html] view plain copy print ?
  1. <strong><span style="font-size:32px;">//相应的js代码span>strong>  
[javascript] view plain copy print ?
  1. "font-size:24px;">  
  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(4);  
  17.                     var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);  
  18.                     var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);  
  19.                     longitude_show.innerHTML=log_String;  
  20.                     latitude_show.innerHTML=lat_String;  
  21.                     altitude_show.innerHTML=alti_String;  
  22.                }  
  23.         },Cesium.ScreenSpaceEventType.MOUSE_MOVE);  


你可能感兴趣的:(Cesium中实时显示经纬度及视角高)