zoukankan      html  css  js  c++  java
  • Cesium中实时显示经纬度及视角高

    控件

            <div id="latlng_show" style="position:absolute;">
              <div style="float:left;">
                   <font size="1" color="white">经度:<span id="longitude_show"></span></font>
              </div>
              <br>
              <div style="float:left;">
                   <font size="1" color="white">纬度:<span id="latitude_show"></span></font>
              </div>
                <br>
              <div style="float:left;">
                   <font size="1" color="white">视角高:<span id="altitude_show"></span>km</font>
              </div>
               <br>
              <div style="float:left;">
                   <font size="1" color="white">海拔高:<span id="elevation_show"></span></font>
              </div>
    
            </div>
    

      

    代码

    // g跟随鼠标获取经纬度和海拔
    var longitude_show=document.getElementById('longitude_show');
    var latitude_show=document.getElementById('latitude_show');
    var altitude_show=document.getElementById('altitude_show');
    var elevation_show=document.getElementById('elevation_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);
                        var elec_String=viewer.scene.globe.getHeight(cartographic).toFixed(4);
    
                        longitude_show.innerHTML=log_String;
                        latitude_show.innerHTML=lat_String;
                        altitude_show.innerHTML=alti_String;//视角高度 km
                        elevation_show.innerHTML=elec_String;//海拔
                   }
            },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    

      

  • 相关阅读:
    Javascript设计模式学习三(策略模式)
    Javascript设计模式学习二(单例)
    HTML5 Canvas 绘图
    Javascript设计模式学习一
    Node.js学习笔记(一)
    C# 多线程
    Solr搜索引擎的搭建与应用
    solr的配置文件及其含义
    SolrNet的基本用法及CURD
    Tomcat安装及配置教程
  • 原文地址:https://www.cnblogs.com/kekeoutlook/p/14059265.html
Copyright © 2011-2022 走看看