跳至内容

usePrimitive

用于响应式加载Primitive,当数据变化时自动销毁或重载primitive实例

Usage

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

const billboardCollection = usePrimitive(() => {
  const rotationMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(0)));
  const modelMatrix = Cesium.Matrix4.multiply(Cesium.Matrix4.IDENTITY, rotationMatrix, new Cesium.Matrix4());
  return new Cesium.BillboardCollection({ modelMatrix });
});

watchEffect((onCleanup) => {
  const label = billboardCollection.value?.add(
    new Cesium.Billboard({
      position: Cesium.Cartesian3.fromDegrees(-80, 20),
      image: '/favicon.svg',
      width: 50,
      height: 50,
    }, billboardCollection.value),
  );
  onCleanup(() => {
    try {
      label && !billboardCollection.value?.isDestroyed() && billboardCollection.value?.remove(label);
    }
    catch (error) {
      console.error(error);
    }
  });
});
</script>

<template>
</template>
ts
// overLoad1:加载单项实例
const primitive = usePrimitive(primitive);
const primitive = usePrimitive(new Cesiumn.Cesium3DTileset());

// overLoad2:加载数组实例
const primitives = usePrimitive([primitive, primitive]);

const isActive = ref(true);
const isLoading = ref(true);

// 配置项
const primitive = usePrimitive(primitive, {
  collection,
  isActive,
  evaluating: isLoading
});

Type Definitions

typescript
import type { PrimitiveCollection } from 'cesium';
import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
import type { MaybeRefOrAsyncGetter } from '../toPromiseValue';
export interface UsePrimitiveOptions {
    /**
     * The collection of Primitive to be added
     * - `ground` : `useViewer().scene.groundPrimitives`
     * @default useViewer().scene.primitives
     */
    collection?: PrimitiveCollection | 'ground';
    /**
     * default value of `isActive`
     * @default true
     */
    isActive?: MaybeRefOrGetter<boolean>;
    /**
     * Ref passed to receive the updated of async evaluation
     */
    evaluating?: Ref<boolean>;
}
/**
 * Add `Primitive` to the `PrimitiveCollection`, automatically update when the data changes, and destroy the side effects caused by the previous `Primitive`.
 *
 * overLoaded1: Parameter supports passing in a single value.
 */
export declare function usePrimitive<T = any>(primitive?: MaybeRefOrAsyncGetter<T | undefined>, options?: UsePrimitiveOptions): ComputedRef<T | undefined>;
/**
 * Add `Primitive` to the `PrimitiveCollection`, automatically update when the data changes, and destroy the side effects caused by the previous `Primitive`.
 *
 * overLoaded2: Parameter supports passing in an array.
 */
export declare function usePrimitive<T = any>(primitives?: MaybeRefOrAsyncGetter<Array<T | undefined>>, options?: UsePrimitiveOptions): ComputedRef<T[] | undefined>;