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

来源:互联网 发布:呵里巴巴淘宝网 编辑:程序博客网 时间:2024/06/04 23:33

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

具体效果如下:


具体代码如下:

//html代码

<div id="latlng_show" style="width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">  <div style="width:100px;height:30px;float:left;">       <font size="3" color="white">经度:<span id="longitude_show"></span></font>  </div>  <div style="width:100px;height:30px;float:left;">       <font size="3" color="white">纬度:<span id="latitude_show"></span></font>  </div>  <div style="width:140px;height:30px;float:left;">       <font size="6" color="white">视角高:<span id="altitude_show"></span>km</font>  </div></div>
//相应的js代码
<!-- 经纬度实时显示 -->var longitude_show=document.getElementById('longitude_show');var latitude_show=document.getElementById('latitude_show');var altitude_show=document.getElementById('altitude_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);longitude_show.innerHTML=log_String;latitude_show.innerHTML=lat_String;altitude_show.innerHTML=alti_String;               }        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);



阅读全文
0 0
原创粉丝点击