useDataSourceScope
将 DataSourceCollection 的增删操作限定在组件生命周期内:组件卸载时,自动移除所有通过 add 添加的数据源。数据源通常异步加载,不清理会残留在 viewer 上继续加载;add 支持传入 Promise(解析成功后自动入集合),声明式数据源加载请优先使用 useDataSource。
WARNING
这是一个底层辅助函数,用于自定义集合管理。除非你需要自定义集合管理逻辑,否则优先使用高层 API(如 useDataSource)。
Usage
ts
import { CustomDataSource } from 'cesium';
import { useDataSourceScope } from 'vesium';
const { add } = useDataSourceScope({
destroyOnRemove: true, // 卸载清理时移除并销毁数据源
});
const dataSource = add(new CustomDataSource('demo'));
add(Promise.resolve(new CustomDataSource('async-demo'))); // add 支持 Promise返回值
add(instance)- 添加数据源;支持 Promise,解析成功后自动入集合;集合不可用时抛出collection is not definedremove(instance, destroy?)- 移除数据源,destroy透传给dataSources.remove;返回是否移除成功scope- 已添加数据源的只读响应式Set
注意事项
- 目标集合默认
useViewer().value.dataSources;可通过collection传入自定义DataSourceCollection(支持 ref / getter)。 destroyOnRemove同时作为卸载清理时dataSources.remove(dataSource, destroy)的第二个参数。
Type Definitions
typescript
import type { CesiumDataSource } from '@vesium/shared';
import type { DataSourceCollection } from 'cesium';
import type { MaybeRefOrGetter } from 'vue';
export interface UseDataSourceScopeOptions {
/**
* The collection of DataSource to be added
* @default useViewer().value.dataSources
*/
collection?: MaybeRefOrGetter<DataSourceCollection | undefined>;
/**
* The second parameter passed to the `remove` function
*
* `dataSources.remove(dataSource,destroyOnRemove)`
*/
destroyOnRemove?: boolean;
}
/**
* Scope the SideEffects of `DataSourceCollection` operations and automatically remove them when unmounted
*/
export declare function useDataSourceScope(options?: UseDataSourceScopeOptions): import("..").UseCollectionScopeReturn<CesiumDataSource, [], [destroy?: boolean | undefined], boolean>;