useImageryLayer

用于响应式加载 Cesium 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(
  async () => new Cesium.ImageryLayer(new Cesium.GridImageryProvider({})),
  {
    isActive,
    destroyOnRemove: false,
    index: 9999,
  },
);

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>

import { useImageryLayer } from 'vesium';

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

// 异步加载
const asyncLayer = useImageryLayer(async () => await getLayer());

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

const isLoading = ref(true);

// 使用配置项
const activeLayers = useImageryLayer(layers, {
  collection: viewer.imageryLayers, // 目标图层集合，默认使用 useViewer().scene.imageryLayers
  isActive: true, // 是否激活（控制图层是否添加到集合）
  evaluating: isLoading, // 加载状态引用
  destroyOnRemove: true, // 当图层移除时是否自动销毁，默认 true
});

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 | undefined>;
    /**
     * The second parameter passed to the `add` function
     *
     * `imageryLayers.add(layer,index)`
     */
    index?: MaybeRefOrGetter<number | undefined>;
}
/**
 * Add `ImageryLayer` to the `ImageryLayerCollection`, automatically update when the data changes, and destroy the side effects caused by the previous `ImageryLayer`.
 *
 * Overload 1: 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`.
 *
 * Overload 2: Parameter supports passing in an array.
 */
export declare function useImageryLayer<T extends ImageryLayer = ImageryLayer>(layers?: MaybeRefOrAsyncGetter<Array<T | undefined> | undefined>, options?: UseImageryLayerOptions): ComputedRef<T[] | undefined>;
//# sourceMappingURL=index.d.ts.map