实例代码

<!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. Flutter——TextField组件(文本框组件)

    TextField组件的常用属性: 属性 描述 maxLines 设置此参数可以把文本框改为多行文本框 onChanged 文本框改变的时候触发的事件 decoration hintText 类似 h ...

  2. 昨天521表白失败,我想用Python分析一下...表白记录和聊天记录

    昨天跟喜欢的妹子表白了. 失败了!.下面是表白的聊天记录: (跟妹子已经认识一段时间) 我:灭嘤嘤,我喜欢你. 妹子:你干嘛? 我:今天520,跟你表白鸭. 妹子:那....有多喜欢? 我: 有很多很 ...

  3. python 中 ModuleNotFoundError: No module named 'Crypto' 错误处理

    今天在微信小程序服务端集成了微信的登录解密模块 WXBizDataCrypt,集成后运行程序时出现了下面的错误 (.venv) [1lin24@1lin24]# python manager_dev. ...

  4. OSI七层模型的新认识

    OSI 七层模型是internet的基石,它并没有制定一个标准,规定我们要怎么去做.美国军方曾把它精简到四层,只是站在了更实用的层次. 我们先来看看这个模型.   应用层->Applicatio ...

  5. jupyter notebook new Python3报错:Permission denied: Untitled.ipynb,修改workspace

    点击新建Python文件即弹出弹窗显示 Permission denied: Untitled.ipynb 看到Permission denied 尝试是权限问题进行解决,各种百度结果都是对文件进行权 ...

  6. Python中的时间

    coding:utf-8 from time import strftime, localtime import time print(time.time()) time1=strftime('%Y- ...

  7. [课本10.1.4]JDBC数据库连接池- C3P0数据源--通过构造方法创建数据源对象--通过配置文件创建数据源对象[推荐]

    JDBC- C3P0数据源 /*重点提醒*/ 连接数据库的较低的jar包版本会与较高版本的mysql版本有冲突; 通过把mysql 8.0的版本降到5.5, jar包仍使用较高的 mysql-conn ...

  8. 如何在C中以二进制格式打印十进制数?

    回答: #define CHAR_BITS  8  // size of character #define INT_BITS  ( sizeof(int) * CHAR_BITS) //bits i ...

  9. Hdu 4312-Meeting point-2——哈夫曼距离与切比雪夫距离

    题意 从 $n$ 个点中选择一点,使得其他点到其的切比雪夫距离最小($0 < n \leq 1e5$). 分析 定理:$(x_1, y_1)$ 与 $(x_2, y_2)$ 的曼哈顿距离等于 $ ...

  10. python - scrapy 爬虫框架 ( 起始url的实现,深度和优先级,下载中间件 )

    1.  start_urls  --  起始URL 的内部实现(将迭代器转换为生成器) class QSpider(scrapy.Spider): name = 'q' allowed_domains ...