useCesiumEventListener

轻松使用Cesium.Event实例中的addEventListener， 当依赖数据发生变化或组件被卸载时，监听函数会自动重新重载或销毁。

Usage

<script setup lang="ts">
import { useCesiumEventListener, useViewer } from 'vesium';
import { ref } from 'vue';

const viewer = useViewer();

const changedSymbol = ref('no change');

useCesiumEventListener(() => viewer.value?.camera.moveStart, () => {
  changedSymbol.value = 'moveStart';
});

useCesiumEventListener(() => viewer.value?.camera.moveEnd, () => {
  changedSymbol.value = 'moveEnd';
});
</script>

<template>
  <div
    flex="~ col gap-y-10px"
    p="10px"
  >
    Camera Changed : {{ changedSymbol }}
  </div>
</template>

建议

在Cesium中，事件的触发往往是实时帧渲染引发的，可能会照成vue响应式无效刷新，所以监听函数最好进行节流处理。

Vesium提供的throttle函数、VueUse提供 refThrottled，都的可以很方便的进行节流处理。

import { refThrottled } from '@vueuse/core';
import { useCesiumEventListener } from 'vesium';
import { throttle } from '../utils';

const listener = throttle(() => {
  // TODO
}, 100);
useCesiumEventListener(() => viewer.value?.scene.postRender, listener);

const current = refThrottled(ref(new Date().getTime()), 100);
useCesiumEventListener(() => viewer.value?.scene.postRender, () => {
  current.value = new Date().getTime();
});

Type Definitions

import type { Arrayable, FunctionArgs } from '@vueuse/core';
import type { Event } from 'cesium';
import type { MaybeRefOrGetter, WatchStopHandle } from 'vue';
export interface UseCesiumEventListenerOptions {
    /**
     * Whether to active the event listener.
     * @default true
     */
    isActive?: MaybeRefOrGetter<boolean>;
}
/**
 * Easily use the `addEventListener` in `Cesium.Event` instances,
 * when the dependent data changes or the component is unmounted,
 * the listener function will automatically reload or destroy.
 *
 * @param event The Cesium.Event instance
 * @param listener The listener function
 * @param options additional options
 * @returns  A function that can be called to remove the event listener
 */
export declare function useCesiumEventListener<FN extends FunctionArgs<any[]>>(event: Arrayable<Event<FN> | undefined> | Arrayable<MaybeRefOrGetter<Event<FN> | undefined>> | MaybeRefOrGetter<Arrayable<Event<FN> | undefined>>, listener: FN, options?: UseCesiumEventListenerOptions): WatchStopHandle;