vesium 1.0.1-beta.51 → 1.0.1-beta.54

package/dist/index.mjs

@@ -1,6 +1,9 @@
-import { computedAsync, promiseTimeout, refThrottled, tryOnScopeDispose, useElementBounding, useElementSize, useMutationObserver, watchImmediate, watchThrottled } from "@vueuse/core";
-import { CallbackProperty, Cartesian2, Cartesian3, Cartographic, ConstantProperty, Ellipsoid, EllipsoidGeodesic, Material, Math as Math$1, ScreenSpaceEventHandler, ScreenSpaceEventType, Viewer, defined } from "cesium";
+import { computedAsync, refThrottled, tryOnScopeDispose, useElementBounding, useElementSize, useMutationObserver, watchImmediate, watchThrottled } from "@vueuse/core";
+import { Cartesian2, EllipsoidGeodesic, ScreenSpaceEventHandler, ScreenSpaceEventType, Viewer } from "cesium";
 import { computed, getCurrentScope, inject, markRaw, nextTick, provide, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toValue, watch, watchEffect } from "vue";
+import { cartesianToCanvasCoord, isDef, isFunction, isPromise, resolvePick, throttle, toCartesian3, tryRun } from "@vesium/shared";
+
+export * from "@vesium/shared"
 
 //#region createViewer/index.ts
 /**
@@ -11,6 +14,8 @@ const CREATE_VIEWER_INJECTION_KEY = Symbol("CREATE_VIEWER_INJECTION_KEY");
 * @internal
 */
 const CREATE_VIEWER_COLLECTION = /* @__PURE__ */ new WeakMap();
+/**
+*/
 function createViewer(...args) {
 	const viewer = shallowRef();
 	const readonlyViewer = shallowReadonly(viewer);
@@ -29,9 +34,7 @@ function createViewer(...args) {
 		const value = toRaw(toValue(arg1));
 		if (value instanceof Viewer) viewer.value = markRaw(value);
 		else if (value) {
-			const element = value;
-			const options = arg2;
-			viewer.value = new Viewer(element, options);
+			viewer.value = new Viewer(value, arg2);
 			onCleanup(() => !viewer.value?.isDestroyed() && viewer.value?.destroy());
 		} else viewer.value = void 0;
 	});
@@ -43,530 +46,6 @@ function createViewer(...args) {
 	});
 }
 
-//#endregion
-//#region utils/arrayDiff.ts
-/**
-* 计算两个数组的差异，返回新增和删除的元素
-*/
-function arrayDiff(list, oldList) {
-	const oldListSet = new Set(oldList);
-	const added = list.filter((obj) => !oldListSet.has(obj));
-	const newListSet = new Set(list);
-	const removed = oldList?.filter((obj) => !newListSet.has(obj)) ?? [];
-	return {
-		added,
-		removed
-	};
-}
-
-//#endregion
-//#region utils/canvasCoordToCartesian.ts
-/**
-* Convert canvas coordinates to Cartesian coordinates
-*
-* @param canvasCoord Canvas coordinates
-* @param scene Cesium.Scene instance
-* @param mode optional values are 'pickPosition' | 'globePick' | 'auto' | 'noHeight'  @default 'auto'
-*
-* `pickPosition`: Use scene.pickPosition for conversion, which can be used for picking models, oblique photography, etc.
-* However, if depth detection is not enabled (globe.depthTestAgainstTerrain=false), picking terrain or inaccurate issues may occur
-*
-* `globePick`: Use camera.getPickRay for conversion, which cannot be used for picking models or oblique photography,
-* but can be used for picking terrain. If terrain does not exist, the picked elevation is 0
-*
-* `auto`: Automatically determine which picking content to return
-*
-* Calculation speed comparison: globePick > auto >= pickPosition
-*/
-function canvasCoordToCartesian(canvasCoord, scene, mode = "auto") {
-	if (mode === "pickPosition") return scene.pickPosition(canvasCoord);
-	else if (mode === "globePick") {
-		const ray = scene.camera.getPickRay(canvasCoord);
-		return ray && scene.globe.pick(ray, scene);
-	} else {
-		if (scene.globe.depthTestAgainstTerrain) return scene.pickPosition(canvasCoord);
-		const position1 = scene.pickPosition(canvasCoord);
-		const ray = scene.camera.getPickRay(canvasCoord);
-		const position2 = ray && scene.globe.pick(ray, scene);
-		if (!position1) return position2;
-		const height1 = (position1 && Ellipsoid.WGS84.cartesianToCartographic(position1).height) ?? 0;
-		const height2 = (position2 && Ellipsoid.WGS84.cartesianToCartographic(position2).height) ?? 0;
-		return height1 < height2 ? position1 : position2;
-	}
-}
-
-//#endregion
-//#region utils/cartesianToCanvasCoord.ts
-/**
-* Convert Cartesian coordinates to canvas coordinates
-*
-* @param position Cartesian coordinates
-* @param scene Cesium.Scene instance
-*/
-function cartesianToCanvasCoord(position, scene) {
-	return scene.cartesianToCanvasCoordinates(position);
-}
-
-//#endregion
-//#region utils/is.ts
-const toString = Object.prototype.toString;
-function isDef(val) {
-	return typeof val !== "undefined";
-}
-function isBoolean(val) {
-	return typeof val === "boolean";
-}
-function isFunction(val) {
-	return typeof val === "function";
-}
-function isNumber(val) {
-	return typeof val === "number";
-}
-function isString(val) {
-	return typeof val === "string";
-}
-function isObject(val) {
-	return toString.call(val) === "[object Object]";
-}
-function isWindow(val) {
-	return typeof window !== "undefined" && toString.call(val) === "[object Window]";
-}
-function isPromise(val) {
-	return !!val && (typeof val === "object" || typeof val === "function") && typeof val.then === "function";
-}
-function isElement(val) {
-	return !!(val && val.nodeName && val.nodeType === 1);
-}
-const isArray = Array.isArray;
-function isBase64(val) {
-	const reg = /^\s*data:([a-z]+\/[\d+.a-z-]+(;[a-z-]+=[\da-z-]+)?)?(;base64)?,([\s\w!$%&'()*+,./:;=?@~-]*?)\s*$/i;
-	return reg.test(val);
-}
-function assertError(condition, error) {
-	if (condition) throw new Error(error);
-}
-
-//#endregion
-//#region utils/cesiumEquals.ts
-/**
-* Determines if two Cesium objects are equal.
-*
-* This function not only judges whether the instances are equal,
-* but also judges the equals method in the example.
-*
-* @param left The first Cesium object
-* @param right The second Cesium object
-* @returns Returns true if the two Cesium objects are equal, otherwise false
-*/
-function cesiumEquals(left, right) {
-	return left === right || isFunction(left?.equals) && left.equals(right) || isFunction(right?.equals) && right.equals(left);
-}
-
-//#endregion
-//#region utils/toCoord.ts
-/**
-* Converts coordinates to an array or object in the specified format.
-*
-* @param position The coordinate to be converted, which can be a Cartesian3, Cartographic, array, or object.
-* @param options Conversion options, including conversion type and whether to include altitude information.
-* @returns The converted coordinate, which may be an array or object. If the input position is empty, undefined is returned.
-*
-* @template T Conversion type, optional values are 'Array' or 'Object', @default 'Array'.
-* @template Alt Whether to include altitude information, default is false
-*/
-function toCoord(position, options = {}) {
-	if (!position) return void 0;
-	const { type = "Array", alt = false } = options;
-	let longitude, latitude, height;
-	if (position instanceof Cartesian3) {
-		const cartographic = Ellipsoid.WGS84.cartesianToCartographic(position);
-		longitude = Math$1.toDegrees(cartographic.longitude);
-		latitude = Math$1.toDegrees(cartographic.latitude);
-		height = cartographic.height;
-	} else if (position instanceof Cartographic) {
-		const cartographic = position;
-		longitude = Math$1.toDegrees(cartographic.longitude);
-		latitude = Math$1.toDegrees(cartographic.latitude);
-		height = cartographic.height;
-	} else if (Array.isArray(position)) {
-		longitude = Math$1.toDegrees(position[0]);
-		latitude = Math$1.toDegrees(position[1]);
-		height = position[2];
-	} else {
-		longitude = position.longitude;
-		latitude = position.latitude;
-		height = position.height;
-	}
-	if (type === "Array") return alt ? [
-		longitude,
-		latitude,
-		height
-	] : [longitude, latitude];
-	else return alt ? {
-		longitude,
-		latitude,
-		height
-	} : {
-		longitude,
-		latitude
-	};
-}
-
-//#endregion
-//#region utils/convertDMS.ts
-/**
-* Convert degrees to DMS (Degrees Minutes Seconds) format string
-*
-* @param degrees The angle value
-* @param precision The number of decimal places to retain for the seconds, defaults to 3
-* @returns A DMS formatted string in the format: degrees° minutes′ seconds″
-*/
-function dmsEncode(degrees, precision = 3) {
-	const str = `${degrees}`;
-	let i = str.indexOf(".");
-	const d = i < 0 ? str : str.slice(0, Math.max(0, i));
-	let m = "0";
-	let s = "0";
-	if (i > 0) {
-		m = `0${str.slice(Math.max(0, i))}`;
-		m = `${+m * 60}`;
-		i = m.indexOf(".");
-		if (i > 0) {
-			s = `0${m.slice(Math.max(0, i))}`;
-			m = m.slice(0, Math.max(0, i));
-			s = `${+s * 60}`;
-			i = s.indexOf(".");
-			s = s.slice(0, Math.max(0, i + 4));
-			s = (+s).toFixed(precision);
-		}
-	}
-	return `${Math.abs(+d)}°${+m}′${+s}″`;
-}
-/**
-* Decode a DMS (Degrees Minutes Seconds) formatted string to a decimal angle value
-*
-* @param dmsCode DMS formatted string, e.g. "120°30′45″N"
-* @returns The decoded decimal angle value, or 0 if decoding fails
-*/
-function dmsDecode(dmsCode) {
-	const [dd, msStr] = dmsCode.split("°") ?? [];
-	const [mm, sStr] = msStr?.split("′") ?? [];
-	const ss = sStr?.split("″")[0];
-	const d = Number(dd) || 0;
-	const m = (Number(mm) || 0) / 60;
-	const s = (Number(ss) || 0) / 60 / 60;
-	const degrees = d + m + s;
-	if (degrees === 0) return 0;
-	else {
-		let res = degrees;
-		if ([
-			"W",
-			"w",
-			"S",
-			"s"
-		].includes(dmsCode[dmsCode.length - 1])) res = -res;
-		return res;
-	}
-}
-/**
-* Convert latitude and longitude coordinates to degrees-minutes-seconds format
-*
-* @param position The latitude and longitude coordinates
-* @param precision The number of decimal places to retain for 'seconds', default is 3
-* @returns Returns the coordinates in degrees-minutes-seconds format, or undefined if the conversion fails
-*/
-function degreesToDms(position, precision = 3) {
-	const coord = toCoord(position, { alt: true });
-	if (!coord) return;
-	const [longitude, latitude, height] = coord;
-	const x = dmsEncode(longitude, precision);
-	const y = dmsEncode(latitude, precision);
-	return [
-		`${x}${longitude > 0 ? "E" : "W"}`,
-		`${y}${latitude > 0 ? "N" : "S"}`,
-		height
-	];
-}
-/**
-* Convert DMS (Degrees Minutes Seconds) format to decimal degrees for latitude and longitude coordinates
-*
-* @param dms The latitude or longitude coordinate in DMS format
-* @returns Returns the coordinate in decimal degrees format, or undefined if the conversion fails
-*/
-function dmsToDegrees(dms) {
-	const [x, y, height] = dms;
-	const longitude = dmsDecode(x);
-	const latitude = dmsDecode(y);
-	return [
-		longitude,
-		latitude,
-		Number(height) || 0
-	];
-}
-
-//#endregion
-//#region utils/isCesiumConstant.ts
-/**
-* Determines if the Cesium property is a constant.
-*
-* @param value Cesium property
-*/
-function isCesiumConstant(value) {
-	return !defined(value) || !!value.isConstant;
-}
-
-//#endregion
-//#region utils/material.ts
-/**
-* Only as a type fix for `Cesium.Material`
-*/
-var CesiumMaterial = class extends Material {
-	constructor(options) {
-		super(options);
-	}
-};
-/**
-* Get material from cache, alias of `Material._materialCache.getMaterial`
-*/
-function getMaterialCache(type) {
-	return Material._materialCache.getMaterial(type);
-}
-/**
-* Add material to Cesium's material cache, alias of `Material._materialCache.addMaterial`
-*/
-function addMaterialCache(type, material) {
-	return Material._materialCache.addMaterial(type, material);
-}
-
-//#endregion
-//#region utils/pick.ts
-/**
-* Analyze the result of Cesium's `scene.pick` and convert it to an array format
-*/
-function resolvePick(pick = {}) {
-	const { primitive, id, primitiveCollection, collection } = pick;
-	const entityCollection = id && id.entityCollection || null;
-	const dataSource = entityCollection && entityCollection.owner || null;
-	const ids = Array.isArray(id) ? id : [id].filter(Boolean);
-	return [
-		...ids,
-		primitive,
-		primitiveCollection,
-		collection,
-		entityCollection,
-		dataSource
-	].filter((e) => !!e);
-}
-/**
-* Determine if the given array of graphics is hit by Cesium's `scene.pick`
-*
-* @param pick The `scene.pick` object used for matching
-* @param graphic An array of graphics to check for hits
-*/
-function pickHitGraphic(pick, graphic) {
-	if (!Array.isArray(graphic) || !graphic.length) return false;
-	const elements = resolvePick(pick);
-	if (!elements.length) return false;
-	return elements.some((element) => graphic.includes(element));
-}
-
-//#endregion
-//#region utils/property.ts
-/**
-* Is Cesium.Property
-* @param value - The target object
-*/
-function isProperty(value) {
-	return value && isFunction(value.getValue);
-}
-/**
-* Converts a value that may be a Property into its target value, @see {toProperty} for the reverse operation
-* ```typescript
-* toPropertyValue('val') //=> 'val'
-* toPropertyValue(new ConstantProperty('val')) //=> 'val'
-* toPropertyValue(new CallbackProperty(()=>'val')) //=> 'val'
-* ```
-*
-* @param value - The value to convert
-*/
-function toPropertyValue(value, time) {
-	return isProperty(value) ? value.getValue(time) : value;
-}
-/**
-* Converts a value that may be a Property into a Property object, @see {toPropertyValue} for the reverse operation
-*
-* @param value - The property value or getter to convert, can be undefined or null
-* @param isConstant - The second parameter for converting to CallbackProperty
-* @returns Returns the converted Property object, if value is undefined or null, returns undefined
-*/
-function toProperty(value, isConstant = false) {
-	return isProperty(value) ? value : isFunction(value) ? new CallbackProperty(value, isConstant) : new ConstantProperty(value);
-}
-/**
-* Create a Cesium property key
-*
-* @param scope The host object
-* @param field The property name
-* @param maybeProperty Optional property or getter
-* @param readonly Whether the property is read-only
-*/
-function createPropertyField(scope, field, maybeProperty, readonly$1) {
-	let removeOwnerListener;
-	const ownerBinding = (value) => {
-		removeOwnerListener?.();
-		if (defined(value?.definitionChanged)) removeOwnerListener = value?.definitionChanged?.addEventListener(() => {
-			scope.definitionChanged.raiseEvent(scope, field, value, value);
-		});
-	};
-	const privateField = `_${field}`;
-	const property = toProperty(maybeProperty);
-	scope[privateField] = property;
-	ownerBinding(property);
-	if (readonly$1) Object.defineProperty(scope, field, { get() {
-		return scope[privateField];
-	} });
-	else Object.defineProperty(scope, field, {
-		get() {
-			return scope[privateField];
-		},
-		set(value) {
-			const previous = scope[privateField];
-			if (scope[privateField] !== value) {
-				scope[privateField] = value;
-				ownerBinding(value);
-				if (defined(scope.definitionChanged)) scope.definitionChanged.raiseEvent(scope, field, value, previous);
-			}
-		}
-	});
-}
-function createCesiumAttribute(scope, key, value, options = {}) {
-	const allowToProperty = !!options.toProperty;
-	const shallowClone = !!options.shallowClone;
-	const changedEventKey = options.changedEventKey || "definitionChanged";
-	const changedEvent = Reflect.get(scope, changedEventKey);
-	const privateKey = `_${String(key)}`;
-	const attribute = allowToProperty ? toProperty(value) : value;
-	Reflect.set(scope, privateKey, attribute);
-	const obj = { get() {
-		const value$1 = Reflect.get(scope, privateKey);
-		if (shallowClone) return Array.isArray(value$1) ? [...value$1] : { ...value$1 };
-		else return value$1;
-	} };
-	let previousListener;
-	const serial = (property, previous) => {
-		previousListener?.();
-		previousListener = property?.definitionChanged?.addEventListener(() => {
-			changedEvent?.raiseEvent.bind(changedEvent)(scope, key, property, previous);
-		});
-	};
-	if (!options.readonly) {
-		if (allowToProperty && isProperty(value)) serial(value);
-		obj.set = (value$1) => {
-			if (allowToProperty && !isProperty(value$1)) throw new Error(`The value of ${String(key)} must be a Cesium.Property object`);
-			const previous = Reflect.get(scope, privateKey);
-			if (previous !== value$1) {
-				Reflect.set(scope, privateKey, value$1);
-				changedEvent?.raiseEvent.bind(changedEvent)(scope, key, value$1, previous);
-				if (allowToProperty) serial(value$1);
-			}
-		};
-	}
-	Object.defineProperty(scope, key, obj);
-}
-function createCesiumProperty(scope, key, value, options = {}) {
-	return createCesiumAttribute(scope, key, value, {
-		...options,
-		toProperty: true
-	});
-}
-
-//#endregion
-//#region utils/throttle.ts
-/**
-* Throttle function, which limits the frequency of execution of the function
-*
-* @param callback raw function
-* @param delay Throttled delay duration (ms)
-* @param trailing Trigger callback function after last call @default true
-* @param leading Trigger the callback function immediately on the first call @default false
-* @returns Throttle function
-*/
-function throttle(callback, delay = 100, trailing = true, leading = false) {
-	const restList = [];
-	let tracked = false;
-	const trigger = async () => {
-		await promiseTimeout(delay);
-		tracked = false;
-		if (leading) try {
-			callback(...restList[0]);
-		} catch (error) {
-			console.error(error);
-		}
-		if (trailing && (!leading || restList.length > 1)) try {
-			callback(...restList[restList.length - 1]);
-		} catch (error) {
-			console.error(error);
-		}
-		restList.length = 0;
-	};
-	return (...rest) => {
-		if (restList.length < 2) restList.push(rest);
-		else restList[1] = rest;
-		if (!tracked) {
-			tracked = true;
-			trigger();
-		}
-	};
-}
-
-//#endregion
-//#region utils/toCartesian3.ts
-/**
-* Converts position to a coordinate point in the Cartesian coordinate system
-*
-* @param position Position information, which can be a Cartesian coordinate point (Cartesian3), a geographic coordinate point (Cartographic), an array, or an object containing WGS84 latitude, longitude, and height information
-* @returns The converted Cartesian coordinate point. If the input parameter is invalid, undefined is returned
-*/
-function toCartesian3(position) {
-	if (!position) return void 0;
-	if (position instanceof Cartesian3) return position.clone();
-	else if (position instanceof Cartographic) return Ellipsoid.WGS84.cartographicToCartesian(position);
-	else if (Array.isArray(position)) return Cartesian3.fromDegrees(position[0], position[1], position[2]);
-	else return Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
-}
-
-//#endregion
-//#region utils/toCartographic.ts
-/**
-* Converts a position to a Cartographic coordinate point
-*
-* @param position Position information, which can be a Cartesian3 coordinate point, a Cartographic coordinate point, an array, or an object containing WGS84 longitude, latitude, and height information
-* @returns The converted Cartographic coordinate point, or undefined if the input parameter is invalid
-*/
-function toCartographic(position) {
-	if (!position) return void 0;
-	if (position instanceof Cartesian3) return Ellipsoid.WGS84.cartesianToCartographic(position);
-	else if (position instanceof Cartographic) return position.clone();
-	else if (Array.isArray(position)) return Cartographic.fromDegrees(position[0], position[1], position[2]);
-	else return Cartographic.fromDegrees(position.longitude, position.latitude, position.height);
-}
-
-//#endregion
-//#region utils/tryRun.ts
-/**
-* Safely execute the provided function without throwing errors,
-* essentially a simple wrapper around a `try...catch...` block
-*/
-function tryRun(fn) {
-	return (...args) => {
-		try {
-			return fn?.(...args);
-		} catch (error) {
-			console.error(error);
-		}
-	};
-}
-
 //#endregion
 //#region toPromiseValue/index.ts
 /**
@@ -576,6 +55,7 @@ function tryRun(fn) {
 *
 * @param source The source value, which can be a reactive reference or an asynchronous getter.
 * @param options Conversion options
+* @returns The converted value.
 *
 * @example
 * ```ts
@@ -608,6 +88,11 @@ async function toPromiseValue(source, options = {}) {
 * Easily use the `addEventListener` in `Cesium.Event` instances,
 * when the dependent data changes or the component is unmounted,
 * the listener function will automatically reload or destroy.
+*
+* @param event The Cesium.Event instance
+* @param listener The listener function
+* @param options additional options
+* @returns  A function that can be called to remove the event listener
 */
 function useCesiumEventListener(event, listener, options = {}) {
 	const isActive = toRef(options.isActive ?? true);
@@ -652,6 +137,8 @@ function useViewer() {
 //#region useCameraState/index.ts
 /**
 *  Reactive Cesium Camera state
+* @param options options
+* @returns Reactive camera states
 */
 function useCameraState(options = {}) {
 	let getCamera = options.camera;
@@ -703,6 +190,8 @@ function computeLevel(height) {
 //#region useCesiumFps/index.ts
 /**
 * Reactive get the frame rate of Cesium
+* @param options options
+* @returns Reactive fps states
 */
 function useCesiumFps(options = {}) {
 	const { delay = 100 } = options;
@@ -727,14 +216,13 @@ function useCesiumFps(options = {}) {
 /**
 * Scope the SideEffects of Cesium-related `Collection` and automatically remove them when unmounted.
 * - note: This is a basic function that is intended to be called by other lower-level function
-* @param addFn - add SideEffect function.  eg.`entites.add`
-* @param removeFn - Clean SideEffect function.  eg.`entities.remove`
-* @param removeScopeArgs - The parameters to pass for `removeScope` triggered when the component is unmounted
+* @returns Contains side effect addition and removal functions
 */
-function useCollectionScope(addFn, removeFn, removeScopeArgs) {
+function useCollectionScope(options) {
+	const { addEffect, removeEffect, removeScopeArgs } = options;
 	const scope = shallowReactive(/* @__PURE__ */ new Set());
 	const add = (instance, ...args) => {
-		const result = addFn(instance, ...args);
+		const result = addEffect(instance, ...args);
 		if (isPromise(result)) return new Promise((resolve, reject) => {
 			result.then((i) => {
 				scope.add(i);
@@ -748,7 +236,7 @@ function useCollectionScope(addFn, removeFn, removeScopeArgs) {
 	};
 	const remove = (instance, ...args) => {
 		scope.delete(instance);
-		return removeFn(instance, ...args);
+		return removeEffect(instance, ...args);
 	};
 	const removeWhere = (predicate, ...args) => {
 		scope.forEach((instance) => {
@@ -777,8 +265,7 @@ function useDataSource(dataSources, options = {}) {
 	const result = computedAsync(() => toPromiseValue(dataSources), void 0, { evaluating });
 	const viewer = useViewer();
 	watchEffect((onCleanup) => {
-		const _isActive = toValue(isActive);
-		if (_isActive) {
+		if (toValue(isActive)) {
 			const list = Array.isArray(result.value) ? [...result.value] : [result.value];
 			const _collection = collection ?? viewer.value?.dataSources;
 			list.forEach((item) => item && _collection?.add(item));
@@ -794,7 +281,7 @@ function useDataSource(dataSources, options = {}) {
 //#endregion
 //#region useDataSourceScope/index.ts
 /**
-* // Scope the SideEffects of `DataSourceCollection` operations and automatically remove them when unmounted
+* Scope the SideEffects of `DataSourceCollection` operations and automatically remove them when unmounted
 */
 function useDataSourceScope(options = {}) {
 	const { collection: _collection, destroyOnRemove } = options;
@@ -802,21 +289,25 @@ function useDataSourceScope(options = {}) {
 	const collection = computed(() => {
 		return toValue(_collection) ?? viewer.value?.dataSources;
 	});
-	const addFn = (dataSource) => {
-		if (!collection.value) throw new Error("collection is not defined");
-		return collection.value.add(dataSource);
-	};
-	const removeFn = (dataSource, destroy) => {
-		return !!collection.value?.remove(dataSource, destroy);
-	};
-	const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, [destroyOnRemove]);
-	return {
-		scope,
-		add,
-		remove,
-		removeWhere,
-		removeScope
-	};
+	return useCollectionScope({
+		addEffect(instance) {
+			if (!collection.value) throw new Error("collection is not defined");
+			if (isPromise(instance)) return new Promise((resolve, reject) => {
+				instance.then((i) => {
+					collection.value.add(i);
+					resolve(i);
+				}).catch((error) => reject(error));
+			});
+			else {
+				collection.value.add(instance);
+				return instance;
+			}
+		},
+		removeEffect(instance, destroy) {
+			return !!collection.value?.remove(instance, destroy);
+		},
+		removeScopeArgs: [destroyOnRemove]
+	});
 }
 
 //#endregion
@@ -836,8 +327,8 @@ function useElementOverlay(target, position, options = {}) {
 		if (!viewer.value?.scene) return;
 		if (!cartesian3.value) coord.value = void 0;
 		else {
-			const reslut = cartesianToCanvasCoord(cartesian3.value, viewer.value.scene);
-			coord.value = !Cartesian2.equals(reslut, coord.value) ? reslut : coord.value;
+			const result = cartesianToCanvasCoord(cartesian3.value, viewer.value.scene);
+			coord.value = !Cartesian2.equals(result, coord.value) ? result : coord.value;
 		}
 	});
 	const canvasBounding = useElementBounding(() => viewer.value?.canvas.parentElement);
@@ -898,8 +389,7 @@ function useEntity(data, options = {}) {
 	const result = computedAsync(() => toPromiseValue(data), [], { evaluating });
 	const viewer = useViewer();
 	watchEffect((onCleanup) => {
-		const _isActive = toValue(isActive);
-		if (_isActive) {
+		if (toValue(isActive)) {
 			const list = Array.isArray(result.value) ? [...result.value] : [result.value];
 			const _collection = collection ?? viewer.value?.entities;
 			list.forEach((item) => item && _collection?.add(item));
@@ -923,22 +413,25 @@ function useEntityScope(options = {}) {
 	const collection = computed(() => {
 		return toValue(_collection) ?? viewer.value?.entities;
 	});
-	const addFn = (entity) => {
-		if (!collection.value) throw new Error("collection is not defined");
-		if (!collection.value.contains(entity)) collection.value.add(entity);
-		return entity;
-	};
-	const removeFn = (entity) => {
-		return !!collection.value?.remove(entity);
-	};
-	const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, []);
-	return {
-		scope,
-		add,
-		remove,
-		removeWhere,
-		removeScope
-	};
+	return useCollectionScope({
+		addEffect(instance) {
+			if (!collection.value) throw new Error("collection is not defined");
+			if (isPromise(instance)) return new Promise((resolve, reject) => {
+				instance.then((i) => {
+					collection.value.add(i);
+					resolve(i);
+				}).catch((error) => reject(error));
+			});
+			else {
+				collection.value.add(instance);
+				return instance;
+			}
+		},
+		removeEffect(instance) {
+			return !!collection.value?.remove(instance);
+		},
+		removeScopeArgs: []
+	});
 }
 
 //#endregion
@@ -1161,7 +654,7 @@ function useGraphicEvent() {
 	const collection = /* @__PURE__ */ new WeakMap();
 	const cursorCollection = /* @__PURE__ */ new WeakMap();
 	const dragCursorCollection = /* @__PURE__ */ new WeakMap();
-	const removeGraphicEvent = (graphic, type, listener) => {
+	const remove = (graphic, type, listener) => {
 		const _graphic = graphic === "global" ? GLOBAL_GRAPHIC_SYMBOL : graphic;
 		collection?.get(_graphic)?.get(type)?.delete(listener);
 		cursorCollection?.get(_graphic)?.get(type)?.delete(listener);
@@ -1174,13 +667,12 @@ function useGraphicEvent() {
 		if (dragCursorCollection?.get(_graphic)?.get(type)?.size === 0) dragCursorCollection?.get(_graphic)?.delete(type);
 		if (dragCursorCollection?.get(_graphic)?.size === 0) dragCursorCollection?.delete(_graphic);
 	};
-	const addGraphicEvent = (graphic, type, listener, options = {}) => {
+	const add = (graphic, type, listener, options = {}) => {
 		const _graphic = graphic === "global" ? GLOBAL_GRAPHIC_SYMBOL : graphic;
 		collection.get(_graphic) ?? collection.set(_graphic, /* @__PURE__ */ new Map());
 		const eventTypeMap = collection.get(_graphic);
 		eventTypeMap.get(type) ?? eventTypeMap.set(type, /* @__PURE__ */ new Set());
-		const listeners = eventTypeMap.get(type);
-		listeners.add(listener);
+		eventTypeMap.get(type).add(listener);
 		let { cursor = "pointer", dragCursor } = options;
 		if (isDef(cursor)) {
 			const _cursor = isFunction(cursor) ? cursor : () => cursor;
@@ -1188,16 +680,16 @@ function useGraphicEvent() {
 			cursorCollection.get(_graphic).get(type) ?? cursorCollection.get(_graphic).set(type, /* @__PURE__ */ new Map());
 			cursorCollection.get(_graphic).get(type).set(listener, _cursor);
 		}
-		if (type === "DRAG") dragCursor ??= (event) => event?.dragging ? "crosshair" : void 0;
+		if (type === "DRAG") dragCursor ??= ((event) => event?.dragging ? "crosshair" : void 0);
 		if (isDef(dragCursor)) {
 			const _dragCursor = isFunction(dragCursor) ? dragCursor : () => dragCursor;
 			dragCursorCollection.get(_graphic) ?? dragCursorCollection.set(_graphic, /* @__PURE__ */ new Map());
 			dragCursorCollection.get(_graphic).get(type) ?? dragCursorCollection.get(_graphic).set(type, /* @__PURE__ */ new Map());
 			dragCursorCollection.get(_graphic).get(type).set(listener, _dragCursor);
 		}
-		return () => removeGraphicEvent(graphic, type, listener);
+		return () => remove(graphic, type, listener);
 	};
-	const clearGraphicEvent = (graphic, type) => {
+	const clear = (graphic, type) => {
 		const _graphic = graphic === "global" ? GLOBAL_GRAPHIC_SYMBOL : graphic;
 		if (type === "all") {
 			collection.delete(_graphic);
@@ -1213,16 +705,14 @@ function useGraphicEvent() {
 		if (dragCursorCollection?.get(_graphic)?.size === 0) dragCursorCollection?.delete(_graphic);
 	};
 	for (const type of POSITIONED_EVENT_TYPES) usePositioned(type, (event) => {
-		const graphics = resolvePick(event.pick);
-		graphics.concat(GLOBAL_GRAPHIC_SYMBOL).forEach((graphic) => {
+		resolvePick(event.pick).concat(GLOBAL_GRAPHIC_SYMBOL).forEach((graphic) => {
 			collection.get(graphic)?.get(type)?.forEach((fn) => tryRun(fn)?.(event));
 		});
 	});
 	const dragging = ref(false);
 	const viewer = useViewer();
 	useHover((event) => {
-		const graphics = resolvePick(event.pick).concat(GLOBAL_GRAPHIC_SYMBOL);
-		graphics.forEach((graphic) => {
+		resolvePick(event.pick).concat(GLOBAL_GRAPHIC_SYMBOL).forEach((graphic) => {
 			collection.get(graphic)?.get("HOVER")?.forEach((fn) => tryRun(fn)?.(event));
 			if (!dragging.value) cursorCollection.get(graphic)?.forEach((map) => {
 				map.forEach((fn) => {
@@ -1246,9 +736,9 @@ function useGraphicEvent() {
 		});
 	});
 	return {
-		addGraphicEvent,
-		removeGraphicEvent,
-		clearGraphicEvent
+		add,
+		remove,
+		clear
 	};
 }
 
@@ -1259,8 +749,7 @@ function useImageryLayer(data, options = {}) {
 	const result = computedAsync(() => toPromiseValue(data), [], { evaluating });
 	const viewer = useViewer();
 	watchEffect((onCleanup) => {
-		const _isActive = toValue(isActive);
-		if (_isActive) {
+		if (toValue(isActive)) {
 			const list = Array.isArray(result.value) ? [...result.value] : [result.value];
 			const _collection = collection ?? viewer.value?.imageryLayers;
 			if (collection?.isDestroyed()) return;
@@ -1296,22 +785,25 @@ function useImageryLayerScope(options = {}) {
 	const collection = computed(() => {
 		return toValue(_collection) ?? viewer.value?.imageryLayers;
 	});
-	const addFn = (imageryLayer, index) => {
-		if (!collection.value) throw new Error("collection is not defined");
-		collection.value.add(imageryLayer, index);
-		return imageryLayer;
-	};
-	const removeFn = (imageryLayer, destroy) => {
-		return !!collection.value?.remove(imageryLayer, destroy);
-	};
-	const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, [destroyOnRemove]);
-	return {
-		scope,
-		add,
-		remove,
-		removeWhere,
-		removeScope
-	};
+	return useCollectionScope({
+		addEffect(instance, index) {
+			if (!collection.value) throw new Error("collection is not defined");
+			if (isPromise(instance)) return new Promise((resolve, reject) => {
+				instance.then((i) => {
+					collection.value.add(i, index);
+					resolve(i);
+				}).catch((error) => reject(error));
+			});
+			else {
+				collection.value.add(instance, index);
+				return instance;
+			}
+		},
+		removeEffect(instance, destroy) {
+			return !!collection.value?.remove(instance, destroy);
+		},
+		removeScopeArgs: [destroyOnRemove]
+	});
 }
 
 //#endregion
@@ -1322,8 +814,7 @@ function usePostProcessStage(data, options = {}) {
 	const viewer = useViewer();
 	watchEffect((onCleanup) => {
 		if (!viewer.value) return;
-		const _isActive = toValue(isActive);
-		if (_isActive) {
+		if (toValue(isActive)) {
 			const list = Array.isArray(result.value) ? [...result.value] : [result.value];
 			const _collection = collection ?? viewer.value.scene.postProcessStages;
 			list.forEach((item) => item && _collection.add(item));
@@ -1347,21 +838,22 @@ function usePostProcessStageScope(options = {}) {
 	const collection = computed(() => {
 		return toValue(_collection) ?? viewer.value?.postProcessStages;
 	});
-	const addFn = (postProcessStage) => {
-		if (!collection.value) throw new Error("collection is not defined");
-		return collection.value.add(postProcessStage);
-	};
-	const removeFn = (postProcessStage) => {
-		return !!collection.value?.remove(postProcessStage);
-	};
-	const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, []);
-	return {
-		scope,
-		add,
-		remove,
-		removeWhere,
-		removeScope
-	};
+	return useCollectionScope({
+		addEffect(instance) {
+			if (!collection.value) throw new Error("collection is not defined");
+			if (isPromise(instance)) return new Promise((resolve, reject) => {
+				instance.then((instance$1) => {
+					collection.value.add(instance$1);
+					resolve(instance$1);
+				}).catch((error) => reject(error));
+			});
+			else return collection.value.add(instance);
+		},
+		removeEffect(instance, ...args) {
+			return !!collection.value?.remove(instance, ...args);
+		},
+		removeScopeArgs: []
+	});
 }
 
 //#endregion
@@ -1371,8 +863,7 @@ function usePrimitive(data, options = {}) {
 	const result = computedAsync(() => toPromiseValue(data), void 0, { evaluating });
 	const viewer = useViewer();
 	watchEffect((onCleanup) => {
-		const _isActive = toValue(isActive);
-		if (_isActive) {
+		if (toValue(isActive)) {
 			const list = Array.isArray(result.value) ? [...result.value] : [result.value];
 			const _collection = collection === "ground" ? viewer.value?.scene.groundPrimitives : collection ?? viewer.value?.scene.primitives;
 			list.forEach((item) => item && _collection?.add(item));
@@ -1394,16 +885,22 @@ function usePrimitiveScope(options = {}) {
 	const { collection: _collection } = options;
 	const viewer = useViewer();
 	const collection = computed(() => {
-		return toValue(_collection) ?? viewer.value?.scene.primitives;
+		const value = toValue(_collection);
+		return value === "ground" ? viewer.value?.scene?.groundPrimitives : value || viewer.value?.scene.primitives;
+	});
+	const { scope, add, remove, removeWhere, removeScope } = useCollectionScope({
+		addEffect(instance, ...args) {
+			if (!collection.value) throw new Error("collection is not defined");
+			if (isPromise(instance)) return new Promise((resolve, reject) => {
+				instance.then((instance$1) => resolve(collection.value.add(instance$1, ...args))).catch((error) => reject(error));
+			});
+			else return collection.value.add(instance, ...args);
+		},
+		removeEffect(instance) {
+			return !!collection.value?.remove(instance);
+		},
+		removeScopeArgs: []
 	});
-	const addFn = (primitive) => {
-		if (!collection.value) throw new Error("collection is not defined");
-		return collection.value.add(primitive);
-	};
-	const removeFn = (primitive) => {
-		return !!collection.value?.remove(primitive);
-	};
-	const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, []);
 	return {
 		scope,
 		add,
@@ -1472,10 +969,7 @@ function useScaleBar(options = {}) {
 		const leftPosition = scene.globe.pick(left, scene);
 		const rightPosition = scene.globe.pick(right, scene);
 		if (!leftPosition || !rightPosition) return;
-		const leftCartographic = scene.globe.ellipsoid.cartesianToCartographic(leftPosition);
-		const rightCartographic = scene.globe.ellipsoid.cartesianToCartographic(rightPosition);
-		const geodesic = new EllipsoidGeodesic(leftCartographic, rightCartographic);
-		pixelDistance.value = geodesic.surfaceDistance;
+		pixelDistance.value = new EllipsoidGeodesic(scene.globe.ellipsoid.cartesianToCartographic(leftPosition), scene.globe.ellipsoid.cartesianToCartographic(rightPosition)).surfaceDistance;
 	};
 	watchImmediate(viewer, () => setPixelDistance());
 	useCesiumEventListener(() => viewer.value?.camera.changed, throttle(setPixelDistance, delay));
@@ -1483,10 +977,7 @@ function useScaleBar(options = {}) {
 		if (pixelDistance.value) return distances.find((item) => pixelDistance.value * maxPixelRef.value > item);
 	});
 	const width = computed(() => {
-		if (distance.value && pixelDistance.value) {
-			const value = distance.value / pixelDistance.value;
-			return value;
-		}
+		if (distance.value && pixelDistance.value) return distance.value / pixelDistance.value;
 		return 0;
 	});
 	const distanceText = computed(() => {
@@ -1512,12 +1003,11 @@ function useSceneDrillPick(windowPosition, options = {}) {
 	const { width = 3, height = 3, limit, throttled = 8, isActive = true } = options;
 	const viewer = useViewer();
 	const position = refThrottled(computed(() => toValue(windowPosition)), throttled, false, true);
-	const pick = computed(() => {
+	return computed(() => {
 		if (position.value && toValue(isActive)) return viewer.value?.scene.drillPick(position.value, toValue(limit), toValue(width), toValue(height));
 	});
-	return pick;
 }
 
 //#endregion
-export { CREATE_VIEWER_COLLECTION, CREATE_VIEWER_INJECTION_KEY, CesiumMaterial, addMaterialCache, arrayDiff, assertError, canvasCoordToCartesian, cartesianToCanvasCoord, cesiumEquals, createCesiumAttribute, createCesiumProperty, createPropertyField, createViewer, degreesToDms, dmsDecode, dmsEncode, dmsToDegrees, getMaterialCache, isArray, isBase64, isBoolean, isCesiumConstant, isDef, isElement, isFunction, isNumber, isObject, isPromise, isProperty, isString, isWindow, pickHitGraphic, resolvePick, throttle, toCartesian3, toCartographic, toCoord, toPromiseValue, toProperty, toPropertyValue, tryRun, useCameraState, useCesiumEventListener, useCesiumFps, useCollectionScope, useDataSource, useDataSourceScope, useElementOverlay, useEntity, useEntityScope, useGraphicEvent, useImageryLayer, useImageryLayerScope, usePostProcessStage, usePostProcessStageScope, usePrimitive, usePrimitiveScope, useScaleBar, useSceneDrillPick, useScenePick, useScreenSpaceEventHandler, useViewer };
+export { CREATE_VIEWER_COLLECTION, CREATE_VIEWER_INJECTION_KEY, createViewer, toPromiseValue, useCameraState, useCesiumEventListener, useCesiumFps, useCollectionScope, useDataSource, useDataSourceScope, useElementOverlay, useEntity, useEntityScope, useGraphicEvent, useImageryLayer, useImageryLayerScope, usePostProcessStage, usePostProcessStageScope, usePrimitive, usePrimitiveScope, useScaleBar, useSceneDrillPick, useScenePick, useScreenSpaceEventHandler, useViewer };
 //# sourceMappingURL=index.mjs.map