useCesiumEventListener

Easily use addEventListener in Cesium.Event instances, with automatic reloading or destruction of listener functions when dependent data changes or the component is unmounted.

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>

Suggestion

In Cesium, event triggers are often caused by real-time frame rendering, which may cause invalid refreshing of Vue's reactivity. Therefore, it is recommended to perform throttling on the listener functions. The throttle function provided by Vesium and refThrottled provided by VueUse can both facilitate throttling processing.

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;