本篇實現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)+"米"+" 海拔:"+height.toFixed(2)+"米"+" 經度:" + point[0].toFixed(6) + " 緯度:" + point[1].toFixed(6)+ "</span>"; } } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); } },
GIS之家新博客系列發布更新在GIS之家網站,歡迎關注收藏:GIS之家網站
GIS之家作品:GIS之家
GIS之家交流諮詢:諮詢模式