内容概览
1.基于cesium 实现地图显示坐标、比例尺、海拔高度效果
2.源代码 demo 下载
本篇实现 cesium 地图坐标、比例尺、海拔高度等信息效果，效果图如下：
实现的思路
-
初始化函数
cesium.show3DCoordinates();
-
核心函数
/显示当前坐标/ 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' style='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 = ""+"视角海拔高度:"+(he - he2).toFixed(2)+"米"+" 海拔:"+height.toFixed(2)+"米"+" 经度：" + point[0].toFixed(6) + " 纬度：" + point[1].toFixed(6)+ ""; } } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); } },
link==>
cesium1.63.1
cesium1其他
