useImageryLayerScope
Scopes ImageryLayerCollection mutations to the component lifecycle: when the component unmounts, every imagery layer added through add is removed automatically. Layers stack on top of each other, so dynamically added layers accumulate in viewer.imageryLayers if left unmanaged, covering the base map and consuming memory; add accepts an insertion index to control the stacking order, and for common layer loading prefer useImageryLayer.
WARNING
This is a low-level helper for custom collection management. Prefer the high-level hook (useImageryLayer) unless you need custom collection management.
Usage
ts
import { ImageryLayer, UrlTemplateImageryProvider } from 'cesium';
import { useImageryLayerScope } from 'vesium';
const { add } = useImageryLayerScope({ destroyOnRemove: true });
// The second argument is the insertion index: 0 inserts at the bottom
add(new ImageryLayer(new UrlTemplateImageryProvider({
url: 'https://example.com/{z}/{x}/{y}.png',
})), 0);Return Value
add(instance, index?)- Adds a layer;indexis an optional insertion index forwarded toimageryLayers.add(layer, index); accepts a Promiseremove(instance, destroy?)- Removes the layer;destroyis forwarded toimageryLayers.remove(layer, destroy); returns whether the removal succeededscope- A readonly reactiveSetof the added layers
Notes
- The target collection defaults to
useViewer().value.imageryLayers; pass a customImageryLayerCollectionviacollection(accepts a ref or getter). destroyOnRemoveis also used as the second argument ofimageryLayers.remove(layer, destroy)during unmount cleanup.
Type Definitions
typescript
import type { ImageryLayer, ImageryLayerCollection } from 'cesium';
import type { MaybeRefOrGetter } from 'vue';
export interface UseImageryLayerScopeOptions {
/**
* The collection of ImageryLayer to be added
* @default useViewer().value.imageryLayers
*/
collection?: MaybeRefOrGetter<ImageryLayerCollection | undefined>;
/**
* The second parameter passed to the `remove` function
*
* `imageryLayers.remove(imageryLayer,destroyOnRemove)`
*/
destroyOnRemove?: boolean;
}
/**
* Make `add` and `remove` operations of `ImageryLayerCollection` scoped,
* automatically remove `ImageryLayer` instance when component is unmounted.
*/
export declare function useImageryLayerScope(options?: UseImageryLayerScopeOptions): import("..").UseCollectionScopeReturn<ImageryLayer, [index?: number | undefined], [destroy?: boolean | undefined], boolean>;