zoukankan      html  css  js  c++  java
  • cesium 显示视角高度以及鼠标经纬度

    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         }
  • 相关阅读:
    used内存较大,实际top查看系统进程中并没有占用这么多内存
    查看LINUX进程内存占用情况
    关于ConcurrentHashMap的key和value不能为null的深层次原因
    Linux修改用户所在组方法
    原因可能是托管的PInvoke签名与非托管的目标签名不匹配
    vs2019 实现C#调用c++的dll两种方法
    java jvm 参数 -Xms -Xmx -Xmn -Xss 调优总结
    java 读取文件的几种方式和通过url获取文件
    Idea中Maven的默认配置 (非常好)
    去哪儿网models数据更新
  • 原文地址:https://www.cnblogs.com/dongzhiwu/p/9216403.html
Copyright © 2011-2022 走看看