实例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>获取坐标转经纬度</title>

    <!--引入Cesium框架和部件css-->

    <script src="../ThirdParty/Cesium/Cesium.js"></script>

    <link rel="stylesheet" href="../ThirdParty/Cesium/Widgets/widgets.css">

</head>

<body>

<!-- Cesium 容器 -->

<div id="cesiumContainer" style="width:100%;height:100%"></div>

<span id="mes" style="position: absolute;top:20px;left: 20px;z-index: 2;color: white;"></span>

<!-- 应用代码 -->

<script >

    //资源访问key，可以换成你的

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c';

    //创建容器

    var  viewer=new Cesium.Viewer('cesiumContainer',{

    })

    //获取事件触发所在的  html Canvas容器

    var canvas=viewer.scene.canvas;

    //获取事件句柄

    var handler=new Cesium.ScreenSpaceEventHandler(canvas);

    //处理事件函数

    handler.setInputAction(function(movement){

        //拾取笛卡尔坐标

        var ellipsoid=viewer.scene.globe.ellipsoid;//全局椭球体

        var cartesian=viewer.scene.camera.pickEllipsoid(movement.endPosition,ellipsoid)//拾取鼠标在椭圆上的结束点笛卡尔坐标点

        //转化笛卡尔坐标 为经纬度

        var mesDom=document.getElementById('mes');

        if(cartesian){

            var cartographic=ellipsoid.cartesianToCartographic(cartesian);//笛卡尔坐标转制图坐标

            var coordinate="经度:"+Cesium.Math.toDegrees(cartographic.longitude).toFixed(2)+",纬度:"+Cesium.Math.toDegrees(cartographic.latitude).toFixed(2)+

                    "相机高度:"+Math.ceil(viewer.camera.positionCartographic.height);

            mesDom.innerHTML=coordinate;

            mesDom.style.display="block";

        }else{

            mesDom.style.display="none";

        }

    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);//监听的是鼠标滑动事件

</script>

</body>

</html>

说明

  • 步骤：

    1. 加事件
    2. 事件处理中，获取椭球体笛卡尔坐标
    3. 笛卡尔坐标转制图坐标
    4. 获取html Dom元素，显示信息

  • 详细

    • 加事件 在Cesium中先new事件句柄,然后设置处理输入动作函数action，第二个参数是枚举,实际值为数字

       var handler=new Cesium.ScreenSpaceEventHandler(canvas)
      
 handler.setInputAction(处理函数:匿名函数/自定义函数的名，事件类型:Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    • 事件处理 在处理函数中写，事件处理代码获取坐标 
        //拾取笛卡尔坐标
      
  var ellipsoid=viewer.scene.globe.ellipsoid;//全局椭球体
      
  var cartesian=viewer.scene.camera.pickEllipsoid(movement.endPosition,ellipsoid)//拾取鼠标在椭球体上的结束点笛卡尔坐标点 pickEllipsoid 拾取椭球体
    • 转坐标为经纬度,使用Cesium的Math toDegrees转度数 
      转度数： Cesium.Math.toDegrees（）
      
经度：cartesian.longitude
      
纬度：cartesian.latitude
      
高度：使用的是相机所在位置的高度 viewer.camera.positionCartographic.height
    • 显示 使用JS dom API 如果获取到则显示，获取不到则不显示 
        var dom=document.getElementById("id")
      
  dom.style.innerHTML=字符串值

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/02/20 20:18

Cesium获取经度 ，纬度，高度的更多相关文章

  1. IOS获取经度纬度

    仔细研究了一下SDK文档,再结合网上的方法,写了这一个简单的获取经纬度的方法,大家看看就好. 首先要导入CoreLocation.Frame 包 .h 文件 1 2 3 4 5 6 7 8 9 #im ...

  2. 飞机3D轨迹绘制(经度-纬度-高度）

    使用Python绘制 #绘制三维直线图,将飞机飞行的航迹用(经度,纬度和高度)来描述 #******************************************************** ...

  3. HTML5根据浏览器获取经度和纬度（百度API）

    网页获取用户位置信息的办法1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息 优点是比较准确,缺点是需要用户自己选择位置2 通过H5 geolocation属性获取 ...

  4. js通过高德地图获取当前位置的经度纬度

    效果图如下: 已经获取到了经度纬度了 代码如下: <!doctype html> <html> <head> <meta charset="utf- ...

  5. 高德JSAPI获取当前所在位置的经度纬度

    这是在浏览器中的效果: 控制台打印出来的就是经度纬度的值 代码如下: <!doctype html> <html> <head> <meta charset= ...

  6. iOS之 利用通知(NSNotificationCenter)获取键盘的高度,以及显示和隐藏键盘时修改界面的注意事项

    我们在开发中会遇到这样的情况:调用键盘时需要界面有一个调整,避免键盘遮掩输入框. 但实现时你会发现,在不同的手机上键盘的高度是不同的.这里列举一下: //获取键盘的高度 /* iphone 6: 中文 ...

  7. 动态获取div的高度 随着窗口变化而变化

    // 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...

  8. Android 动态获取ListView的高度

    public static void setListViewHeightBasedOnChildren(ListView listView) { ListAdapter listAdapter = l ...

  9. jquery获取高度错误(可以获取到宽度，但获取不到高度)，及解决办法

    <div class="foo"> <div style="display: none;"> 3333333 </div> ...

随机推荐

  1. sql server行转列

    创建测试数据 学生表 Student create table Student(S# varchar(10),Sname nvarchar(10),Sage datetime,Ssex nvarcha ...

  2. 编译安装的httpd实现服务脚本，通过service和chkconfig进行管理

    把编译安装的httpd 实现服务脚本,通过service和chkconfig 进行管理 1 编译安装httpd 把httpd编译安装在/app/httpd/目录下. 2 在/etc/rc.d/init ...

  3. JAVA笔记整理（二），下载安装JDK

    Windows平台 1.登录Oracle官方网站(http://www.oracle.com/index.html),找到下载 2.选择要下载的版本,点击JDK DOWNLOAD 3.下载文件,先勾选 ...

  4. C++——Big Three（copy ctor、copy op=、dtor）

    Big Three C++ 中Big Three指的是copy ctor 和 copy op=  和  dtor m_data是个字符串指针.一般而言,处理字符串,都是使用指针,在需要存储字符的时候再 ...

  5. c++混合使用不同标准编译潜在的问题

    最近项目使用的C++的版本到C++11了,但是由于有些静态库(.a)没有源码,因此链接时还在使用非C++11版本的库文件.目前跑了几天,似乎是没出什么问题,但是我还是想说一下这样做有哪些潜在的风险. ...

  6. JS基础篇【1】

    该文讲解适用于有一定语言开发基础的朋友们,亦可当作久别重逢之回顾! 1.JS简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记 ...

  7. RxJava 以及 Android 中的通用线程解决方案、并发与线程安全

    关于RxJava如今是熟到发紫了,所以对于它底层的动作机制的了解是迫在眉睫了,费话不多说,直接开始. 这里还是以之前获取个人github仓库列表为例,用retrofit+rxjava,也是实际项目中用 ...

  8. python访问aws-S3服务

    创建本地 AWS 凭证文件 登录 AWS 管理控制台 并通过以下网址打开 IAM 控制台 https://console.amazonaws.cn/iam/. 创建一个新用户,其权限仅限于您希望您的代 ...

  9. VFD 时钟（VFD Clock with STM8 v2.0）

    算是填了最先挖的VFD坑 最近pcb厂家神仙打架,为PCB普及做出了巨大贡献,到这事儿发生我也就开了两三次板,都赶上这个时间了,不开白不开! 不说了,上图! sch: pcb: 方案和之前的除了驱动电 ...

  10. QPainter 提高绘制效率的方法

    原文: https://my.oschina.net/u/3919756/blog/1944747 如果我们用painter一个一个的绘制直线,圆等在控件上,绘制效率会不高.为了提高效率,我们可以设置 ...