Cesium 海拔 经纬度 展示
通过参考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)+"米"+" 海拔:"+height.toFixed(2)+"米"+" 经度:" + point[0].toFixed(6) + " 纬度:" + point[1].toFixed(6)+ "</span>";
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
</script>
</body>
</html>
Cesium 海拔 经纬度 展示的更多相关文章
- cesium中divPoint展示数据
cesium中divPoint展示数据 在用点击面获取位置信息的时候,会弹出一个divPoint框,用来展示这个面的属性信息:或者位置信息. 代码如下: var handlerClick = new ...
- [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布
基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...
- cesium根据经纬度计算距离
var startLatitude = 36;var startLongitude = 120; var endLatitude=34; var endLongitude=121; var start ...
- cesium+ geoserverTerrainProvide+png展示3D高程图展示
一.发布png到geoserver的imagepyramid // translate png to tif epsg:4326 File png = new File(pngPathStr); Bu ...
- cesium 之三维场景展示篇(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- cesium 之地图切换展示效果篇(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- 根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】
是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...
- Cesium加载地形数据只显示半个地球
Cesium第0级地形包括两个瓦片:0/0/0.terrain,0/1/0.terrain,分别为左半球和右半球(具体参考:https://blog.csdn.net/u013929284/artic ...
- Ceisum官方教程3 -- 空间数据可视化
原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...
随机推荐
- android 开发常见问题
指定版本 就OK了 路径: android/app/build.gradle compile ("com.facebook.react:react-native:填你自己的RN版本" ...
- PAT1022.:Digital Library
1022. Digital Library (30) 时间限制 1000 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A Di ...
- 令状态寄存器访问指令(MRS,MSR)
ARM中有两条指令用于在状态寄存器和通用寄存器之间传送数据. 针对32位的ARM处理器,状态寄存器就是一个32位长的寄存器.每个位的含义如下图: 分成了4部分: 1,条件标志位 N(Negative) ...
- Oracle-08:连接查询
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 首先提供数据库脚本,供测试使用 create table DEPT ( deptno ) not null, ...
- Base64 image
[前端攻略]:玩转图片Base64编码 什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样 ...
- Ali OSS服务端签名直传并设置上传回调
服务端签名直传并设置上传回调 背景 请参考 Web端直传实践 里的背景介绍. 当采用服务端签名后直传方案后,问题来了,用户上传数据后,很多场景下,应用服务器都要知道用户上传了哪些文件,文件名字,甚至如 ...
- SimpleXML系列函数操作XML
创建SimpleXML对象 种方法来创建对象,分别是: l Simplexml_load_file()函数,将指定的文件解析到内存中. l Simplexml_load_string()函数,将创 ...
- ASP.Net MVC 在控制器中获取View中的form表单值的方法
在网站开发中,我们常常需要用到表单提交的方式,那么在MVC中是如何获取到表单中的数据呢?下面我们来介绍以下几种方式 首先我们先看看View前台页面 添加一个控制器 我们再看看前台页面的代码 @{ La ...
- Django+Bootstrap+Mysql 搭建个人博客 (六)
6.1.comments插件 (1)安装 pip install django-contrib-comments (02)settings INSTALLED_APPS = [ 'django.con ...
- 用Java为Hyperledger Fabric(超级账本)开发区块链智能合约链代码之部署与运行示例代码
部署并运行 Java 链代码示例 您已经定义并启动了本地区块链网络,而且已构建 Java shim 客户端 JAR 并安装到本地 Maven 存储库中,现在已准备好在之前下载的 Hyperledger ...