本篇實現cesium地圖坐標、比例尺、海拔高度等信息效果,效果圖如下:

實現的思路如下:

1.初始化函數:

cesium.show3DCoordinates();

2.核心函數:

/*顯示當前坐標*/
show3DCoordinates: function () {
//地圖底部工具欄顯示地圖坐標信息
var elementbottom = document.createElement("div");
$(".cesium-viewer").append(elementbottom);
elementbottom.className = "mapfootBottom";
var coordinatesDiv = document.getElementById(this.mapDivId + "_coordinates");
if (coordinatesDiv) {
coordinatesDiv.style.display = "block";
}
else {
var viewer = this.cesiumViewer;
//var scale;
var _divID_coordinates = this.mapDivId + "_coordinates";
coordinatesDiv = document.createElement("div");
coordinatesDiv.id = _divID_coordinates;
coordinatesDiv.className = "map3D-coordinates";
coordinatesDiv.innerHTML = "<span id=cd_label stylex=font-size:13px;text-align:center;font-family:微軟雅黑;color:#edffff;>暫無坐標信息</span>";
//document.getElementById(this.mapDivId).appendChild(coordinatesDiv);
$(".cesium-viewer").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 stylex=font-size:13px;text-align:center;font-family:微軟雅黑;color:#edffff;>"+"視角海拔高度:"+(he - he2).toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;海拔:"+height.toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;經度:" + point[0].toFixed(6) + "&nbsp;&nbsp;緯度:" + point[1].toFixed(6)+ "</span>";
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
},

GIS之家新博客系列發布更新在GIS之家網站,歡迎關注收藏:GIS之家網站

GIS之家作品:GIS之家

GIS之家交流諮詢:諮詢模式


推薦閱讀:
相關文章