Skip to content

地图监听事件

ts

interface PositionObjectInterface {
    world_position: string
    radian_position: Cartographic
    lon: number
    lat: number
    mouse_right_click: Cartographic
    mouse_right_click_lon: number
    mouse_right_click_lat: number
}

const positionObject = reactive(<PositionObjectInterface>{
    world_position: '',
    radian_position: new Cesium.Cartographic(),
    lon: 0,
    lat: 0,
    mouse_right_click: new Cesium.Cartographic(),
    mouse_right_click_lon: 0,
    mouse_right_click_lat: 0,
})

const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas);

handler.setInputAction(function (movement: { position: any; }) {
    // 判断是否点击到地球
    const ray = viewer.value.camera.getPickRay(movement.position);
    if (!ray) return null;
    const position = viewer.value.scene.globe.pick(ray, viewer.value.scene);
    positionObject.world_position = position
    const cartographic: Cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
    positionObject.radian_position = cartographic
    // 经纬度转换
    positionObject.lon = Cesium.Math.toDegrees(cartographic.longitude);
    positionObject.lat = Cesium.Math.toDegrees(cartographic.latitude);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
/**
 * LEFT_CLICK           左键单击
 * LEFT_DOUBLE_CLICK    左键双击
 * LEFT_DOWN            左键按下
 * LEFT_UP              左键弹起
 * LEFT_DOUBLE_DOWN     左键双击按下
 * * * * * * * * * * *  右键事件和左键一致 * * * * * * * * * * * * * * * *
 * MIDDLE_DOWN          中键按下
 * MIDDLE_UP            中键弹起
 * MOUSE_MOVE           鼠标移动
 * */

By Modify.