useScreenSpaceEventHandler

轻松使用ScreenSpaceEventHandler，当依赖数据发生变化或组件被卸载时，监听函数会自动重新重载或销毁。

Usage

<script setup lang="ts">
import * as Cesium from 'cesium';
import { useScreenSpaceEventHandler } from 'vesium';
import { ref } from 'vue';

const coord = ref<Record<any, any>>({});

Object.values(Cesium.ScreenSpaceEventType).forEach((type: any) => {
  useScreenSpaceEventHandler(type, (ctx: any) => coord.value[type] = JSON.stringify(ctx));
});
</script>

<template>
  <div
    w="200px"
    bg="[var(--vp-c-bg)]"
    p="10px"
    flex="~ col gap-5px"
  >
    <span v-for="(value, key) in Cesium.ScreenSpaceEventType" :key="key">
      {{ key }} : {{ coord[value] || '--' }}
    </span>
  </div>
</template>

const { isActive, pause, resume } = useScreenSpaceEventHandler({
  type: Cesium.ScreenSpaceEventType.LEFT_CLICK,
  // modifier: Cesium.KeyboardEventModifier.SHIFT,
  // pause: false,
  inputAction: (ctx) => {
    console.log(ctx);
  }
});

Type Definitions

import type { KeyboardEventModifier, ScreenSpaceEventType } from 'cesium';
import type { MaybeRefOrGetter, WatchStopHandle } from 'vue';
import { ScreenSpaceEventHandler } from 'cesium';
export type ScreenSpaceEvent<T extends ScreenSpaceEventType> = {
    [ScreenSpaceEventType.LEFT_DOWN]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.LEFT_UP]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.LEFT_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.LEFT_DOUBLE_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.RIGHT_DOWN]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.RIGHT_UP]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.RIGHT_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MIDDLE_DOWN]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MIDDLE_UP]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MIDDLE_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MOUSE_MOVE]: ScreenSpaceEventHandler.MotionEvent;
    [ScreenSpaceEventType.WHEEL]: number;
    [ScreenSpaceEventType.PINCH_START]: ScreenSpaceEventHandler.TwoPointEvent;
    [ScreenSpaceEventType.PINCH_END]: ScreenSpaceEventHandler.TwoPointEvent;
    [ScreenSpaceEventType.PINCH_MOVE]: ScreenSpaceEventHandler.TwoPointMotionEvent;
}[T];
export interface UseScreenSpaceEventHandlerOptions {
    /**
     * Modifier key
     */
    modifier?: MaybeRefOrGetter<KeyboardEventModifier | undefined>;
    /**
     * Whether to active the event listener.
     * @default true
     */
    isActive?: MaybeRefOrGetter<boolean>;
}
/**
 * Easily use the `ScreenSpaceEventHandler`,
 * when the dependent data changes or the component is unmounted,
 * the listener function will automatically reload or destroy.
 *
 * @param type Types of mouse event
 * @param inputAction Callback function for listening
 */
export declare function useScreenSpaceEventHandler<T extends ScreenSpaceEventType>(type?: MaybeRefOrGetter<T | undefined>, inputAction?: (event: ScreenSpaceEvent<T>) => any, options?: UseScreenSpaceEventHandlerOptions): WatchStopHandle;