useDataSource

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

Usage

<script setup lang="ts">
import * as Cesium from 'cesium';
import { useDataSource, useViewer } from 'vesium';
import { watchPostEffect } from 'vue';
import geojson from '../../.vitepress/static/geojson.json?url';

const dataSource = useDataSource(() => Cesium.GeoJsonDataSource.load(geojson));

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

<template>
</template>
vuesium

// Load a basic instance
const dataSource = useDataSource(someDataSource);

// Asynchronous loading
const dataSource = useDataSource(async () => await getDataSource());

// Load an array
const dataSources = useDataSource([dataSource1, dataSource2]);

const isLoading = ref(true);

// Use options
const dataSource = useDataSource(someDataSource, {
  collection: someCollection, // DataSource collection
  isActive: true, // Whether to activate
  evaluating: isLoading, // Loading status reference
  destroyOnRemove: true, // Whether to destroy when the DataSource is removed
});

Type Definitions

import type { DataSourceCollection } from 'cesium';
import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
import type { MaybeRefOrAsyncGetter } from '../toPromiseValue';
import type { CesiumDataSource } from '../utils';
export interface UseDataSourceOptions {
    /**
     * The collection of DataSource to be added
     * @default useViewer().value.dataSources
     */
    collection?: DataSourceCollection;
    /**
     * 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
     *
     * `dataSources.remove(dataSource,destroyOnRemove)`
     */
    destroyOnRemove?: MaybeRefOrGetter<boolean>;
}
/**
 * Add `DataSource` to the `DataSourceCollection`, automatically update when the data changes, and destroy the side effects caused by the previous `DataSource`.
 *
 * overload1: Parameter supports passing in a single value.
 *
 * @param dataSource The `DataSource` to added
 * @param options additional options
 *
 * @returns  computedRef of the `DataSource`
 *
 * @overload
 */
export declare function useDataSource<T extends CesiumDataSource = CesiumDataSource>(dataSource?: MaybeRefOrAsyncGetter<T | undefined>, options?: UseDataSourceOptions): ComputedRef<T | undefined>;
/**
 * Add `DataSource` to the `DataSourceCollection`, automatically update when the data changes, and destroy the side effects caused by the previous `DataSource`.
 *
 * overload1: Parameter supports passing in an array.
 *
 * @param dataSources The list of `DataSource` to added
 * @param options additional options
 *
 * @returns  computedRef of the `DataSource`
 *
 * @overload
 */
export declare function useDataSource<T extends CesiumDataSource = CesiumDataSource>(dataSources?: MaybeRefOrAsyncGetter<T[] | undefined>, options?: UseDataSourceOptions): ComputedRef<T[] | undefined>;