Cesium 显示经纬高

文章目录

- 需求
- 分析

需求

页面展示经、纬度和高

在这里插入图片描述

分析

html

<div id="latlng_show" style="width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;"><div style="width:100px;height:30px;float:left;"><font size="3" color="white">经度：<span id="longitude_show"></span></font></div><div style="width:100px;height:30px;float:left;"><font size="3" color="white">纬度：<span id="latitude_show"></span></font></div><div style="width:140px;height:30px;float:left;"><font size="6" color="white">视角高：<span id="altitude_show"></span>km</font></div>
</div>

<!-- 经纬度实时显示 -->
/*** 经纬度显示*/
function getLonLat() {var longitude_show = document.getElementById("longitude_show");var latitude_show = document.getElementById("latitude_show");longitude_show.innerHTML = "0";latitude_show.innerHTML = "0";var canvas = viewer.value.scene.canvas;//具体事件的实现var ellipsoid = viewer.value.scene.globe.ellipsoid;var handler = new Cesium.ScreenSpaceEventHandler(canvas);handler.setInputAction(function (movement) {//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点var cartesian = viewer.value.camera.pickEllipsoid(movement.endPosition,ellipsoid);if (cartesian) {//将笛卡尔三维坐标转为地图坐标（弧度）var cartographic =viewer.value.scene.globe.ellipsoid.cartesianToCartographic(cartesian);//将地图坐标（弧度）转为十进制的度数var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);var alti_String = (viewer.value.camera.positionCartographic.height / 1000).toFixed(2);longitude_show.innerHTML = log_String;latitude_show.innerHTML = lat_String;}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}