useImageryLayer

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

Usage

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

const isActive = ref(true);

const imageryLayer = useImageryLayer(
  new Cesium.ImageryLayer(new Cesium.GridImageryProvider({})),
  {
    isActive,
    destroyOnRemove: false,
  },
);

const viewer = useViewer();
watchPostEffect(() => {
  if (imageryLayer.value) {
    viewer.value?.flyTo(
      imageryLayer.value,
      {
        duration: 1,
      },
    );
  }
});
</script>

<template>
  <div
    p="10px"
  >
    <button @click="isActive = !isActive">
      visible:{{ isActive }}
    </button>
  </div>
</template>

// Load a basic instance
const images = useImageryLayer(layer);

// Load an asynchronous instance
const dataSource = useImageryLayer(async () => await getLayer());

// Load an array
const dataSources = useImageryLayer([layer1, layer2]);

const isLoading = ref(true);

// Options
const dataSource = useImageryLayer(layer, {
  collection, // ImageryLayer collection
  isActive, // Whether to activate
  evaluating: isLoading, // Loading status reference
  destroyOnRemove: false, // Whether to destroy when the ImageryLayer is removed
});

Type Definitions

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