cesium教程-3(显示高度,海拔,经度,纬度)
老规矩先看效果
解析:
在Cesium里面,我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件:
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
//Cesium.ScreenSpaceEventType.MOUSE_MOVE :监听鼠标移动
handler.setInputAction(function(event) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//其他鼠标事件监听
//Cesium.ScreenSpaceEventType.LEFT_CLICK //鼠标左键单击事件
//Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK //鼠标左键双击事件
//Cesium.ScreenSpaceEventType.LEFT_DOWN //鼠标左键按下事件
//Cesium.ScreenSpaceEventType.LEFT_UP //鼠标左键抬起事件
//Cesium.ScreenSpaceEventType.MIDDLE_CLICK //鼠标中键单击事件
//Cesium.ScreenSpaceEventType.MIDDLE_DOWN //鼠标中键按下事件
//Cesium.ScreenSpaceEventType.MIDDLE_UP //鼠标中键抬起事件
//Cesium.ScreenSpaceEventType.MOUSE_MOVE //鼠标移动事件
//Cesium.ScreenSpaceEventType.PINCH_END //触摸表面上的双指事件的结束
//Cesium.ScreenSpaceEventType.PINCH_MOVE //触摸表面上双指移动事件
//Cesium.ScreenSpaceEventType.PINCH_START //触摸表面上双指事件的开始
//Cesium.ScreenSpaceEventType.RIGHT_CLICK //鼠标右键单击事件
//Cesium.ScreenSpaceEventType.RIGHT_DOWN //鼠标右键按下事件
//Cesium.ScreenSpaceEventType.WHEEL //鼠标滚轮事件
//
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
//解除鼠标左键单击事件
实现显示高度,海拔,经纬度,的方法代码
show3DCoordinates() {//地图底部工具栏显示地图坐标信息var coordinatesDiv = document.getElementById("map_coordinates");if (coordinatesDiv) {coordinatesDiv.style.display = "block";} else {coordinatesDiv = document.createElement("div");coordinatesDiv.id = "map_coordinates";coordinatesDiv.style.zIndex = "50";coordinatesDiv.style.bottom = "1px";coordinatesDiv.style.height = "29px";coordinatesDiv.style.position = "absolute";coordinatesDiv.style.overflow = "hidden";coordinatesDiv.style.textAlign = "center";coordinatesDiv.style.padding = '0 10px'coordinatesDiv.style.background = "rgba(0,0,0,0.5)"coordinatesDiv.style.left = "0";coordinatesDiv.style.bottom = "0"coordinatesDiv.style.lineHeight = "29px";coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>暂无坐标信息</span>";document.getElementById(this.id).append(coordinatesDiv);//this.id为球的根节点var handler3D = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);handler3D.setInputAction((movement) => {var pick = new Cesium.Cartesian2(movement.endPosition.x, movement.endPosition.y);if (pick) {var cartesian = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(pick), this.viewer.scene);if (cartesian) {//世界坐标转地理坐标(弧度)var cartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);if (cartographic) {//海拔var height = this.viewer.scene.globe.getHeight(cartographic);//视角海拔高度var he = Math.sqrt(this.viewer.scene.camera.positionWC.x * this.viewer.scene.camera.positionWC.x + this.viewer.scene.camera.positionWC.y * this.viewer.scene.camera.positionWC.y + this.viewer.scene.camera.positionWC.z * this.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);}}
代码放在:https://github.com/weshmily/cesiumPDG
欢迎各位大佬点星星
作者
作者: weshmily前端
官网: 百度搜索(weshmily前端)
CSDN博客:http://blog.csdn.net/qq_27118895
GitHub: https://github.com/weshmily
公众号:搜索"weshmilyqd"
cesium教程-3(显示高度,海拔,经度,纬度)相关推荐
- LiveNVR流媒体服务Onvif/RTSP平台通道配置支持编辑经度纬度可以用来标注设备位置到电子地图上
通道配置支持编辑经度纬度可以用来标注设备位置到电子地图上 1.通道编辑 2.显示高级配置 3.配置经度纬度 4.RTSP/HLS/FLV/RTMP拉流Onvif流媒体服务 1.通道编辑 2.显示高级配 ...
- GPRS 基站定位 LAC CID 得到经度 纬度及百度地图显示
基站定位免费接口API: http://mpro.sinaapp.com/my/jzdw.php?hex=0&lac=10328&cid=26997&map=1 lac 和CI ...
- iOS 9应用开发教程之显示编辑文本标签文本框
iOS 9应用开发教程之显示编辑文本标签文本框 ios9显示.编辑文本 在iOS,经常会看到一些文本的显示.文字就是这些不会说话的设备的嘴巴.通过这些文字,可以很清楚的指定这些设备要表达的信息.本节将 ...
- Xamarin iOS教程之显示和编辑文本
Xamarin iOS教程之显示和编辑文本 Xamarin iOS显示和编辑文本 在一个应用程序中,文字是非常重要的.它就是这些不会说话的设备的嘴巴.通过这些文字,可以很清楚的指定这些应用程序要表达的 ...
- 腾讯地图调用获取经度纬度代码
腾讯地图调用获取经度纬度代码 //腾讯地图拼接好的数据返回经度和纬度 function getPositionInfo($address) { header("Content-type:te ...
- 获取当前位置的经度纬度
通过h5新增的navigator获得当前位置的经度纬度,使用方法为:navigator.geolocation.getCurrentPosition(success,error) <!DOCTY ...
- django经度纬度计算两点距离实例及微信商家付款给用户接口实例
长路漫漫,未知作伴. python 根据经度纬度计算两点距离 小数点保留位数 base加时间戳加密 十六进制数字转十进制字符串 微信获取用户openid 云通讯发送短信接口 django 微信小程序提 ...
- 函数:GetDistance,计算两个经度纬度之间距离
oracle函数,可以很快捷查出经纬度之间距离 oracle函数代码: CREATE OR REPLACE FUNCTION GetDistance(LngBegin number,LatBegin ...
- 根据经度纬度计算两者之间的距离
$i = 10.0; //差值可自定义,值越大,范围就越大 $min_latitude = $lat - $i; //纬度最小值 $max_latitude = $lat + $i; //纬度最大值 ...
最新文章
- 10.05 最初对Linux的了解,对Shell的认识
- java list 拼接 字符串数组_把数组所有元素排序,并按照“参数=参数值”的模式用“”字符拼接成字符串...
- mysql也能注册到eureka_为什么我的服务提供者和消费者都注册不到eureka注册中心?...
- UI交互设计教程分享:提高界面交互体验的“葵花宝典”
- [文章摘录] Strategies for Early-Stage Collaborative Design (IEEE Software, 2012)
- 工程思想——继电器特性抖动处理
- 廖雪峰Git教程笔记
- 马哥linux多道处理程序,马哥linux课堂笔记
- PPT图片虚化效果要怎样实现?
- JSP--矩形(圆)面积计算器
- (混沌系统)超混沌Lorenz系统---matlab
- [MSSQL]【SQL SERVER 2005+版本行转列示例】(2012年1-8月水源槑党25强榜单新鲜出炉)
- 未转变者怎么调服务器难度,未转变者服务器怎么设置出生点 | 手游网游页游攻略大全...
- 怎么修改图片为300dpi?如何在线修改分辨率?
- mybatis中的事务------我的笔记M11
- RCNN算法思想简单讲解概述————(究极简单的讲述和理解)
- 支持向量机用于多分类
- 永磁直驱风力发电机组并网仿真模型搭建
- redis7 Cluster模式 集群
- Java使用POI获取Excel公式