跳至内容

useCameraState

响应式获取Camera实例状态

Usage

vue
<script setup lang="ts">
import { useCameraState } from 'vesium';

const {
  position,
  direction,
  up,
  right,
  positionCartographic,
  positionWC,
  directionWC,
  upWC,
  rightWC,
  viewRectangle,
  heading,
  pitch,
  roll,
  level,
} = useCameraState();
</script>

<template>
  <div
    h="250px"
    flex="~ col gap-y-10px"
    p="10px"
    of="scroll"
  >
    <pre> {{ { position, direction, up, right, positionCartographic, positionWC, directionWC, upWC, rightWC, viewRectangle, heading, pitch, roll, level } }}</pre>
  </div>
</template>

Type Definitions

typescript
import type { Camera, Cartesian3, Cartographic, Rectangle } from 'cesium';
import type { ComputedRef, MaybeRefOrGetter } from 'vue';
export interface UseCameraStateOptions {
    /**
     * The camera to use
     * @default useViewer().value.scene.camera
     */
    camera?: MaybeRefOrGetter<Camera | undefined>;
    /**
     * Camera event type to watch
     * @default `changed`
     */
    event?: MaybeRefOrGetter<'changed' | 'moveStart' | 'moveEnd'>;
    /**
     * Throttled delay duration (ms)
     * @default 8
     */
    delay?: number;
}
export interface UseCameraStateRetrun {
    /**
     * The camera
     */
    camera: ComputedRef<Camera | undefined>;
    /**
     * The position of the camera
     */
    position: ComputedRef<Cartesian3 | undefined>;
    /**
     * The view direction of the camer
     */
    direction: ComputedRef<Cartesian3 | undefined>;
    /**
     * The up direction of the camera
     */
    up: ComputedRef<Cartesian3 | undefined>;
    /**
     * The right direction of the camera
     */
    right: ComputedRef<Cartesian3 | undefined>;
    /**
     * Gets the {@link Cartographic} position of the camera, with longitude and latitude
     * expressed in radians and height in meters.  In 2D and Columbus View, it is possible
     * for the returned longitude and latitude to be outside the range of valid longitudes
     * and latitudes when the camera is outside the map.
     */
    positionCartographic: ComputedRef<Cartographic | undefined>;
    /**
     * Gets the position of the camera in world coordinates
     */
    positionWC: ComputedRef<Cartesian3 | undefined>;
    /**
     * Gets the view direction of the camera in world coordinates
     */
    directionWC: ComputedRef<Cartesian3 | undefined>;
    /**
     * Gets the up direction of the camera in world coordinates
     */
    upWC: ComputedRef<Cartesian3 | undefined>;
    /**
     * Gets the right direction of the camera in world coordinates
     */
    rightWC: ComputedRef<Cartesian3 | undefined>;
    /**
     * Computes the approximate visible rectangle on the ellipsoid
     */
    viewRectangle: ComputedRef<Rectangle | undefined>;
    /**
     * Gets the camera heading in radians
     */
    heading: ComputedRef<number | undefined>;
    /**
     * Gets the camera pitch in radians
     */
    pitch: ComputedRef<number | undefined>;
    /**
     * Gets the camera roll in radians
     */
    roll: ComputedRef<number | undefined>;
    /**
     * Gets the camera center hierarchy level
     */
    level: ComputedRef<number | undefined>;
}
/**
 *  Reactive Cesium Camera state
 * @param options options
 * @returns Reactive camera states
 */
export declare function useCameraState(options?: UseCameraStateOptions): UseCameraStateRetrun;