useImageryLayer

用于响应式加载ImageryLayer，当数据变化时自动销毁或重载imageryLayer实例

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>

// 加载基础实例
const images = useImageryLayer(layer);

// 加载异步实例
const dataSource = useImageryLayer(async () => await getLayer());

// 加载数组
const dataSources = useImageryLayer([layer1, layer2]);

const isLoading = ref(true);

// 配置项
const dataSource = useImageryLayer(layer, {
  collection,
  isActive,
  evaluating: isLoading,
  destroyOnRemove: false,
});

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