老规矩先看效果
解析:
在Cesium里面,我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件:
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
//Cesium.ScreenSpaceEventType.MOUSE_MOVE :监听鼠标移动
handler.setInputAction(function(event) {
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//其他鼠标事件监听
//Cesium.ScreenSpaceEventType.LEFT_CLICK //鼠标左键单击事件
//Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK //鼠标左键双击事件
//Cesium.ScreenSpaceEventType.LEFT_DOWN //鼠标左键按下事件
//Cesium.ScreenSpaceEventType.LEFT_UP //鼠标左键抬起事件
//Cesium.ScreenSpaceEventType.MIDDLE_CLICK //鼠标中键单击事件
//Cesium.ScreenSpaceEventType.MIDDLE_DOWN //鼠标中键按下事件
//Cesium.ScreenSpaceEventType.MIDDLE_UP //鼠标中键抬起事件
//Cesium.ScreenSpaceEventType.MOUSE_MOVE //鼠标移动事件
//Cesium.ScreenSpaceEventType.PINCH_END //触摸表面上的双指事件的结束
//Cesium.ScreenSpaceEventType.PINCH_MOVE //触摸表面上双指移动事件
//Cesium.ScreenSpaceEventType.PINCH_START //触摸表面上双指事件的开始
//Cesium.ScreenSpaceEventType.RIGHT_CLICK //鼠标右键单击事件
//Cesium.ScreenSpaceEventType.RIGHT_DOWN //鼠标右键按下事件
//Cesium.ScreenSpaceEventType.WHEEL //鼠标滚轮事件
//
复制代码
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
//解除鼠标左键单击事件
复制代码
实现显示高度,海拔,经纬度,的方法代码
show3DCoordinates() {
//地图底部工具栏显示地图坐标信息
var coordinatesDiv = document.getElementById("map_coordinates");
if (coordinatesDiv) {
coordinatesDiv.style.display = "block";
} else {
coordinatesDiv = document.createElement("div");
coordinatesDiv.id = "map_coordinates";
coordinatesDiv.style.zIndex = "50";
coordinatesDiv.style.bottom = "1px";
coordinatesDiv.style.height = "29px";
coordinatesDiv.style.position = "absolute";
coordinatesDiv.style.overflow = "hidden";
coordinatesDiv.style.textAlign = "center";
coordinatesDiv.style.padding = '0 10px'
coordinatesDiv.style.background = "rgba(0,0,0,0.5)"
coordinatesDiv.style.left = "0";
coordinatesDiv.style.bottom = "0"
coordinatesDiv.style.lineHeight = "29px";
coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>暂无坐标信息</span>";
document.getElementById(this.id).append(coordinatesDiv);//this.id为球的根节点
var handler3D = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
handler3D.setInputAction((movement) => {
var pick = new Cesium.Cartesian2(movement.endPosition.x, movement.endPosition.y);
if (pick) {
var cartesian = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(pick), this.viewer.scene);
if (cartesian) {
//世界坐标转地理坐标(弧度)
var cartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
if (cartographic) {
//海拔
var height = this.viewer.scene.globe.getHeight(cartographic);
//视角海拔高度
var he = Math.sqrt(this.viewer.scene.camera.positionWC.x * this.viewer.scene.camera.positionWC.x + this.viewer.scene.camera.positionWC.y * this.viewer.scene.camera.positionWC.y + this.viewer.scene.camera.positionWC.z * this.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' style='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);
}
}
复制代码
欢迎各位大佬点星星