useEntity

Used for reactive loading of Entity. It automatically destroys or reloads the Entity instance when the data changes.

Usage

<script setup lang="ts">
import * as Cesium from 'cesium';
import { useEntity, useViewer } from 'vesium';
import { shallowRef, watchPostEffect } from 'vue';

// use entity instance
const entity1 = useEntity(new Cesium.Entity({
  position: Cesium.Cartesian3.fromDegrees(150, 10),
  label: {
    font: '14px Arial',
    text: 'entity instance',
  },
}));

// use getter
const entity2 = useEntity(() => {
  return new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(150, 9),
    label: {
      font: '14px Arial',
      text: 'use getter',
    },
  });
});

const entityRef = shallowRef(new Cesium.Entity({
  position: Cesium.Cartesian3.fromDegrees(150, 8),
  label: {
    font: '14px Arial',
    text: 'use ref',
  },
}));

// use ref
const entity3 = useEntity(entityRef);

// use array
const entities = useEntity([
  new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(149, 7),
    label: {
      font: '14px Arial',
      text: 'array item 1',
    },
  }),
  new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(151, 7),
    label: {
      font: '14px Arial',
      text: 'array item 2',
    },
  }),
]);

const viewer = useViewer();
watchPostEffect(() => {
  if (entity1.value && entity2.value && entity3.value && entities.value) {
    viewer.value?.flyTo([
      entity1.value,
      entity2.value,
      entity3.value,
      ...entities.value!,
    ], {
      duration: 1,
    });
  }
});
</script>

<template>
</template>

// Overload 1: Load a single instance
const entity = useEntity(entity);

// Overload 2: Load an array of instances
const entities = useEntity([entity1, entity2]);

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

// Options
const entity = useEntity(entity, {
  collection, // Entity collection
  isActive, // Whether to activate
  evaluating: isLoading // Loading status reference
});

Type Definitions

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