学习Cesium的时候,很多时候需要用到坐标,但是获取到的坐标跟自己需要的坐标数据不一致,我们就可以通过一些方法将获取到的世界坐标进行转换成正常的经纬度和高度,示例:
#zuobiao{
position: absolute;
width: 500px;
/* height: 100px; */
z-index: 1000;
left: 500px;
display: none;
background: rgba(55, 218, 204, 0.5);
border: 2px solid greenyellow;
border-radius: 4px;
}
<!-- 用来做Viewer的容器 -->
<div id="cesiumContainer">
<div id="zuobiao">
<h3>坐标转换</h3>
<hr/>
<div style="width:250px;height:30px;float:left;">
<font size="3" color="white">经度:
<span id="longitude_show"></span>°
</font>
</div>
<div style="width:250px;height:30px;float:left;">
<font size="3" color="white">纬度:
<span id="latitude_show"></span>°
</font>
</div>
</div>
//申请密匙
Cesium.Ion.defaultAccessToken = '你的TOKEN'
//设置随机数种子
Cesium.Math.setRandomNumberSeed(1234);
//声明一个Viewer (Viewer是一个带有多种功能的可交互的三位数字地球的容器(盒子))
var viewer = new Cesium.Viewer('cesiumContainer');
//声明场景
var scene = viewer.scene;
//设置视角
viewer.camera.flyTo({
destination: {
x: -2235586.6315060216,
y: 5256284.124910769,
z: 2828356.9505067402
},
orientation: {
heading: 5.984385181724655, //1
pitch: -0.07564218489559749,
roll: 0.0
},
})
function ZBclick(){
$('#zuobiao').show()
//世界坐标
new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas).setInputAction(function (movement) {
//通过 viewer.scene.camera.pickEllipsoid(movement.position, ellipsoid)获取,可以获取当前点击视线与椭球面相交处的坐标,
//其中ellipsoid是当前地球使用的椭球对象:viewer.scene.globe.ellipsoid。
var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
console.log("世界坐标:",position);
var ellipsoid=viewer.scene.globe.ellipsoid;
//世界坐标转为经纬度
var cartesian3=new Cesium.Cartesian3(position.x,position.y,position.z);
var cartographic=ellipsoid.cartesianToCartographic(cartesian3);
//经度
var lng=Cesium.Math.toDegrees(cartographic.longitude);
//纬度
var lat=Cesium.Math.toDegrees(cartographic.latitude);
//高度
// var alt=cartographic.height;
var alt = viewer.scene.globe.getHeight(cartographic);
console.log("世界坐标转换后经度",lng,"纬度",lat,"高度",alt);
//经纬度转换为世界坐标
// var cartograpshics=Cesium.Cartographic.fromDegrees(lng,lat,alt);
// var cartesian3D=ellipsoid.cartographicToCartesian(cartograpshics);
// console.log("经纬度再转为世界坐标:",cartesian3D);
//将转换后的经度和纬度进行显示
var longitude_show = document.getElementById('longitude_show');
var latitude_show = document.getElementById('latitude_show');
longitude_show.innerHTML=lng;
latitude_show.innerHTML=lat;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
我这个位置是在地底下,可以自己再进行地理位置调试