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>;