项目中有时需要知道鼠标的实时经纬度坐标和高度,具体如下:
前台:
<div id="cesiumContainer" class="cesium-container">
<div id="coords">经度:32.000000 度 纬度: 102.000000 度 高度:0 m</div>
</div>
css样式:
#coords { /*camera视点坐标*/
width: 100%;
height: 33px;
z-index: 99;
bottom: 35px;
color: white;
user-select: none;
line-height: 33px;
text-align: center;
position: absolute;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-webkit-text-shadow: #000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow: #000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
text-shadow: #000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
*filter: Glow(Color=#000, Strength=1);
cursor: default;
/*border: 1px solid red;*/
}
js代码:
var scene = viewer.scene;
var camera;
camera = scene.camera;
scene.screenSpaceCameraController.minimumZoomDistance = -5000;
var handler;
function activaEvents(div) {
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.WHEEL);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.PINCH_END);
handler.setInputAction(function (movement) {
miraPosicio(div);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
function miraPosicio(div) {
var pos = camera.positionCartographic;
var x = parseFloat(pos.longitude * (180.0 / Math.PI));
var y = parseFloat(pos.latitude * (180.0 / Math.PI));
var z = pos.height;
document.getElementById(div).innerHTML = '经度:' + x.toFixed(5) + ' 纬度:' + y.toFixed(5) + ' 高度:' + z.toFixed(0) + ' m ';
}
activaEvents('coords');
碎碎叨:div的id可根据自己喜好命名,记得修改对应的地方就可以。
转载请注明出处,谢谢!!!