通过参考http://gishome.net.cn/cesium/cesium-coordinates/，整理修改后

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <link rel="stylesheet" href="Bootstrap/css/bootstrap.css">
    <script src="Bootstrap/js/jquery-1.11.3.min.js"></script>

<script src="../Build/Cesium/Cesium.js"></script>
  <script src="Bootstrap/js/bootstrap.min.js"></script>

<style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
      #_coordinates{
      position:absolute;
      bottom:20px;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
      <button type="button" class="btn btn-info" id="moni" style="position:absolute;top:20px;" onclick="SetMode('drawPloy')">面积</button>
      <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 95px;" onclick="SetMode('drawLine')">测量</button>
      <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 185px;" onclick="clearDrawingBoard()">清除</button>

<script>
    
    var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: true, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: true, //是否显示点击要素之后显示的信息
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
            layer: "tdtBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        })
    });
    var scene = viewer.scene;

//地图底部工具栏显示地图坐标信息
        var elementbottom = document.createElement("div");
        $("#cesiumContainer").append(elementbottom);
        elementbottom.className = "mapfootBottom";
        var coordinatesDiv = document.getElementById("_coordinates");
        if (coordinatesDiv) {
            coordinatesDiv.style.display = "block";
        }
        else {
            //var scale;
            var _divID_coordinates = "_coordinates";
            coordinatesDiv = document.createElement("div");
            coordinatesDiv.id = _divID_coordinates;
            coordinatesDiv.className = "map3D-coordinates";
            coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>暂无坐标信息</span>";
            //document.getElementById(this.mapDivId).appendChild(coordinatesDiv);
            $("#cesiumContainer").append(coordinatesDiv);
            var handler3D = new Cesium.ScreenSpaceEventHandler(
                viewer.scene.canvas);
            handler3D.setInputAction(function(movement) {
                var pick= new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);
                if(pick){
                    var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);
                    if(cartesian){
                        //世界坐标转地理坐标（弧度）
                        var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                        if(cartographic){
                            //海拔
                            var height = viewer.scene.globe.getHeight(cartographic);
                            //视角海拔高度
                            var he = Math.sqrt(viewer.scene.camera.positionWC.x * viewer.scene.camera.positionWC.x + viewer.scene.camera.positionWC.y * viewer.scene.camera.positionWC.y + viewer.scene.camera.positionWC.z * viewer.scene.camera.positionWC.z);
                            var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                            //地理坐标（弧度）转经纬度坐标
                            var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                            if(!height){
                                height = 0;
                            }
                            if(!he){
                                he = 0;
                            }
                            if(!he2){
                                he2 = 0;
                            }
                            if(!point){
                                point = [0,0];
                            }
                            coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>"+"视角海拔高度:"+(he - he2).toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;海拔:"+height.toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;经度：" + point[0].toFixed(6) + "&nbsp;&nbsp;纬度：" + point[1].toFixed(6)+ "</span>";
                        }
                    }
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        }

</script>
</body>
</html>

​​​

Cesium 海拔 经纬度 展示的更多相关文章

  1. cesium中divPoint展示数据

    cesium中divPoint展示数据 在用点击面获取位置信息的时候,会弹出一个divPoint框,用来展示这个面的属性信息:或者位置信息. 代码如下: var handlerClick = new ...

  2. [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布

    基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...

  3. cesium根据经纬度计算距离

    var startLatitude = 36;var startLongitude = 120; var endLatitude=34; var endLongitude=121; var start ...

  4. cesium+ geoserverTerrainProvide+png展示3D高程图展示

    一.发布png到geoserver的imagepyramid // translate png to tif epsg:4326 File png = new File(pngPathStr); Bu ...

  5. cesium 之三维场景展示篇（附源码下载）

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  6. cesium 之地图切换展示效果篇（附源码下载）

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  7. 根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】

    是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...

  8. Cesium加载地形数据只显示半个地球

    Cesium第0级地形包括两个瓦片:0/0/0.terrain,0/1/0.terrain,分别为左半球和右半球(具体参考:https://blog.csdn.net/u013929284/artic ...

  9. Ceisum官方教程3 -- 空间数据可视化

    原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

随机推荐

  1. Python_marshal模块操作二进制文件

    import marshal #导入模块 x1=30 #待序列化的对象 x2=5.0 x3=[1,2,3] x4=(4,5,6) x5={'a':1,'b':2,'c':3} x6={7,8,9} x ...

  2. (Lesson2)根据类名称和属性获得元素-JavaScript面向对象

    描述:在编写选择器的时候遇到的一根问题,我需要实现Jquery的选择器功能,第一个根据ID获取Element非常简单,第二个根据类(class)去获取Element集合,这个相对复杂,而根据name和 ...

  3. python字符串基本编码

    综述:python中字符串分为字节字符和非字节字符python3中默认输入字符串以非字节字符编码,使用unicode字符集表示,可以使用encode方法转化为ascii,utf-8, utf-16等各 ...

  4. Jms的MessageListener中的Jms事务

    摘要 一般来说,如果为JmsTemplate做了事务配置,那么它将会与当前线程的数据库事务挂钩,并且仅在数据库事务的afterCommit动作中提交. 但是,如果一个MessageListener在接 ...

  5. mybatis数据源源码剖析（JNDI、POOLED、UNPOOLED）

    http://blog.csdn.net/reliveit/article/details/47325189

  6. SSM-MyBatis-15：Mybatis中关联查询（多表操作）

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先简单提及一下关联查询的分类 1.一对多 1.1单条SQL操作的 1.2多条SQL操作的 2.多对一 2.1单 ...

  7. Android的JDK、SDK、Eclipse的理解

    今天看了这方面的内容,感觉学到了一些东西: 首先,jdk是用来处理Java语言的, sdk是用来处理Java语言和硬件之间的关联的, eclipse是用来编写Java语言的, 通过对这方面的理解,加深 ...

  8. python已安装了一个包，但是导入包中的模块时报错没有这个包

    执行import sys; print(sys.path)查看python搜索路径,确保自己的模块在python搜索路径中 python的搜索路径与包(package) python的搜索路径其实是一 ...

  9. 「SDOI2018」物理实验

    题目大意: 这题不好描述,直接看原题吧…… 题解: 很无脑的题……就是卡精度+难写.代码能力还是太差了. 其实可以直接用long double肝过去.但我的代码似乎太丑了,以至于跑得奇慢无比. 代码: ...

  10. BZOJ 1260：[CQOI2007]涂色paint

    (⊙o⊙)-,常规课考试又炸了!目测此次我要完蛋了... 又玩脱了,考数学的时候装B装大了! 算了,先进入正题... 题目描述:Description假设你有一条长度为5的木版,初始时没有涂过任何颜色 ...