• 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         }
  • 相关阅读:
    java-集合框架-泛型2-泛型限定
    进程间通信
    多进程编程基础概念
    linux deb 打包流程
    linux RPM 打包流程
    Python 第一個程序
    从注册验证码入手,我保住了30%的流失用户
    为什么Web端登录需要验证码?
    网络验证码的进化:从简单图文到无感验证
    公开课 | 金融知识图谱的应用探索
  • 原文地址:https://www.cnblogs.com/dongzhiwu/p/9216403.html
Copyright © 2020-2023  润新知