Cesium.ScreenSpaceEventHandler
是 CesiumJS 中用于处理屏幕空间事件(如鼠标点击、移动、滚轮等)的工具。这个类可以帮助你响应用户在视图画布上的操作,从而在 3D 场景中执行相关的逻辑。
主要功能和用法
1.创建事件处理器:
let handler = new Cesium.ScreenSpaceEventHandler(canvas);
你需要将 Cesium.ScreenSpaceEventHandler
与一个 HTMLCanvasElement
关联,这通常是 Cesium 的渲染画布。
2.设置事件处理函数:
handler.setInputAction(callbackFunction, Cesium.ScreenSpaceEventType.EVENT_TYPE);
callbackFunction
是你定义的处理事件的函数。Cesium.ScreenSpaceEventType.EVENT_TYPE
是事件类型,例如LEFT_CLICK
、MOUSE_MOVE
、WHEEL
等。
3.事件类型
Cesium.ScreenSpaceEventType.LEFT_CLICK
:鼠标左键点击事件。Cesium.ScreenSpaceEventType.RIGHT_CLICK
:鼠标右键点击事件。Cesium.ScreenSpaceEventType.MOUSE_MOVE
:鼠标移动事件。Cesium.ScreenSpaceEventType.WHEEL
:鼠标滚轮事件。
4.销毁事件处理器:
handler.destroy();
示例代码
以下是如何使用 ScreenSpaceEventHandler
来处理不同类型的事件的一个示例:
1。鼠标滚动获取离地高度
getHeight(fun) {
let height = 0;
let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
handler.setInputAction((wheelment) => {
height = this.viewer.camera.positionCartographic.height;
fun(height);
}, Cesium.ScreenSpaceEventType.WHEEL);
return height;
},
2.鼠标点击获取地图上的实体。
/**
* 点击获取地图上的实体
* @param {*} fun 回调函数 参数为选中的实体
*/
getClickModel(fun, nofun) {
var thi = this; // 在合适的作用域内保存 this
var handler = new Cesium.ScreenSpaceEventHandler(thi.viewer.scene.canvas);
handler.setInputAction(function (movement) {
var pick = thi.viewer.scene.pick(movement.position);
if (Cesium.defined(pick)) {
console.log("选中pick", pick.id);
fun(pick);
} else {
nofun();
// console.log("没选中pick", pick);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 鼠标抒发点击事件
},
点击获取经纬度
addClickHandlerForGetXY() {
let viewer = this.ffCesium.viewer;
var riverHandle = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
// 对鼠标按下事件的监听
riverHandle.setInputAction(function (event) {
//获取加载地形后对应的经纬度和高程:地标坐标
var ray = viewer.camera.getPickRay(event.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
if (Cesium.defined(cartesian)) {
// 转换为经纬度
const cartographic =
viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
const longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
const latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
const height = viewer.scene.globe.getHeight(cartographic);
// 输出点击的经纬度和高度
console.log("采集坐标:" + longitudeString + "," + latitudeString);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
getClickPoint(fun) {
var thi = this; // 在合适的作用域内保存 this
var handler = new Cesium.ScreenSpaceEventHandler(thi.viewer.scene.canvas);
handler.setInputAction(function (movement) {
var position = thi.viewer.scene.camera.pickEllipsoid(
movement.position,
thi.viewer.scene.globe.ellipsoid
);
let latLngHeight = thi.cartesian3ToLngLat(position);
fun(latLngHeight);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 鼠标抒发点击事件
},
世界坐标(三维坐标转换)转经纬度
cartesian3ToLngLat(cartesian3) {
let ellipsoid = this.viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(cartesian3);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let height = cartographic.height;
return { lat: lat, lng: lng, height: height };
},