HTML中的内容

 <div id="cesiumContainer">
<!-- 设置经纬度显示 -->
<span style="font-size:24px;">
<div id="latlng_show" style="width:450px;height:30px;position:absolute;bottom:40px;right:400px;z-index:1;font-size:15px;">
<div style="width:120px;height:30px;float:left;">
<font size="3" color="white">经度:
<span id="longitude_show"></span>°
</font>
</div>
<div style="width:120px;height:30px;float:left;">
<font size="3" color="white">纬度:
<span id="latitude_show"></span>°
</font>
</div>
<div style="width:210px;height:30px;float:left;">
<font size="3" color="white">视角高:
<span id="altitude_show"></span>km</font>
</div>
</div>
</span>
<script> </script>
</div>

js中的内容

  // 设置鼠标位置经纬度\视角高度实时显示
var longitude_show=document.getElementById('longitude_show');
var latitude_show=document.getElementById('latitude_show');
var altitude_show = document.getElementById('altitude_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(2);
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
// 获取相机的海拔高度作为视角高度/km
alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
longitude_show.innerHTML = log_String;
latitude_show.innerHTML = lat_String;
altitude_show.innerHTML = alti_String;
}

cesium 显示视角高度以及鼠标经纬度的更多相关文章

  1. reat + cesium。 实现 初始化时自动定位,鼠标移动实时展示坐标及视角高度, 淹没分析

    只贴实现淹没分析这块的代码. import styles from './cesium.less'; import React from 'react'; import Cesium from 'ce ...

  2. Mac操作:Mac系统移动鼠标显示桌面(移动鼠标到角落)

    很多朋友都发现,有的人在用Mac的时候,鼠标一划就可以显示桌面,或者显示Launchpad.其实很简单,下面就介绍这个方法. 首先打开系统偏好设置: 然后点击红色圈中的图标:MissionContro ...

  3. selenium 怎么查找定位鼠标移上去显示,移开鼠标就消失的内容

    场景:鼠标移动到一级菜单上二级菜单才显示,移开鼠标二级菜单就消失,如何查找定位二级菜单 操作: 1.打开F12,点击sources 2.鼠标移动到一级菜单“工单管理” 3.按下键盘“Ctrl+\”,暂 ...

  4. Cesium 获取鼠标当前位置的模型高度,地形高度,OSGB高度,及其经纬度。

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);var ray,posit ...

  5. Cesium 显示CZML数据

    转自文章 Cesium随笔(5)CZML介绍(介个文章是转的嘿嘿) 通过czml可以在cesium上实现非常棒的动态效果   CZML的结构   CZML是一种用来描述动态场景的JSON架构的语言,主 ...

  6. Unity 3D还原Scene场景、市面多数游戏视角高度自定义、第三人称视角分离功能:平移、拖动、看向中心等

    Unity视角的高度自定义 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...

  7. JS实战 · 表格行颜色间隔显示,并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  8. Fantageek翻译系列之《使用Autolayout显示变化高度的UITableViewCell》

    这篇博客主要在于,解释如何通过仅仅使用Autolayout很很少的代码,显示高度不同的Cell.虽然标题说的是TableView,但是CollectionView同样适合.但是,这种方法只使用iOS7 ...

  9. 一天JavaScript示例-点击图片显示大图片添加鼠标

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. aerospike(1)-centos7安装aerospike

    要安装的软件:server和tools 下载地址:https://www.aerospike.com/download/server/4.5.1.5/ server: 1.下载 wget https: ...

  2. TCP/IP协议中几个缩写词的含义 MSL、TTL和RTT 报文最大生存时间 跳数(即生存时间) cs往返时间 MSL要大于TTL知道为什么吗?

    MSL.TTL和RTT简介 1.MSL是Maximum Segment Lifetime英文的缩写,中文可以译为“报文最大生存时间”,他是任何报文在网络上存在的最长时间,超过这个时间报文将被丢弃.因为 ...

  3. Mybatis学习笔记4 - 获取自增主键的值

    获取自增主键的值:mysql支持自增主键,自增主键值的获取,mybatis也是利用statement.getGenreatedKeys():useGeneratedKeys="true&qu ...

  4. [转]LazyLoad.js及scrollLoading.js

    本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...

  5. 《JavaScript高级程序设计》第5章 Object类型---Array---学习心得

    1.创建数组的方法: 使用Array构造函数: var colors=new Array() var colors=new Array(20)//l创建一个包含20项的数组 var colors=ne ...

  6. HDU 5412——CRB and Queries——————【线段树套Treap(并没有AC)】

    CRB and Queries Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  7. Nginx 在Windows下搭建静态Web服务

    简介 nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP ...

  8. 乐蜂网SALES倒计时原码展示

    这是一个基于jquey写的倒计时.当然代码有点小改动,只是改了一下展示效果. 在静态页添加显示倒计时的容器,并引用下面脚本,代入时间参数即可使用. timeoutDate——到期时间,时间格式为201 ...

  9. Socket网络通信之BIO

    Socket网络通信之BIO 如果要让两台计算机实现通信,需要的条件:ip,port,协议. 目前我们用的最多的就是TCP/IP协议和UDP协议.TCP三次握手,所以比较慢,且安全:UDP速度快,但是 ...

  10. Start activity with App Chooser or not ?

    启动一个Activity,可以直接使用Intent,例如: Intent intent = new Intent(Intent.ACTION_SEND); ... startActivity(inte ...