cesium 显示视角高度以及鼠标经纬度
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 显示视角高度以及鼠标经纬度的更多相关文章
- reat + cesium。 实现 初始化时自动定位,鼠标移动实时展示坐标及视角高度, 淹没分析
只贴实现淹没分析这块的代码. import styles from './cesium.less'; import React from 'react'; import Cesium from 'ce ...
- Mac操作:Mac系统移动鼠标显示桌面(移动鼠标到角落)
很多朋友都发现,有的人在用Mac的时候,鼠标一划就可以显示桌面,或者显示Launchpad.其实很简单,下面就介绍这个方法. 首先打开系统偏好设置: 然后点击红色圈中的图标:MissionContro ...
- selenium 怎么查找定位鼠标移上去显示,移开鼠标就消失的内容
场景:鼠标移动到一级菜单上二级菜单才显示,移开鼠标二级菜单就消失,如何查找定位二级菜单 操作: 1.打开F12,点击sources 2.鼠标移动到一级菜单“工单管理” 3.按下键盘“Ctrl+\”,暂 ...
- Cesium 获取鼠标当前位置的模型高度,地形高度,OSGB高度,及其经纬度。
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);var ray,posit ...
- Cesium 显示CZML数据
转自文章 Cesium随笔(5)CZML介绍(介个文章是转的嘿嘿) 通过czml可以在cesium上实现非常棒的动态效果 CZML的结构 CZML是一种用来描述动态场景的JSON架构的语言,主 ...
- Unity 3D还原Scene场景、市面多数游戏视角高度自定义、第三人称视角分离功能:平移、拖动、看向中心等
Unity视角的高度自定义 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...
- JS实战 · 表格行颜色间隔显示,并在鼠标指定行上高亮显示
思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定: 前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...
- Fantageek翻译系列之《使用Autolayout显示变化高度的UITableViewCell》
这篇博客主要在于,解释如何通过仅仅使用Autolayout很很少的代码,显示高度不同的Cell.虽然标题说的是TableView,但是CollectionView同样适合.但是,这种方法只使用iOS7 ...
- 一天JavaScript示例-点击图片显示大图片添加鼠标
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- python3 logging笔记
#coding:utf-8import logging logger = logging.getLogger("simple_example")#可以说是日志信息的名字吧,可以随便 ...
- thinkPHP 模板操作
1.assign赋值 $this->assign('title','模板操作'); $this->assign('bests',$bests);//$bests是二维数组 2.变量的输出 ...
- python中的设计模式
单例模式:Python 的单例模式最好不要借助类(在 Java 中借助类是因为 Java 所有代码都要写在类中),而是通过一个模块来实现.一个模块的模块内全局变量.模块内全局函数,组合起来就是一个单例 ...
- JS 打乱数组顺序
function rand(arr) { var len = arr.length //首先从最大的数开始遍历,之后递减 for(var i = arr.length - 1; i >= 0; ...
- node服务器端模块化-commomjs
modele.js getmodule.js 用exports 返回的是一个对象中的每个属性
- 所有节点配置NTP服务
主节点: 打开vim /etc/ntp.conf文件 For more information about this file, see the man pages # ntp.conf(), ntp ...
- eclipse 分屏显示同一文件
某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -> Toggle Split Editor (C ...
- Oracle PL/SQL 实现excel PMT函数、PPMT函数
PMT函数 1.每月本息金额 = (本金×月利率×(1+月利率)^还款月数)÷ ((1+月利率)^还款月数-1) ,in_financeAmount in number) return number ...
- jemeter排至数据库时报:Access denied for user 'root'@'localhost' (using password:YES) 解决方案
相信这个问题大部分人都遇到过,至少我遇到过三次了,而且每次原因都不一样,前段时间同学也遇到这个问题,问我怎么解决,我把我的解决思路都说了一遍,发现还不行,最后居然是另外一个原因...哎,说多了都是泪, ...
- B树和B+树对比,为什么MySQL数据库索引选择使用B+树?
一 基础知识 二叉树 根节点,第一层的节点 叶子节点,没有子节点的节点. 非叶子节点,有子节点的节点,根节点也是非叶子节点. B树 B树的节点为关键字和相应的数据(索引等) B+树 B+树是B树的一个 ...