vesium 1.0.1-beta.50 → 1.0.1-beta.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1420 -1318
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1323 -0
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +1323 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.iife.js +1624 -1519
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +2 -2
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.min.cjs +2 -2
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.mjs +2 -2
- package/dist/index.min.mjs.map +1 -1
- package/dist/index.mjs +1398 -1380
- package/dist/index.mjs.map +1 -1
- package/package.json +18 -16
- package/dist/index.d.ts +0 -1329
package/dist/index.mjs
CHANGED
|
@@ -1,1519 +1,1537 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { computedAsync, promiseTimeout, refThrottled, tryOnScopeDispose, useElementBounding, useElementSize, useMutationObserver, watchImmediate, watchThrottled } from "@vueuse/core";
|
|
2
|
+
import { CallbackProperty, Cartesian2, Cartesian3, Cartographic, ConstantProperty, Ellipsoid, EllipsoidGeodesic, Material, Math as Math$1, ScreenSpaceEventHandler, ScreenSpaceEventType, Viewer, defined } from "cesium";
|
|
3
|
+
import { computed, getCurrentScope, inject, markRaw, nextTick, provide, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toValue, watch, watchEffect } from "vue";
|
|
4
|
+
|
|
5
|
+
//#region createViewer/index.ts
|
|
6
|
+
/**
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
4
9
|
const CREATE_VIEWER_INJECTION_KEY = Symbol("CREATE_VIEWER_INJECTION_KEY");
|
|
10
|
+
/**
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
5
13
|
const CREATE_VIEWER_COLLECTION = /* @__PURE__ */ new WeakMap();
|
|
14
|
+
/**
|
|
15
|
+
*/
|
|
6
16
|
function createViewer(...args) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var _a, _b;
|
|
37
|
-
return !((_a = viewer.value) == null ? void 0 : _a.isDestroyed()) && ((_b = viewer.value) == null ? void 0 : _b.destroy());
|
|
38
|
-
});
|
|
39
|
-
} else {
|
|
40
|
-
viewer.value = void 0;
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
tryOnScopeDispose(() => {
|
|
44
|
-
viewer.value = void 0;
|
|
45
|
-
});
|
|
46
|
-
return computed(() => {
|
|
47
|
-
var _a;
|
|
48
|
-
return ((_a = viewer.value) == null ? void 0 : _a.isDestroyed()) ? void 0 : viewer.value;
|
|
49
|
-
});
|
|
17
|
+
const viewer = shallowRef();
|
|
18
|
+
const readonlyViewer = shallowReadonly(viewer);
|
|
19
|
+
provide(CREATE_VIEWER_INJECTION_KEY, readonlyViewer);
|
|
20
|
+
const scope = getCurrentScope();
|
|
21
|
+
if (scope) CREATE_VIEWER_COLLECTION.set(scope, readonlyViewer);
|
|
22
|
+
const canvas = computed(() => viewer.value?.canvas);
|
|
23
|
+
useMutationObserver(document?.body, () => {
|
|
24
|
+
if (canvas.value && !document?.body.contains(canvas.value)) viewer.value = void 0;
|
|
25
|
+
}, {
|
|
26
|
+
childList: true,
|
|
27
|
+
subtree: true
|
|
28
|
+
});
|
|
29
|
+
watchEffect((onCleanup) => {
|
|
30
|
+
const [arg1, arg2] = args;
|
|
31
|
+
const value = toRaw(toValue(arg1));
|
|
32
|
+
if (value instanceof Viewer) viewer.value = markRaw(value);
|
|
33
|
+
else if (value) {
|
|
34
|
+
const element = value;
|
|
35
|
+
const options = arg2;
|
|
36
|
+
viewer.value = new Viewer(element, options);
|
|
37
|
+
onCleanup(() => !viewer.value?.isDestroyed() && viewer.value?.destroy());
|
|
38
|
+
} else viewer.value = void 0;
|
|
39
|
+
});
|
|
40
|
+
tryOnScopeDispose(() => {
|
|
41
|
+
viewer.value = void 0;
|
|
42
|
+
});
|
|
43
|
+
return computed(() => {
|
|
44
|
+
return viewer.value?.isDestroyed() ? void 0 : viewer.value;
|
|
45
|
+
});
|
|
50
46
|
}
|
|
47
|
+
|
|
48
|
+
//#endregion
|
|
49
|
+
//#region utils/arrayDiff.ts
|
|
50
|
+
/**
|
|
51
|
+
* 计算两个数组的差异,返回新增和删除的元素
|
|
52
|
+
*/
|
|
51
53
|
function arrayDiff(list, oldList) {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
const oldListSet = new Set(oldList);
|
|
55
|
+
const added = list.filter((obj) => !oldListSet.has(obj));
|
|
56
|
+
const newListSet = new Set(list);
|
|
57
|
+
const removed = oldList?.filter((obj) => !newListSet.has(obj)) ?? [];
|
|
58
|
+
return {
|
|
59
|
+
added,
|
|
60
|
+
removed
|
|
61
|
+
};
|
|
57
62
|
}
|
|
63
|
+
|
|
64
|
+
//#endregion
|
|
65
|
+
//#region utils/canvasCoordToCartesian.ts
|
|
66
|
+
/**
|
|
67
|
+
* Convert canvas coordinates to Cartesian coordinates
|
|
68
|
+
*
|
|
69
|
+
* @param canvasCoord Canvas coordinates
|
|
70
|
+
* @param scene Cesium.Scene instance
|
|
71
|
+
* @param mode optional values are 'pickPosition' | 'globePick' | 'auto' | 'noHeight' @default 'auto'
|
|
72
|
+
*
|
|
73
|
+
* `pickPosition`: Use scene.pickPosition for conversion, which can be used for picking models, oblique photography, etc.
|
|
74
|
+
* However, if depth detection is not enabled (globe.depthTestAgainstTerrain=false), picking terrain or inaccurate issues may occur
|
|
75
|
+
*
|
|
76
|
+
* `globePick`: Use camera.getPickRay for conversion, which cannot be used for picking models or oblique photography,
|
|
77
|
+
* but can be used for picking terrain. If terrain does not exist, the picked elevation is 0
|
|
78
|
+
*
|
|
79
|
+
* `auto`: Automatically determine which picking content to return
|
|
80
|
+
*
|
|
81
|
+
* Calculation speed comparison: globePick > auto >= pickPosition
|
|
82
|
+
*/
|
|
58
83
|
function canvasCoordToCartesian(canvasCoord, scene, mode = "auto") {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
const height1 = (position1 && Ellipsoid.WGS84.cartesianToCartographic(position1).height) ?? 0;
|
|
75
|
-
const height2 = (position2 && Ellipsoid.WGS84.cartesianToCartographic(position2).height) ?? 0;
|
|
76
|
-
return height1 < height2 ? position1 : position2;
|
|
77
|
-
}
|
|
84
|
+
if (mode === "pickPosition") return scene.pickPosition(canvasCoord);
|
|
85
|
+
else if (mode === "globePick") {
|
|
86
|
+
const ray = scene.camera.getPickRay(canvasCoord);
|
|
87
|
+
return ray && scene.globe.pick(ray, scene);
|
|
88
|
+
} else {
|
|
89
|
+
if (scene.globe.depthTestAgainstTerrain) return scene.pickPosition(canvasCoord);
|
|
90
|
+
const position1 = scene.pickPosition(canvasCoord);
|
|
91
|
+
const ray = scene.camera.getPickRay(canvasCoord);
|
|
92
|
+
const position2 = ray && scene.globe.pick(ray, scene);
|
|
93
|
+
if (!position1) return position2;
|
|
94
|
+
const height1 = (position1 && Ellipsoid.WGS84.cartesianToCartographic(position1).height) ?? 0;
|
|
95
|
+
const height2 = (position2 && Ellipsoid.WGS84.cartesianToCartographic(position2).height) ?? 0;
|
|
96
|
+
return height1 < height2 ? position1 : position2;
|
|
97
|
+
}
|
|
78
98
|
}
|
|
99
|
+
|
|
100
|
+
//#endregion
|
|
101
|
+
//#region utils/cartesianToCanvasCoord.ts
|
|
102
|
+
/**
|
|
103
|
+
* Convert Cartesian coordinates to canvas coordinates
|
|
104
|
+
*
|
|
105
|
+
* @param position Cartesian coordinates
|
|
106
|
+
* @param scene Cesium.Scene instance
|
|
107
|
+
*/
|
|
79
108
|
function cartesianToCanvasCoord(position, scene) {
|
|
80
|
-
|
|
109
|
+
return scene.cartesianToCanvasCoordinates(position);
|
|
81
110
|
}
|
|
111
|
+
|
|
112
|
+
//#endregion
|
|
113
|
+
//#region utils/is.ts
|
|
82
114
|
const toString = Object.prototype.toString;
|
|
83
115
|
function isDef(val) {
|
|
84
|
-
|
|
116
|
+
return typeof val !== "undefined";
|
|
85
117
|
}
|
|
86
118
|
function isBoolean(val) {
|
|
87
|
-
|
|
119
|
+
return typeof val === "boolean";
|
|
88
120
|
}
|
|
89
121
|
function isFunction(val) {
|
|
90
|
-
|
|
122
|
+
return typeof val === "function";
|
|
91
123
|
}
|
|
92
124
|
function isNumber(val) {
|
|
93
|
-
|
|
125
|
+
return typeof val === "number";
|
|
94
126
|
}
|
|
95
127
|
function isString(val) {
|
|
96
|
-
|
|
128
|
+
return typeof val === "string";
|
|
97
129
|
}
|
|
98
130
|
function isObject(val) {
|
|
99
|
-
|
|
131
|
+
return toString.call(val) === "[object Object]";
|
|
100
132
|
}
|
|
101
133
|
function isWindow(val) {
|
|
102
|
-
|
|
134
|
+
return typeof window !== "undefined" && toString.call(val) === "[object Window]";
|
|
103
135
|
}
|
|
104
136
|
function isPromise(val) {
|
|
105
|
-
|
|
137
|
+
return !!val && (typeof val === "object" || typeof val === "function") && typeof val.then === "function";
|
|
106
138
|
}
|
|
107
139
|
function isElement(val) {
|
|
108
|
-
|
|
140
|
+
return !!(val && val.nodeName && val.nodeType === 1);
|
|
109
141
|
}
|
|
110
142
|
const isArray = Array.isArray;
|
|
111
143
|
function isBase64(val) {
|
|
112
|
-
|
|
113
|
-
|
|
144
|
+
const reg = /^\s*data:([a-z]+\/[\d+.a-z-]+(;[a-z-]+=[\da-z-]+)?)?(;base64)?,([\s\w!$%&'()*+,./:;=?@~-]*?)\s*$/i;
|
|
145
|
+
return reg.test(val);
|
|
114
146
|
}
|
|
115
147
|
function assertError(condition, error) {
|
|
116
|
-
|
|
117
|
-
throw new Error(error);
|
|
118
|
-
}
|
|
148
|
+
if (condition) throw new Error(error);
|
|
119
149
|
}
|
|
150
|
+
|
|
151
|
+
//#endregion
|
|
152
|
+
//#region utils/cesiumEquals.ts
|
|
153
|
+
/**
|
|
154
|
+
* Determines if two Cesium objects are equal.
|
|
155
|
+
*
|
|
156
|
+
* This function not only judges whether the instances are equal,
|
|
157
|
+
* but also judges the equals method in the example.
|
|
158
|
+
*
|
|
159
|
+
* @param left The first Cesium object
|
|
160
|
+
* @param right The second Cesium object
|
|
161
|
+
* @returns Returns true if the two Cesium objects are equal, otherwise false
|
|
162
|
+
*/
|
|
120
163
|
function cesiumEquals(left, right) {
|
|
121
|
-
|
|
164
|
+
return left === right || isFunction(left?.equals) && left.equals(right) || isFunction(right?.equals) && right.equals(left);
|
|
122
165
|
}
|
|
166
|
+
|
|
167
|
+
//#endregion
|
|
168
|
+
//#region utils/toCoord.ts
|
|
169
|
+
/**
|
|
170
|
+
* Converts coordinates to an array or object in the specified format.
|
|
171
|
+
*
|
|
172
|
+
* @param position The coordinate to be converted, which can be a Cartesian3, Cartographic, array, or object.
|
|
173
|
+
* @param options Conversion options, including conversion type and whether to include altitude information.
|
|
174
|
+
* @returns The converted coordinate, which may be an array or object. If the input position is empty, undefined is returned.
|
|
175
|
+
*
|
|
176
|
+
* @template T Conversion type, optional values are 'Array' or 'Object', @default 'Array'.
|
|
177
|
+
* @template Alt Whether to include altitude information, default is false
|
|
178
|
+
*/
|
|
123
179
|
function toCoord(position, options = {}) {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
180
|
+
if (!position) return void 0;
|
|
181
|
+
const { type = "Array", alt = false } = options;
|
|
182
|
+
let longitude, latitude, height;
|
|
183
|
+
if (position instanceof Cartesian3) {
|
|
184
|
+
const cartographic = Ellipsoid.WGS84.cartesianToCartographic(position);
|
|
185
|
+
longitude = Math$1.toDegrees(cartographic.longitude);
|
|
186
|
+
latitude = Math$1.toDegrees(cartographic.latitude);
|
|
187
|
+
height = cartographic.height;
|
|
188
|
+
} else if (position instanceof Cartographic) {
|
|
189
|
+
const cartographic = position;
|
|
190
|
+
longitude = Math$1.toDegrees(cartographic.longitude);
|
|
191
|
+
latitude = Math$1.toDegrees(cartographic.latitude);
|
|
192
|
+
height = cartographic.height;
|
|
193
|
+
} else if (Array.isArray(position)) {
|
|
194
|
+
longitude = Math$1.toDegrees(position[0]);
|
|
195
|
+
latitude = Math$1.toDegrees(position[1]);
|
|
196
|
+
height = position[2];
|
|
197
|
+
} else {
|
|
198
|
+
longitude = position.longitude;
|
|
199
|
+
latitude = position.latitude;
|
|
200
|
+
height = position.height;
|
|
201
|
+
}
|
|
202
|
+
if (type === "Array") return alt ? [
|
|
203
|
+
longitude,
|
|
204
|
+
latitude,
|
|
205
|
+
height
|
|
206
|
+
] : [longitude, latitude];
|
|
207
|
+
else return alt ? {
|
|
208
|
+
longitude,
|
|
209
|
+
latitude,
|
|
210
|
+
height
|
|
211
|
+
} : {
|
|
212
|
+
longitude,
|
|
213
|
+
latitude
|
|
214
|
+
};
|
|
153
215
|
}
|
|
216
|
+
|
|
217
|
+
//#endregion
|
|
218
|
+
//#region utils/convertDMS.ts
|
|
219
|
+
/**
|
|
220
|
+
* Convert degrees to DMS (Degrees Minutes Seconds) format string
|
|
221
|
+
*
|
|
222
|
+
* @param degrees The angle value
|
|
223
|
+
* @param precision The number of decimal places to retain for the seconds, defaults to 3
|
|
224
|
+
* @returns A DMS formatted string in the format: degrees° minutes′ seconds″
|
|
225
|
+
*/
|
|
154
226
|
function dmsEncode(degrees, precision = 3) {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
227
|
+
const str = `${degrees}`;
|
|
228
|
+
let i = str.indexOf(".");
|
|
229
|
+
const d = i < 0 ? str : str.slice(0, Math.max(0, i));
|
|
230
|
+
let m = "0";
|
|
231
|
+
let s = "0";
|
|
232
|
+
if (i > 0) {
|
|
233
|
+
m = `0${str.slice(Math.max(0, i))}`;
|
|
234
|
+
m = `${+m * 60}`;
|
|
235
|
+
i = m.indexOf(".");
|
|
236
|
+
if (i > 0) {
|
|
237
|
+
s = `0${m.slice(Math.max(0, i))}`;
|
|
238
|
+
m = m.slice(0, Math.max(0, i));
|
|
239
|
+
s = `${+s * 60}`;
|
|
240
|
+
i = s.indexOf(".");
|
|
241
|
+
s = s.slice(0, Math.max(0, i + 4));
|
|
242
|
+
s = (+s).toFixed(precision);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
return `${Math.abs(+d)}°${+m}′${+s}″`;
|
|
174
246
|
}
|
|
247
|
+
/**
|
|
248
|
+
* Decode a DMS (Degrees Minutes Seconds) formatted string to a decimal angle value
|
|
249
|
+
*
|
|
250
|
+
* @param dmsCode DMS formatted string, e.g. "120°30′45″N"
|
|
251
|
+
* @returns The decoded decimal angle value, or 0 if decoding fails
|
|
252
|
+
*/
|
|
175
253
|
function dmsDecode(dmsCode) {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
254
|
+
const [dd, msStr] = dmsCode.split("°") ?? [];
|
|
255
|
+
const [mm, sStr] = msStr?.split("′") ?? [];
|
|
256
|
+
const ss = sStr?.split("″")[0];
|
|
257
|
+
const d = Number(dd) || 0;
|
|
258
|
+
const m = (Number(mm) || 0) / 60;
|
|
259
|
+
const s = (Number(ss) || 0) / 60 / 60;
|
|
260
|
+
const degrees = d + m + s;
|
|
261
|
+
if (degrees === 0) return 0;
|
|
262
|
+
else {
|
|
263
|
+
let res = degrees;
|
|
264
|
+
if ([
|
|
265
|
+
"W",
|
|
266
|
+
"w",
|
|
267
|
+
"S",
|
|
268
|
+
"s"
|
|
269
|
+
].includes(dmsCode[dmsCode.length - 1])) res = -res;
|
|
270
|
+
return res;
|
|
271
|
+
}
|
|
192
272
|
}
|
|
273
|
+
/**
|
|
274
|
+
* Convert latitude and longitude coordinates to degrees-minutes-seconds format
|
|
275
|
+
*
|
|
276
|
+
* @param position The latitude and longitude coordinates
|
|
277
|
+
* @param precision The number of decimal places to retain for 'seconds', default is 3
|
|
278
|
+
* @returns Returns the coordinates in degrees-minutes-seconds format, or undefined if the conversion fails
|
|
279
|
+
*/
|
|
193
280
|
function degreesToDms(position, precision = 3) {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
281
|
+
const coord = toCoord(position, { alt: true });
|
|
282
|
+
if (!coord) return;
|
|
283
|
+
const [longitude, latitude, height] = coord;
|
|
284
|
+
const x = dmsEncode(longitude, precision);
|
|
285
|
+
const y = dmsEncode(latitude, precision);
|
|
286
|
+
return [
|
|
287
|
+
`${x}${longitude > 0 ? "E" : "W"}`,
|
|
288
|
+
`${y}${latitude > 0 ? "N" : "S"}`,
|
|
289
|
+
height
|
|
290
|
+
];
|
|
202
291
|
}
|
|
292
|
+
/**
|
|
293
|
+
* Convert DMS (Degrees Minutes Seconds) format to decimal degrees for latitude and longitude coordinates
|
|
294
|
+
*
|
|
295
|
+
* @param dms The latitude or longitude coordinate in DMS format
|
|
296
|
+
* @returns Returns the coordinate in decimal degrees format, or undefined if the conversion fails
|
|
297
|
+
*/
|
|
203
298
|
function dmsToDegrees(dms) {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
299
|
+
const [x, y, height] = dms;
|
|
300
|
+
const longitude = dmsDecode(x);
|
|
301
|
+
const latitude = dmsDecode(y);
|
|
302
|
+
return [
|
|
303
|
+
longitude,
|
|
304
|
+
latitude,
|
|
305
|
+
Number(height) || 0
|
|
306
|
+
];
|
|
208
307
|
}
|
|
308
|
+
|
|
309
|
+
//#endregion
|
|
310
|
+
//#region utils/isCesiumConstant.ts
|
|
311
|
+
/**
|
|
312
|
+
* Determines if the Cesium property is a constant.
|
|
313
|
+
*
|
|
314
|
+
* @param value Cesium property
|
|
315
|
+
*/
|
|
209
316
|
function isCesiumConstant(value) {
|
|
210
|
-
|
|
211
|
-
}
|
|
212
|
-
class CesiumMaterial extends Material {
|
|
213
|
-
constructor(options) {
|
|
214
|
-
super(options);
|
|
215
|
-
}
|
|
317
|
+
return !defined(value) || !!value.isConstant;
|
|
216
318
|
}
|
|
319
|
+
|
|
320
|
+
//#endregion
|
|
321
|
+
//#region utils/material.ts
|
|
322
|
+
/**
|
|
323
|
+
* Only as a type fix for `Cesium.Material`
|
|
324
|
+
*/
|
|
325
|
+
var CesiumMaterial = class extends Material {
|
|
326
|
+
constructor(options) {
|
|
327
|
+
super(options);
|
|
328
|
+
}
|
|
329
|
+
};
|
|
330
|
+
/**
|
|
331
|
+
* Get material from cache, alias of `Material._materialCache.getMaterial`
|
|
332
|
+
*/
|
|
217
333
|
function getMaterialCache(type) {
|
|
218
|
-
|
|
334
|
+
return Material._materialCache.getMaterial(type);
|
|
219
335
|
}
|
|
336
|
+
/**
|
|
337
|
+
* Add material to Cesium's material cache, alias of `Material._materialCache.addMaterial`
|
|
338
|
+
*/
|
|
220
339
|
function addMaterialCache(type, material) {
|
|
221
|
-
|
|
340
|
+
return Material._materialCache.addMaterial(type, material);
|
|
222
341
|
}
|
|
342
|
+
|
|
343
|
+
//#endregion
|
|
344
|
+
//#region utils/pick.ts
|
|
345
|
+
/**
|
|
346
|
+
* Analyze the result of Cesium's `scene.pick` and convert it to an array format
|
|
347
|
+
*/
|
|
223
348
|
function resolvePick(pick = {}) {
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
349
|
+
const { primitive, id, primitiveCollection, collection } = pick;
|
|
350
|
+
const entityCollection = id && id.entityCollection || null;
|
|
351
|
+
const dataSource = entityCollection && entityCollection.owner || null;
|
|
352
|
+
const ids = Array.isArray(id) ? id : [id].filter(Boolean);
|
|
353
|
+
return [
|
|
354
|
+
...ids,
|
|
355
|
+
primitive,
|
|
356
|
+
primitiveCollection,
|
|
357
|
+
collection,
|
|
358
|
+
entityCollection,
|
|
359
|
+
dataSource
|
|
360
|
+
].filter((e) => !!e);
|
|
236
361
|
}
|
|
362
|
+
/**
|
|
363
|
+
* Determine if the given array of graphics is hit by Cesium's `scene.pick`
|
|
364
|
+
*
|
|
365
|
+
* @param pick The `scene.pick` object used for matching
|
|
366
|
+
* @param graphic An array of graphics to check for hits
|
|
367
|
+
*/
|
|
237
368
|
function pickHitGraphic(pick, graphic) {
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
if (!elements.length) {
|
|
243
|
-
return false;
|
|
244
|
-
}
|
|
245
|
-
return elements.some((element) => graphic.includes(element));
|
|
369
|
+
if (!Array.isArray(graphic) || !graphic.length) return false;
|
|
370
|
+
const elements = resolvePick(pick);
|
|
371
|
+
if (!elements.length) return false;
|
|
372
|
+
return elements.some((element) => graphic.includes(element));
|
|
246
373
|
}
|
|
374
|
+
|
|
375
|
+
//#endregion
|
|
376
|
+
//#region utils/property.ts
|
|
377
|
+
/**
|
|
378
|
+
* Is Cesium.Property
|
|
379
|
+
* @param value - The target object
|
|
380
|
+
*/
|
|
247
381
|
function isProperty(value) {
|
|
248
|
-
|
|
382
|
+
return value && isFunction(value.getValue);
|
|
249
383
|
}
|
|
384
|
+
/**
|
|
385
|
+
* Converts a value that may be a Property into its target value, @see {toProperty} for the reverse operation
|
|
386
|
+
* ```typescript
|
|
387
|
+
* toPropertyValue('val') //=> 'val'
|
|
388
|
+
* toPropertyValue(new ConstantProperty('val')) //=> 'val'
|
|
389
|
+
* toPropertyValue(new CallbackProperty(()=>'val')) //=> 'val'
|
|
390
|
+
* ```
|
|
391
|
+
*
|
|
392
|
+
* @param value - The value to convert
|
|
393
|
+
*/
|
|
250
394
|
function toPropertyValue(value, time) {
|
|
251
|
-
|
|
395
|
+
return isProperty(value) ? value.getValue(time) : value;
|
|
252
396
|
}
|
|
397
|
+
/**
|
|
398
|
+
* Converts a value that may be a Property into a Property object, @see {toPropertyValue} for the reverse operation
|
|
399
|
+
*
|
|
400
|
+
* @param value - The property value or getter to convert, can be undefined or null
|
|
401
|
+
* @param isConstant - The second parameter for converting to CallbackProperty
|
|
402
|
+
* @returns Returns the converted Property object, if value is undefined or null, returns undefined
|
|
403
|
+
*/
|
|
253
404
|
function toProperty(value, isConstant = false) {
|
|
254
|
-
|
|
405
|
+
return isProperty(value) ? value : isFunction(value) ? new CallbackProperty(value, isConstant) : new ConstantProperty(value);
|
|
255
406
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
});
|
|
293
|
-
}
|
|
407
|
+
/**
|
|
408
|
+
* Create a Cesium property key
|
|
409
|
+
*
|
|
410
|
+
* @param scope The host object
|
|
411
|
+
* @param field The property name
|
|
412
|
+
* @param maybeProperty Optional property or getter
|
|
413
|
+
* @param readonly Whether the property is read-only
|
|
414
|
+
*/
|
|
415
|
+
function createPropertyField(scope, field, maybeProperty, readonly$1) {
|
|
416
|
+
let removeOwnerListener;
|
|
417
|
+
const ownerBinding = (value) => {
|
|
418
|
+
removeOwnerListener?.();
|
|
419
|
+
if (defined(value?.definitionChanged)) removeOwnerListener = value?.definitionChanged?.addEventListener(() => {
|
|
420
|
+
scope.definitionChanged.raiseEvent(scope, field, value, value);
|
|
421
|
+
});
|
|
422
|
+
};
|
|
423
|
+
const privateField = `_${field}`;
|
|
424
|
+
const property = toProperty(maybeProperty);
|
|
425
|
+
scope[privateField] = property;
|
|
426
|
+
ownerBinding(property);
|
|
427
|
+
if (readonly$1) Object.defineProperty(scope, field, { get() {
|
|
428
|
+
return scope[privateField];
|
|
429
|
+
} });
|
|
430
|
+
else Object.defineProperty(scope, field, {
|
|
431
|
+
get() {
|
|
432
|
+
return scope[privateField];
|
|
433
|
+
},
|
|
434
|
+
set(value) {
|
|
435
|
+
const previous = scope[privateField];
|
|
436
|
+
if (scope[privateField] !== value) {
|
|
437
|
+
scope[privateField] = value;
|
|
438
|
+
ownerBinding(value);
|
|
439
|
+
if (defined(scope.definitionChanged)) scope.definitionChanged.raiseEvent(scope, field, value, previous);
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
});
|
|
294
443
|
}
|
|
295
444
|
function createCesiumAttribute(scope, key, value, options = {}) {
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
}
|
|
329
|
-
const previous = Reflect.get(scope, privateKey);
|
|
330
|
-
if (previous !== value2) {
|
|
331
|
-
Reflect.set(scope, privateKey, value2);
|
|
332
|
-
changedEvent == null ? void 0 : changedEvent.raiseEvent.bind(changedEvent)(scope, key, value2, previous);
|
|
333
|
-
if (allowToProperty) {
|
|
334
|
-
serial(value2);
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
};
|
|
338
|
-
}
|
|
339
|
-
Object.defineProperty(scope, key, obj);
|
|
445
|
+
const allowToProperty = !!options.toProperty;
|
|
446
|
+
const shallowClone = !!options.shallowClone;
|
|
447
|
+
const changedEventKey = options.changedEventKey || "definitionChanged";
|
|
448
|
+
const changedEvent = Reflect.get(scope, changedEventKey);
|
|
449
|
+
const privateKey = `_${String(key)}`;
|
|
450
|
+
const attribute = allowToProperty ? toProperty(value) : value;
|
|
451
|
+
Reflect.set(scope, privateKey, attribute);
|
|
452
|
+
const obj = { get() {
|
|
453
|
+
const value$1 = Reflect.get(scope, privateKey);
|
|
454
|
+
if (shallowClone) return Array.isArray(value$1) ? [...value$1] : { ...value$1 };
|
|
455
|
+
else return value$1;
|
|
456
|
+
} };
|
|
457
|
+
let previousListener;
|
|
458
|
+
const serial = (property, previous) => {
|
|
459
|
+
previousListener?.();
|
|
460
|
+
previousListener = property?.definitionChanged?.addEventListener(() => {
|
|
461
|
+
changedEvent?.raiseEvent.bind(changedEvent)(scope, key, property, previous);
|
|
462
|
+
});
|
|
463
|
+
};
|
|
464
|
+
if (!options.readonly) {
|
|
465
|
+
if (allowToProperty && isProperty(value)) serial(value);
|
|
466
|
+
obj.set = (value$1) => {
|
|
467
|
+
if (allowToProperty && !isProperty(value$1)) throw new Error(`The value of ${String(key)} must be a Cesium.Property object`);
|
|
468
|
+
const previous = Reflect.get(scope, privateKey);
|
|
469
|
+
if (previous !== value$1) {
|
|
470
|
+
Reflect.set(scope, privateKey, value$1);
|
|
471
|
+
changedEvent?.raiseEvent.bind(changedEvent)(scope, key, value$1, previous);
|
|
472
|
+
if (allowToProperty) serial(value$1);
|
|
473
|
+
}
|
|
474
|
+
};
|
|
475
|
+
}
|
|
476
|
+
Object.defineProperty(scope, key, obj);
|
|
340
477
|
}
|
|
341
478
|
function createCesiumProperty(scope, key, value, options = {}) {
|
|
342
|
-
|
|
479
|
+
return createCesiumAttribute(scope, key, value, {
|
|
480
|
+
...options,
|
|
481
|
+
toProperty: true
|
|
482
|
+
});
|
|
343
483
|
}
|
|
484
|
+
|
|
485
|
+
//#endregion
|
|
486
|
+
//#region utils/throttle.ts
|
|
487
|
+
/**
|
|
488
|
+
* Throttle function, which limits the frequency of execution of the function
|
|
489
|
+
*
|
|
490
|
+
* @param callback raw function
|
|
491
|
+
* @param delay Throttled delay duration (ms)
|
|
492
|
+
* @param trailing Trigger callback function after last call @default true
|
|
493
|
+
* @param leading Trigger the callback function immediately on the first call @default false
|
|
494
|
+
* @returns Throttle function
|
|
495
|
+
*/
|
|
344
496
|
function throttle(callback, delay = 100, trailing = true, leading = false) {
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
restList[1] = rest;
|
|
371
|
-
}
|
|
372
|
-
if (!tracked) {
|
|
373
|
-
tracked = true;
|
|
374
|
-
trigger();
|
|
375
|
-
}
|
|
376
|
-
};
|
|
497
|
+
const restList = [];
|
|
498
|
+
let tracked = false;
|
|
499
|
+
const trigger = async () => {
|
|
500
|
+
await promiseTimeout(delay);
|
|
501
|
+
tracked = false;
|
|
502
|
+
if (leading) try {
|
|
503
|
+
callback(...restList[0]);
|
|
504
|
+
} catch (error) {
|
|
505
|
+
console.error(error);
|
|
506
|
+
}
|
|
507
|
+
if (trailing && (!leading || restList.length > 1)) try {
|
|
508
|
+
callback(...restList[restList.length - 1]);
|
|
509
|
+
} catch (error) {
|
|
510
|
+
console.error(error);
|
|
511
|
+
}
|
|
512
|
+
restList.length = 0;
|
|
513
|
+
};
|
|
514
|
+
return (...rest) => {
|
|
515
|
+
if (restList.length < 2) restList.push(rest);
|
|
516
|
+
else restList[1] = rest;
|
|
517
|
+
if (!tracked) {
|
|
518
|
+
tracked = true;
|
|
519
|
+
trigger();
|
|
520
|
+
}
|
|
521
|
+
};
|
|
377
522
|
}
|
|
523
|
+
|
|
524
|
+
//#endregion
|
|
525
|
+
//#region utils/toCartesian3.ts
|
|
526
|
+
/**
|
|
527
|
+
* Converts position to a coordinate point in the Cartesian coordinate system
|
|
528
|
+
*
|
|
529
|
+
* @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
|
|
530
|
+
* @returns The converted Cartesian coordinate point. If the input parameter is invalid, undefined is returned
|
|
531
|
+
*/
|
|
378
532
|
function toCartesian3(position) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
} else if (position instanceof Cartographic) {
|
|
385
|
-
return Ellipsoid.WGS84.cartographicToCartesian(position);
|
|
386
|
-
} else if (Array.isArray(position)) {
|
|
387
|
-
return Cartesian3.fromDegrees(position[0], position[1], position[2]);
|
|
388
|
-
} else {
|
|
389
|
-
return Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
|
|
390
|
-
}
|
|
533
|
+
if (!position) return void 0;
|
|
534
|
+
if (position instanceof Cartesian3) return position.clone();
|
|
535
|
+
else if (position instanceof Cartographic) return Ellipsoid.WGS84.cartographicToCartesian(position);
|
|
536
|
+
else if (Array.isArray(position)) return Cartesian3.fromDegrees(position[0], position[1], position[2]);
|
|
537
|
+
else return Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
|
|
391
538
|
}
|
|
539
|
+
|
|
540
|
+
//#endregion
|
|
541
|
+
//#region utils/toCartographic.ts
|
|
542
|
+
/**
|
|
543
|
+
* Converts a position to a Cartographic coordinate point
|
|
544
|
+
*
|
|
545
|
+
* @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
|
|
546
|
+
* @returns The converted Cartographic coordinate point, or undefined if the input parameter is invalid
|
|
547
|
+
*/
|
|
392
548
|
function toCartographic(position) {
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
} else if (position instanceof Cartographic) {
|
|
399
|
-
return position.clone();
|
|
400
|
-
} else if (Array.isArray(position)) {
|
|
401
|
-
return Cartographic.fromDegrees(position[0], position[1], position[2]);
|
|
402
|
-
} else {
|
|
403
|
-
return Cartographic.fromDegrees(position.longitude, position.latitude, position.height);
|
|
404
|
-
}
|
|
549
|
+
if (!position) return void 0;
|
|
550
|
+
if (position instanceof Cartesian3) return Ellipsoid.WGS84.cartesianToCartographic(position);
|
|
551
|
+
else if (position instanceof Cartographic) return position.clone();
|
|
552
|
+
else if (Array.isArray(position)) return Cartographic.fromDegrees(position[0], position[1], position[2]);
|
|
553
|
+
else return Cartographic.fromDegrees(position.longitude, position.latitude, position.height);
|
|
405
554
|
}
|
|
555
|
+
|
|
556
|
+
//#endregion
|
|
557
|
+
//#region utils/tryRun.ts
|
|
558
|
+
/**
|
|
559
|
+
* Safely execute the provided function without throwing errors,
|
|
560
|
+
* essentially a simple wrapper around a `try...catch...` block
|
|
561
|
+
*/
|
|
406
562
|
function tryRun(fn) {
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
563
|
+
return (...args) => {
|
|
564
|
+
try {
|
|
565
|
+
return fn?.(...args);
|
|
566
|
+
} catch (error) {
|
|
567
|
+
console.error(error);
|
|
568
|
+
}
|
|
569
|
+
};
|
|
414
570
|
}
|
|
571
|
+
|
|
572
|
+
//#endregion
|
|
573
|
+
//#region toPromiseValue/index.ts
|
|
574
|
+
/**
|
|
575
|
+
* Similar to Vue's built-in `toValue`, but capable of handling asynchronous functions, thus returning a `await value`.
|
|
576
|
+
*
|
|
577
|
+
* Used in conjunction with VueUse's `computedAsync`.
|
|
578
|
+
*
|
|
579
|
+
* @param source The source value, which can be a reactive reference or an asynchronous getter.
|
|
580
|
+
* @param options Conversion options
|
|
581
|
+
* @returns The converted value.
|
|
582
|
+
*
|
|
583
|
+
* @example
|
|
584
|
+
* ```ts
|
|
585
|
+
*
|
|
586
|
+
* const data = computedAsync(async ()=> {
|
|
587
|
+
* return await toPromiseValue(promiseRef)
|
|
588
|
+
* })
|
|
589
|
+
*
|
|
590
|
+
* ```
|
|
591
|
+
*/
|
|
415
592
|
async function toPromiseValue(source, options = {}) {
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
}
|
|
593
|
+
try {
|
|
594
|
+
const { raw = true } = options;
|
|
595
|
+
let value;
|
|
596
|
+
if (isFunction(source)) value = await source();
|
|
597
|
+
else {
|
|
598
|
+
const result = toValue(source);
|
|
599
|
+
value = isPromise(result) ? await result : result;
|
|
600
|
+
}
|
|
601
|
+
return raw ? toRaw(value) : value;
|
|
602
|
+
} catch (error) {
|
|
603
|
+
console.error(error);
|
|
604
|
+
throw error;
|
|
605
|
+
}
|
|
430
606
|
}
|
|
607
|
+
|
|
608
|
+
//#endregion
|
|
609
|
+
//#region useCesiumEventListener/index.ts
|
|
610
|
+
/**
|
|
611
|
+
* Easily use the `addEventListener` in `Cesium.Event` instances,
|
|
612
|
+
* when the dependent data changes or the component is unmounted,
|
|
613
|
+
* the listener function will automatically reload or destroy.
|
|
614
|
+
*
|
|
615
|
+
* @param event The Cesium.Event instance
|
|
616
|
+
* @param listener The listener function
|
|
617
|
+
* @param options additional options
|
|
618
|
+
* @returns A function that can be called to remove the event listener
|
|
619
|
+
*/
|
|
431
620
|
function useCesiumEventListener(event, listener, options = {}) {
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
621
|
+
const isActive = toRef(options.isActive ?? true);
|
|
622
|
+
const cleanup = watchEffect((onCleanup) => {
|
|
623
|
+
const _event = toValue(event);
|
|
624
|
+
const events = Array.isArray(_event) ? _event : [_event];
|
|
625
|
+
if (events) {
|
|
626
|
+
if (events.length && isActive.value) {
|
|
627
|
+
const stopFns = events.map((event$1) => {
|
|
628
|
+
const e = toValue(event$1);
|
|
629
|
+
return e?.addEventListener(listener, e);
|
|
630
|
+
});
|
|
631
|
+
onCleanup(() => stopFns.forEach((stop) => stop?.()));
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
});
|
|
635
|
+
tryOnScopeDispose(cleanup.stop);
|
|
636
|
+
return cleanup.stop;
|
|
448
637
|
}
|
|
638
|
+
|
|
639
|
+
//#endregion
|
|
640
|
+
//#region useViewer/index.ts
|
|
641
|
+
/**
|
|
642
|
+
* Obtain the `Viewer` instance injected through `createViewer` in the current component or its ancestor components.
|
|
643
|
+
*
|
|
644
|
+
* note:
|
|
645
|
+
* - If `createViewer` and `useViewer` are called in the same component, the `Viewer` instance injected by `createViewer` will be used preferentially.
|
|
646
|
+
* - When calling `createViewer` and `useViewer` in the same component, `createViewer` should be called before `useViewer`.
|
|
647
|
+
*/
|
|
449
648
|
function useViewer() {
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
"The `Viewer` instance injected by `createViewer` was not found in the current component or its ancestor components. Have you called `createViewer`?"
|
|
459
|
-
);
|
|
460
|
-
}
|
|
461
|
-
return injectViewer;
|
|
462
|
-
}
|
|
649
|
+
const scope = getCurrentScope();
|
|
650
|
+
const instanceViewer = scope ? CREATE_VIEWER_COLLECTION.get(scope) : void 0;
|
|
651
|
+
if (instanceViewer) return instanceViewer;
|
|
652
|
+
else {
|
|
653
|
+
const injectViewer = inject(CREATE_VIEWER_INJECTION_KEY);
|
|
654
|
+
if (!injectViewer) throw new Error("The `Viewer` instance injected by `createViewer` was not found in the current component or its ancestor components. Have you called `createViewer`?");
|
|
655
|
+
return injectViewer;
|
|
656
|
+
}
|
|
463
657
|
}
|
|
658
|
+
|
|
659
|
+
//#endregion
|
|
660
|
+
//#region useCameraState/index.ts
|
|
661
|
+
/**
|
|
662
|
+
* Reactive Cesium Camera state
|
|
663
|
+
* @param options options
|
|
664
|
+
* @returns Reactive camera states
|
|
665
|
+
*/
|
|
464
666
|
function useCameraState(options = {}) {
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.direction) == null ? void 0 : _b.clone() : void 0;
|
|
499
|
-
}),
|
|
500
|
-
up: computed(() => {
|
|
501
|
-
var _a, _b;
|
|
502
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.up) == null ? void 0 : _b.clone() : void 0;
|
|
503
|
-
}),
|
|
504
|
-
right: computed(() => {
|
|
505
|
-
var _a, _b;
|
|
506
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.right) == null ? void 0 : _b.clone() : void 0;
|
|
507
|
-
}),
|
|
508
|
-
positionCartographic: computed(() => {
|
|
509
|
-
var _a, _b;
|
|
510
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.positionCartographic) == null ? void 0 : _b.clone() : void 0;
|
|
511
|
-
}),
|
|
512
|
-
positionWC: computed(() => {
|
|
513
|
-
var _a, _b;
|
|
514
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.positionWC) == null ? void 0 : _b.clone() : void 0;
|
|
515
|
-
}),
|
|
516
|
-
directionWC: computed(() => {
|
|
517
|
-
var _a, _b;
|
|
518
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.directionWC) == null ? void 0 : _b.clone() : void 0;
|
|
519
|
-
}),
|
|
520
|
-
upWC: computed(() => {
|
|
521
|
-
var _a, _b;
|
|
522
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.directionWC) == null ? void 0 : _b.clone() : void 0;
|
|
523
|
-
}),
|
|
524
|
-
rightWC: computed(() => {
|
|
525
|
-
var _a, _b;
|
|
526
|
-
return changedSymbol.value ? (_b = (_a = camera.value) == null ? void 0 : _a.directionWC) == null ? void 0 : _b.clone() : void 0;
|
|
527
|
-
}),
|
|
528
|
-
viewRectangle: computed(() => {
|
|
529
|
-
var _a;
|
|
530
|
-
return changedSymbol.value ? (_a = camera.value) == null ? void 0 : _a.computeViewRectangle() : void 0;
|
|
531
|
-
}),
|
|
532
|
-
heading: computed(() => {
|
|
533
|
-
var _a;
|
|
534
|
-
return changedSymbol.value ? (_a = camera.value) == null ? void 0 : _a.heading : void 0;
|
|
535
|
-
}),
|
|
536
|
-
pitch: computed(() => {
|
|
537
|
-
var _a;
|
|
538
|
-
return changedSymbol.value ? (_a = camera.value) == null ? void 0 : _a.pitch : void 0;
|
|
539
|
-
}),
|
|
540
|
-
roll: computed(() => {
|
|
541
|
-
var _a;
|
|
542
|
-
return changedSymbol.value ? (_a = camera.value) == null ? void 0 : _a.roll : void 0;
|
|
543
|
-
}),
|
|
544
|
-
level: computed(() => {
|
|
545
|
-
var _a, _b;
|
|
546
|
-
return changedSymbol.value && ((_b = (_a = camera.value) == null ? void 0 : _a.positionCartographic) == null ? void 0 : _b.height) ? computeLevel(camera.value.positionCartographic.height) : void 0;
|
|
547
|
-
})
|
|
548
|
-
};
|
|
667
|
+
let getCamera = options.camera;
|
|
668
|
+
if (!getCamera) {
|
|
669
|
+
const viewer = useViewer();
|
|
670
|
+
getCamera = () => viewer.value?.scene.camera;
|
|
671
|
+
}
|
|
672
|
+
const camera = computed(() => toValue(getCamera));
|
|
673
|
+
const event = computed(() => {
|
|
674
|
+
const eventField = toValue(options.event) || "changed";
|
|
675
|
+
return camera.value?.[eventField];
|
|
676
|
+
});
|
|
677
|
+
const changedSymbol = refThrottled(shallowRef(Symbol("camera change")), options.delay ?? 8, true, false);
|
|
678
|
+
const setChangedSymbol = () => {
|
|
679
|
+
changedSymbol.value = Symbol("camera change");
|
|
680
|
+
};
|
|
681
|
+
watch(camera, () => setChangedSymbol());
|
|
682
|
+
useCesiumEventListener(event, () => setChangedSymbol());
|
|
683
|
+
return {
|
|
684
|
+
camera,
|
|
685
|
+
position: computed(() => changedSymbol.value ? camera.value?.position?.clone() : void 0),
|
|
686
|
+
direction: computed(() => changedSymbol.value ? camera.value?.direction?.clone() : void 0),
|
|
687
|
+
up: computed(() => changedSymbol.value ? camera.value?.up?.clone() : void 0),
|
|
688
|
+
right: computed(() => changedSymbol.value ? camera.value?.right?.clone() : void 0),
|
|
689
|
+
positionCartographic: computed(() => changedSymbol.value ? camera.value?.positionCartographic?.clone() : void 0),
|
|
690
|
+
positionWC: computed(() => changedSymbol.value ? camera.value?.positionWC?.clone() : void 0),
|
|
691
|
+
directionWC: computed(() => changedSymbol.value ? camera.value?.directionWC?.clone() : void 0),
|
|
692
|
+
upWC: computed(() => changedSymbol.value ? camera.value?.directionWC?.clone() : void 0),
|
|
693
|
+
rightWC: computed(() => changedSymbol.value ? camera.value?.directionWC?.clone() : void 0),
|
|
694
|
+
viewRectangle: computed(() => changedSymbol.value ? camera.value?.computeViewRectangle() : void 0),
|
|
695
|
+
heading: computed(() => changedSymbol.value ? camera.value?.heading : void 0),
|
|
696
|
+
pitch: computed(() => changedSymbol.value ? camera.value?.pitch : void 0),
|
|
697
|
+
roll: computed(() => changedSymbol.value ? camera.value?.roll : void 0),
|
|
698
|
+
level: computed(() => changedSymbol.value && camera.value?.positionCartographic?.height ? computeLevel(camera.value.positionCartographic.height) : void 0)
|
|
699
|
+
};
|
|
549
700
|
}
|
|
550
701
|
const A = 40487.57;
|
|
551
702
|
const B = 7096758e-11;
|
|
552
703
|
const C = 91610.74;
|
|
553
704
|
const D = -40467.74;
|
|
705
|
+
/**
|
|
706
|
+
* Compute the camera level at a given height.
|
|
707
|
+
*/
|
|
554
708
|
function computeLevel(height) {
|
|
555
|
-
|
|
709
|
+
return D + (A - D) / (1 + (height / C) ** B);
|
|
556
710
|
}
|
|
711
|
+
|
|
712
|
+
//#endregion
|
|
713
|
+
//#region useCesiumFps/index.ts
|
|
714
|
+
/**
|
|
715
|
+
* Reactive get the frame rate of Cesium
|
|
716
|
+
* @param options options
|
|
717
|
+
* @returns Reactive fps states
|
|
718
|
+
*/
|
|
557
719
|
function useCesiumFps(options = {}) {
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
});
|
|
574
|
-
const fps = computed(() => {
|
|
575
|
-
return 1e3 / interval.value;
|
|
576
|
-
});
|
|
577
|
-
return {
|
|
578
|
-
interval: readonly(interval),
|
|
579
|
-
fps
|
|
580
|
-
};
|
|
720
|
+
const { delay = 100 } = options;
|
|
721
|
+
const viewer = useViewer();
|
|
722
|
+
const p = shallowRef(performance.now());
|
|
723
|
+
useCesiumEventListener(() => viewer.value?.scene.postRender, () => p.value = performance.now());
|
|
724
|
+
const interval = ref(0);
|
|
725
|
+
watchThrottled(p, (value, oldValue) => {
|
|
726
|
+
interval.value = value - oldValue;
|
|
727
|
+
}, { throttle: delay });
|
|
728
|
+
const fps = computed(() => {
|
|
729
|
+
return 1e3 / interval.value;
|
|
730
|
+
});
|
|
731
|
+
return {
|
|
732
|
+
interval: readonly(interval),
|
|
733
|
+
fps
|
|
734
|
+
};
|
|
581
735
|
}
|
|
736
|
+
|
|
737
|
+
//#endregion
|
|
738
|
+
//#region useCollectionScope/index.ts
|
|
739
|
+
/**
|
|
740
|
+
* Scope the SideEffects of Cesium-related `Collection` and automatically remove them when unmounted.
|
|
741
|
+
* - note: This is a basic function that is intended to be called by other lower-level function
|
|
742
|
+
* @param addFn - add SideEffect function. eg.`entites.add`
|
|
743
|
+
* @param removeFn - Clean SideEffect function. eg.`entities.remove`
|
|
744
|
+
* @param removeScopeArgs - The parameters to pass for `removeScope` triggered when the component is unmounted
|
|
745
|
+
*
|
|
746
|
+
* @returns Contains side effect addition and removal functions
|
|
747
|
+
*/
|
|
582
748
|
function useCollectionScope(addFn, removeFn, removeScopeArgs) {
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
removeWhere,
|
|
620
|
-
removeScope
|
|
621
|
-
};
|
|
749
|
+
const scope = shallowReactive(/* @__PURE__ */ new Set());
|
|
750
|
+
const add = (instance, ...args) => {
|
|
751
|
+
const result = addFn(instance, ...args);
|
|
752
|
+
if (isPromise(result)) return new Promise((resolve, reject) => {
|
|
753
|
+
result.then((i) => {
|
|
754
|
+
scope.add(i);
|
|
755
|
+
resolve(i);
|
|
756
|
+
}).catch((error) => reject(error));
|
|
757
|
+
});
|
|
758
|
+
else {
|
|
759
|
+
scope.add(result);
|
|
760
|
+
return result;
|
|
761
|
+
}
|
|
762
|
+
};
|
|
763
|
+
const remove = (instance, ...args) => {
|
|
764
|
+
scope.delete(instance);
|
|
765
|
+
return removeFn(instance, ...args);
|
|
766
|
+
};
|
|
767
|
+
const removeWhere = (predicate, ...args) => {
|
|
768
|
+
scope.forEach((instance) => {
|
|
769
|
+
if (predicate(instance)) remove(instance, ...args);
|
|
770
|
+
});
|
|
771
|
+
};
|
|
772
|
+
const removeScope = (...args) => {
|
|
773
|
+
scope.forEach((instance) => {
|
|
774
|
+
remove(instance, ...args);
|
|
775
|
+
});
|
|
776
|
+
};
|
|
777
|
+
tryOnScopeDispose(() => removeScope(...removeScopeArgs));
|
|
778
|
+
return {
|
|
779
|
+
scope: shallowReadonly(scope),
|
|
780
|
+
add,
|
|
781
|
+
remove,
|
|
782
|
+
removeWhere,
|
|
783
|
+
removeScope
|
|
784
|
+
};
|
|
622
785
|
}
|
|
786
|
+
|
|
787
|
+
//#endregion
|
|
788
|
+
//#region useDataSource/index.ts
|
|
623
789
|
function useDataSource(dataSources, options = {}) {
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
const _isActive = toValue(isActive);
|
|
641
|
-
if (_isActive) {
|
|
642
|
-
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
643
|
-
const _collection = collection ?? ((_a = viewer.value) == null ? void 0 : _a.dataSources);
|
|
644
|
-
list.forEach((item) => item && (_collection == null ? void 0 : _collection.add(item)));
|
|
645
|
-
onCleanup(() => {
|
|
646
|
-
const destroy = toValue(destroyOnRemove);
|
|
647
|
-
!(_collection == null ? void 0 : _collection.isDestroyed()) && list.forEach((dataSource) => dataSource && (_collection == null ? void 0 : _collection.remove(dataSource, destroy)));
|
|
648
|
-
});
|
|
649
|
-
}
|
|
650
|
-
});
|
|
651
|
-
return result;
|
|
790
|
+
const { destroyOnRemove, collection, isActive = true, evaluating } = options;
|
|
791
|
+
const result = computedAsync(() => toPromiseValue(dataSources), void 0, { evaluating });
|
|
792
|
+
const viewer = useViewer();
|
|
793
|
+
watchEffect((onCleanup) => {
|
|
794
|
+
const _isActive = toValue(isActive);
|
|
795
|
+
if (_isActive) {
|
|
796
|
+
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
797
|
+
const _collection = collection ?? viewer.value?.dataSources;
|
|
798
|
+
list.forEach((item) => item && _collection?.add(item));
|
|
799
|
+
onCleanup(() => {
|
|
800
|
+
const destroy = toValue(destroyOnRemove);
|
|
801
|
+
!_collection?.isDestroyed() && list.forEach((dataSource) => dataSource && _collection?.remove(dataSource, destroy));
|
|
802
|
+
});
|
|
803
|
+
}
|
|
804
|
+
});
|
|
805
|
+
return result;
|
|
652
806
|
}
|
|
807
|
+
|
|
808
|
+
//#endregion
|
|
809
|
+
//#region useDataSourceScope/index.ts
|
|
810
|
+
/**
|
|
811
|
+
* // Scope the SideEffects of `DataSourceCollection` operations and automatically remove them when unmounted
|
|
812
|
+
*/
|
|
653
813
|
function useDataSourceScope(options = {}) {
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
remove,
|
|
675
|
-
removeWhere,
|
|
676
|
-
removeScope
|
|
677
|
-
};
|
|
814
|
+
const { collection: _collection, destroyOnRemove } = options;
|
|
815
|
+
const viewer = useViewer();
|
|
816
|
+
const collection = computed(() => {
|
|
817
|
+
return toValue(_collection) ?? viewer.value?.dataSources;
|
|
818
|
+
});
|
|
819
|
+
const addFn = (dataSource) => {
|
|
820
|
+
if (!collection.value) throw new Error("collection is not defined");
|
|
821
|
+
return collection.value.add(dataSource);
|
|
822
|
+
};
|
|
823
|
+
const removeFn = (dataSource, destroy) => {
|
|
824
|
+
return !!collection.value?.remove(dataSource, destroy);
|
|
825
|
+
};
|
|
826
|
+
const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, [destroyOnRemove]);
|
|
827
|
+
return {
|
|
828
|
+
scope,
|
|
829
|
+
add,
|
|
830
|
+
remove,
|
|
831
|
+
removeWhere,
|
|
832
|
+
removeScope
|
|
833
|
+
};
|
|
678
834
|
}
|
|
835
|
+
|
|
836
|
+
//#endregion
|
|
837
|
+
//#region useElementOverlay/index.ts
|
|
838
|
+
/**
|
|
839
|
+
* Cesium HtmlElement Overlay
|
|
840
|
+
*/
|
|
679
841
|
function useElementOverlay(target, position, options = {}) {
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
x: finalOffset.value.x + data.x,
|
|
745
|
-
y: finalOffset.value.y + data.y
|
|
746
|
-
};
|
|
747
|
-
});
|
|
748
|
-
const x = computed(() => location.value.x);
|
|
749
|
-
const y = computed(() => location.value.y);
|
|
750
|
-
const style = computed(() => {
|
|
751
|
-
var _a, _b;
|
|
752
|
-
return { left: `${(_a = x.value) == null ? void 0 : _a.toFixed(2)}px`, top: `${(_b = y.value) == null ? void 0 : _b.toFixed(2)}px` };
|
|
753
|
-
});
|
|
754
|
-
watchEffect(() => {
|
|
755
|
-
var _a, _b, _c, _d;
|
|
756
|
-
const element = toValue(target);
|
|
757
|
-
if (element && toValue(options.applyStyle ?? true)) {
|
|
758
|
-
(_b = (_a = element.style) == null ? void 0 : _a.setProperty) == null ? void 0 : _b.call(_a, "left", style.value.left);
|
|
759
|
-
(_d = (_c = element.style) == null ? void 0 : _c.setProperty) == null ? void 0 : _d.call(_c, "top", style.value.top);
|
|
760
|
-
}
|
|
761
|
-
});
|
|
762
|
-
return {
|
|
763
|
-
x,
|
|
764
|
-
y,
|
|
765
|
-
style
|
|
766
|
-
};
|
|
842
|
+
const { referenceWindow, horizontal = "center", vertical = "bottom", offset = {
|
|
843
|
+
x: 0,
|
|
844
|
+
y: 0
|
|
845
|
+
} } = options;
|
|
846
|
+
const cartesian3 = computed(() => toCartesian3(toValue(position)));
|
|
847
|
+
const viewer = useViewer();
|
|
848
|
+
const coord = shallowRef();
|
|
849
|
+
useCesiumEventListener(() => viewer.value?.scene.postRender, () => {
|
|
850
|
+
if (!viewer.value?.scene) return;
|
|
851
|
+
if (!cartesian3.value) coord.value = void 0;
|
|
852
|
+
else {
|
|
853
|
+
const reslut = cartesianToCanvasCoord(cartesian3.value, viewer.value.scene);
|
|
854
|
+
coord.value = !Cartesian2.equals(reslut, coord.value) ? reslut : coord.value;
|
|
855
|
+
}
|
|
856
|
+
});
|
|
857
|
+
const canvasBounding = useElementBounding(() => viewer.value?.canvas.parentElement);
|
|
858
|
+
const targetBounding = useElementBounding(target);
|
|
859
|
+
const finalOffset = computed(() => {
|
|
860
|
+
const _offset = toValue(offset);
|
|
861
|
+
let x$1 = _offset?.x ?? 0;
|
|
862
|
+
const _horizontal = toValue(horizontal);
|
|
863
|
+
if (_horizontal === "center") x$1 -= targetBounding.width.value / 2;
|
|
864
|
+
else if (_horizontal === "right") x$1 -= targetBounding.width.value;
|
|
865
|
+
let y$1 = _offset?.y ?? 0;
|
|
866
|
+
const _vertical = toValue(vertical);
|
|
867
|
+
if (_vertical === "center") y$1 -= targetBounding.height.value / 2;
|
|
868
|
+
else if (_vertical === "bottom") y$1 -= targetBounding.height.value;
|
|
869
|
+
return {
|
|
870
|
+
x: x$1,
|
|
871
|
+
y: y$1
|
|
872
|
+
};
|
|
873
|
+
});
|
|
874
|
+
const location = computed(() => {
|
|
875
|
+
const data = {
|
|
876
|
+
x: coord.value?.x ?? 0,
|
|
877
|
+
y: coord.value?.y ?? 0
|
|
878
|
+
};
|
|
879
|
+
if (toValue(referenceWindow)) {
|
|
880
|
+
data.x += canvasBounding.x.value;
|
|
881
|
+
data.y += canvasBounding.y.value;
|
|
882
|
+
}
|
|
883
|
+
return {
|
|
884
|
+
x: finalOffset.value.x + data.x,
|
|
885
|
+
y: finalOffset.value.y + data.y
|
|
886
|
+
};
|
|
887
|
+
});
|
|
888
|
+
const x = computed(() => location.value.x);
|
|
889
|
+
const y = computed(() => location.value.y);
|
|
890
|
+
const style = computed(() => ({
|
|
891
|
+
left: `${x.value?.toFixed(2)}px`,
|
|
892
|
+
top: `${y.value?.toFixed(2)}px`
|
|
893
|
+
}));
|
|
894
|
+
watchEffect(() => {
|
|
895
|
+
const element = toValue(target);
|
|
896
|
+
if (element && toValue(options.applyStyle ?? true)) {
|
|
897
|
+
element.style?.setProperty?.("left", style.value.left);
|
|
898
|
+
element.style?.setProperty?.("top", style.value.top);
|
|
899
|
+
}
|
|
900
|
+
});
|
|
901
|
+
return {
|
|
902
|
+
x,
|
|
903
|
+
y,
|
|
904
|
+
style
|
|
905
|
+
};
|
|
767
906
|
}
|
|
907
|
+
|
|
908
|
+
//#endregion
|
|
909
|
+
//#region useEntity/index.ts
|
|
768
910
|
function useEntity(data, options = {}) {
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
list.forEach((item) => item && (_collection == null ? void 0 : _collection.add(item)));
|
|
785
|
-
onCleanup(() => {
|
|
786
|
-
list.forEach((item) => item && (_collection == null ? void 0 : _collection.remove(item)));
|
|
787
|
-
});
|
|
788
|
-
}
|
|
789
|
-
});
|
|
790
|
-
return result;
|
|
911
|
+
const { collection, isActive = true, evaluating } = options;
|
|
912
|
+
const result = computedAsync(() => toPromiseValue(data), [], { evaluating });
|
|
913
|
+
const viewer = useViewer();
|
|
914
|
+
watchEffect((onCleanup) => {
|
|
915
|
+
const _isActive = toValue(isActive);
|
|
916
|
+
if (_isActive) {
|
|
917
|
+
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
918
|
+
const _collection = collection ?? viewer.value?.entities;
|
|
919
|
+
list.forEach((item) => item && _collection?.add(item));
|
|
920
|
+
onCleanup(() => {
|
|
921
|
+
list.forEach((item) => item && _collection?.remove(item));
|
|
922
|
+
});
|
|
923
|
+
}
|
|
924
|
+
});
|
|
925
|
+
return result;
|
|
791
926
|
}
|
|
927
|
+
|
|
928
|
+
//#endregion
|
|
929
|
+
//#region useEntityScope/index.ts
|
|
930
|
+
/**
|
|
931
|
+
* Make `add` and `remove` operations of `EntityCollection` scoped,
|
|
932
|
+
* automatically remove `Entity` instance when component is unmounted.
|
|
933
|
+
*/
|
|
792
934
|
function useEntityScope(options = {}) {
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
scope,
|
|
815
|
-
add,
|
|
816
|
-
remove,
|
|
817
|
-
removeWhere,
|
|
818
|
-
removeScope
|
|
819
|
-
};
|
|
935
|
+
const { collection: _collection } = options;
|
|
936
|
+
const viewer = useViewer();
|
|
937
|
+
const collection = computed(() => {
|
|
938
|
+
return toValue(_collection) ?? viewer.value?.entities;
|
|
939
|
+
});
|
|
940
|
+
const addFn = (entity) => {
|
|
941
|
+
if (!collection.value) throw new Error("collection is not defined");
|
|
942
|
+
if (!collection.value.contains(entity)) collection.value.add(entity);
|
|
943
|
+
return entity;
|
|
944
|
+
};
|
|
945
|
+
const removeFn = (entity) => {
|
|
946
|
+
return !!collection.value?.remove(entity);
|
|
947
|
+
};
|
|
948
|
+
const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, []);
|
|
949
|
+
return {
|
|
950
|
+
scope,
|
|
951
|
+
add,
|
|
952
|
+
remove,
|
|
953
|
+
removeWhere,
|
|
954
|
+
removeScope
|
|
955
|
+
};
|
|
820
956
|
}
|
|
957
|
+
|
|
958
|
+
//#endregion
|
|
959
|
+
//#region useScenePick/index.ts
|
|
821
960
|
const pickCache = /* @__PURE__ */ new WeakMap();
|
|
961
|
+
/**
|
|
962
|
+
* Uses the `scene.pick` function in Cesium's Scene object to perform screen point picking,
|
|
963
|
+
* return a computed property containing the pick result, or undefined if no object is picked.
|
|
964
|
+
*
|
|
965
|
+
* @param windowPosition The screen coordinates of the pick point.
|
|
966
|
+
*/
|
|
822
967
|
function useScenePick(windowPosition, options = {}) {
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
pick.value = (_a = viewer.value) == null ? void 0 : _a.scene.pick(
|
|
840
|
-
position.value,
|
|
841
|
-
toValue(width),
|
|
842
|
-
toValue(height)
|
|
843
|
-
);
|
|
844
|
-
}
|
|
845
|
-
}
|
|
846
|
-
});
|
|
847
|
-
return pick;
|
|
968
|
+
const { width = 3, height = 3, throttled = 8 } = options;
|
|
969
|
+
const isActive = toRef(options.isActive ?? true);
|
|
970
|
+
const viewer = useViewer();
|
|
971
|
+
const position = refThrottled(computed(() => toValue(windowPosition)?.clone()), throttled, false, true);
|
|
972
|
+
const pick = shallowRef();
|
|
973
|
+
watchEffect(() => {
|
|
974
|
+
if (viewer.value && position.value && isActive.value) {
|
|
975
|
+
const cache = pickCache.get(viewer.value);
|
|
976
|
+
if (cache && cache[0].equals(position.value)) pick.value = cache[1];
|
|
977
|
+
else {
|
|
978
|
+
pickCache.set(viewer.value, [position.value.clone(), pick.value]);
|
|
979
|
+
pick.value = viewer.value?.scene.pick(position.value, toValue(width), toValue(height));
|
|
980
|
+
}
|
|
981
|
+
}
|
|
982
|
+
});
|
|
983
|
+
return pick;
|
|
848
984
|
}
|
|
985
|
+
|
|
986
|
+
//#endregion
|
|
987
|
+
//#region useScreenSpaceEventHandler/index.ts
|
|
988
|
+
/**
|
|
989
|
+
* Easily use the `ScreenSpaceEventHandler`,
|
|
990
|
+
* when the dependent data changes or the component is unmounted,
|
|
991
|
+
* the listener function will automatically reload or destroy.
|
|
992
|
+
*
|
|
993
|
+
* @param type Types of mouse event
|
|
994
|
+
* @param inputAction Callback function for listening
|
|
995
|
+
*/
|
|
849
996
|
function useScreenSpaceEventHandler(type, inputAction, options = {}) {
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
const stop = () => {
|
|
876
|
-
cleanup1();
|
|
877
|
-
cleanup2();
|
|
878
|
-
};
|
|
879
|
-
tryOnScopeDispose(stop);
|
|
880
|
-
return stop;
|
|
997
|
+
const { modifier } = options;
|
|
998
|
+
const viewer = useViewer();
|
|
999
|
+
const isActive = toRef(options.isActive ?? true);
|
|
1000
|
+
const handler = computed(() => {
|
|
1001
|
+
if (viewer.value?.cesiumWidget?.canvas) return new ScreenSpaceEventHandler(viewer.value.cesiumWidget.canvas);
|
|
1002
|
+
});
|
|
1003
|
+
const cleanup1 = watch(handler, (_value, previous) => {
|
|
1004
|
+
viewer.value?.cesiumWidget && previous?.destroy();
|
|
1005
|
+
});
|
|
1006
|
+
const cleanup2 = watchEffect((onCleanup) => {
|
|
1007
|
+
const typeValue = toValue(type);
|
|
1008
|
+
const modifierValue = toValue(modifier);
|
|
1009
|
+
const handlerValue = toValue(handler);
|
|
1010
|
+
if (!handlerValue || !isActive.value || !inputAction) return;
|
|
1011
|
+
if (isDef(typeValue)) {
|
|
1012
|
+
handlerValue.setInputAction(inputAction, typeValue, modifierValue);
|
|
1013
|
+
onCleanup(() => handlerValue.removeInputAction(typeValue, modifierValue));
|
|
1014
|
+
}
|
|
1015
|
+
});
|
|
1016
|
+
const stop = () => {
|
|
1017
|
+
cleanup1();
|
|
1018
|
+
cleanup2();
|
|
1019
|
+
};
|
|
1020
|
+
tryOnScopeDispose(stop);
|
|
1021
|
+
return stop;
|
|
881
1022
|
}
|
|
1023
|
+
|
|
1024
|
+
//#endregion
|
|
1025
|
+
//#region useGraphicEvent/useDrag.ts
|
|
1026
|
+
/**
|
|
1027
|
+
* Use graphic drag events with ease, and remove listener automatically on unmounted.
|
|
1028
|
+
*/
|
|
882
1029
|
function useDrag(listener) {
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
if (pick.value && motionEvent.value) {
|
|
939
|
-
execute(pick.value, motionEvent.value.endPosition, event.position);
|
|
940
|
-
}
|
|
941
|
-
position.value = void 0;
|
|
942
|
-
motionEvent.value = void 0;
|
|
943
|
-
}
|
|
944
|
-
);
|
|
945
|
-
const stop = () => {
|
|
946
|
-
stopLeftDownWatch();
|
|
947
|
-
stopMouseMoveWatch();
|
|
948
|
-
stopLeftUpWatch();
|
|
949
|
-
};
|
|
950
|
-
tryOnScopeDispose(stop);
|
|
951
|
-
return stop;
|
|
1030
|
+
const position = shallowRef();
|
|
1031
|
+
const pick = useScenePick(position);
|
|
1032
|
+
const motionEvent = shallowRef();
|
|
1033
|
+
const dragging = ref(false);
|
|
1034
|
+
const viewer = useViewer();
|
|
1035
|
+
const cameraLocked = ref(false);
|
|
1036
|
+
watch(cameraLocked, (cameraLocked$1) => {
|
|
1037
|
+
viewer.value && (viewer.value.scene.screenSpaceCameraController.enableRotate = !cameraLocked$1);
|
|
1038
|
+
});
|
|
1039
|
+
const lockCamera = () => {
|
|
1040
|
+
cameraLocked.value = true;
|
|
1041
|
+
};
|
|
1042
|
+
const execute = (pick$1, startPosition, endPosition) => {
|
|
1043
|
+
listener({
|
|
1044
|
+
event: {
|
|
1045
|
+
startPosition: startPosition.clone(),
|
|
1046
|
+
endPosition: endPosition.clone()
|
|
1047
|
+
},
|
|
1048
|
+
pick: pick$1,
|
|
1049
|
+
dragging: dragging.value,
|
|
1050
|
+
lockCamera
|
|
1051
|
+
});
|
|
1052
|
+
nextTick(() => {
|
|
1053
|
+
if (!dragging.value && cameraLocked.value) cameraLocked.value = false;
|
|
1054
|
+
});
|
|
1055
|
+
};
|
|
1056
|
+
const stopLeftDownWatch = useScreenSpaceEventHandler(ScreenSpaceEventType.LEFT_DOWN, (event) => {
|
|
1057
|
+
dragging.value = true;
|
|
1058
|
+
position.value = event.position.clone();
|
|
1059
|
+
});
|
|
1060
|
+
const stopMouseMoveWatch = useScreenSpaceEventHandler(ScreenSpaceEventType.MOUSE_MOVE, throttle(({ startPosition, endPosition }) => {
|
|
1061
|
+
motionEvent.value = {
|
|
1062
|
+
startPosition: motionEvent.value?.endPosition.clone() || startPosition.clone(),
|
|
1063
|
+
endPosition: endPosition.clone()
|
|
1064
|
+
};
|
|
1065
|
+
}, 8, false, true));
|
|
1066
|
+
watch([pick, motionEvent], ([pick$1, motionEvent$1]) => {
|
|
1067
|
+
if (pick$1 && motionEvent$1) {
|
|
1068
|
+
const { startPosition, endPosition } = motionEvent$1;
|
|
1069
|
+
dragging.value && execute(pick$1, startPosition, endPosition);
|
|
1070
|
+
}
|
|
1071
|
+
});
|
|
1072
|
+
const stopLeftUpWatch = useScreenSpaceEventHandler(ScreenSpaceEventType.LEFT_UP, (event) => {
|
|
1073
|
+
dragging.value = false;
|
|
1074
|
+
if (pick.value && motionEvent.value) execute(pick.value, motionEvent.value.endPosition, event.position);
|
|
1075
|
+
position.value = void 0;
|
|
1076
|
+
motionEvent.value = void 0;
|
|
1077
|
+
});
|
|
1078
|
+
const stop = () => {
|
|
1079
|
+
stopLeftDownWatch();
|
|
1080
|
+
stopMouseMoveWatch();
|
|
1081
|
+
stopLeftUpWatch();
|
|
1082
|
+
};
|
|
1083
|
+
tryOnScopeDispose(stop);
|
|
1084
|
+
return stop;
|
|
952
1085
|
}
|
|
1086
|
+
|
|
1087
|
+
//#endregion
|
|
1088
|
+
//#region useGraphicEvent/useHover.ts
|
|
1089
|
+
/**
|
|
1090
|
+
* Use graphic hover events with ease, and remove listener automatically on unmounted.
|
|
1091
|
+
*/
|
|
953
1092
|
function useHover(listener) {
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
watch(pick, (pick2, prevPick) => {
|
|
985
|
-
if (prevPick && motionEvent.value) {
|
|
986
|
-
const { startPosition, endPosition } = motionEvent.value;
|
|
987
|
-
execute(prevPick, startPosition, endPosition, false);
|
|
988
|
-
}
|
|
989
|
-
});
|
|
1093
|
+
const motionEvent = shallowRef();
|
|
1094
|
+
const pick = useScenePick(() => motionEvent.value?.endPosition);
|
|
1095
|
+
const execute = (pick$1, startPosition, endPosition, hovering) => {
|
|
1096
|
+
listener({
|
|
1097
|
+
event: {
|
|
1098
|
+
startPosition: startPosition.clone(),
|
|
1099
|
+
endPosition: endPosition.clone()
|
|
1100
|
+
},
|
|
1101
|
+
pick: pick$1,
|
|
1102
|
+
hovering
|
|
1103
|
+
});
|
|
1104
|
+
};
|
|
1105
|
+
useScreenSpaceEventHandler(ScreenSpaceEventType.MOUSE_MOVE, ({ startPosition, endPosition }) => {
|
|
1106
|
+
if (!startPosition.equals(motionEvent.value?.startPosition) || !endPosition.equals(motionEvent.value?.endPosition)) motionEvent.value = {
|
|
1107
|
+
startPosition: startPosition.clone(),
|
|
1108
|
+
endPosition: endPosition.clone()
|
|
1109
|
+
};
|
|
1110
|
+
});
|
|
1111
|
+
watch([pick, motionEvent], ([pick$1, motionEvent$1]) => {
|
|
1112
|
+
if (pick$1 && motionEvent$1) {
|
|
1113
|
+
const { startPosition, endPosition } = motionEvent$1;
|
|
1114
|
+
execute(pick$1, startPosition, endPosition, true);
|
|
1115
|
+
}
|
|
1116
|
+
});
|
|
1117
|
+
watch(pick, (pick$1, prevPick) => {
|
|
1118
|
+
if (prevPick && motionEvent.value) {
|
|
1119
|
+
const { startPosition, endPosition } = motionEvent.value;
|
|
1120
|
+
execute(prevPick, startPosition, endPosition, false);
|
|
1121
|
+
}
|
|
1122
|
+
});
|
|
990
1123
|
}
|
|
1124
|
+
|
|
1125
|
+
//#endregion
|
|
1126
|
+
//#region useGraphicEvent/usePositioned.ts
|
|
1127
|
+
/**
|
|
1128
|
+
* @internal
|
|
1129
|
+
*/
|
|
991
1130
|
const EVENT_TYPE_RECORD = {
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1131
|
+
LEFT_DOWN: ScreenSpaceEventType.LEFT_DOWN,
|
|
1132
|
+
LEFT_UP: ScreenSpaceEventType.LEFT_UP,
|
|
1133
|
+
LEFT_CLICK: ScreenSpaceEventType.LEFT_CLICK,
|
|
1134
|
+
LEFT_DOUBLE_CLICK: ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
|
|
1135
|
+
RIGHT_DOWN: ScreenSpaceEventType.RIGHT_DOWN,
|
|
1136
|
+
RIGHT_UP: ScreenSpaceEventType.RIGHT_UP,
|
|
1137
|
+
RIGHT_CLICK: ScreenSpaceEventType.RIGHT_CLICK,
|
|
1138
|
+
MIDDLE_DOWN: ScreenSpaceEventType.MIDDLE_DOWN,
|
|
1139
|
+
MIDDLE_UP: ScreenSpaceEventType.MIDDLE_UP,
|
|
1140
|
+
MIDDLE_CLICK: ScreenSpaceEventType.MIDDLE_CLICK
|
|
1002
1141
|
};
|
|
1003
1142
|
function usePositioned(type, listener) {
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1143
|
+
const screenEvent = EVENT_TYPE_RECORD[type];
|
|
1144
|
+
const viewer = useViewer();
|
|
1145
|
+
useScreenSpaceEventHandler(screenEvent, (event) => {
|
|
1146
|
+
const position = event.position;
|
|
1147
|
+
const pick = viewer.value?.scene.pick(position);
|
|
1148
|
+
pick && position && listener({
|
|
1149
|
+
event: { position },
|
|
1150
|
+
pick
|
|
1151
|
+
});
|
|
1152
|
+
});
|
|
1012
1153
|
}
|
|
1154
|
+
|
|
1155
|
+
//#endregion
|
|
1156
|
+
//#region useGraphicEvent/index.ts
|
|
1013
1157
|
const GLOBAL_GRAPHIC_SYMBOL = Symbol("GLOBAL_GRAPHIC_SYMBOL");
|
|
1014
1158
|
const POSITIONED_EVENT_TYPES = [
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1159
|
+
"LEFT_DOWN",
|
|
1160
|
+
"LEFT_UP",
|
|
1161
|
+
"LEFT_CLICK",
|
|
1162
|
+
"LEFT_DOUBLE_CLICK",
|
|
1163
|
+
"RIGHT_DOWN",
|
|
1164
|
+
"RIGHT_UP",
|
|
1165
|
+
"RIGHT_CLICK",
|
|
1166
|
+
"MIDDLE_DOWN",
|
|
1167
|
+
"MIDDLE_UP",
|
|
1168
|
+
"MIDDLE_CLICK"
|
|
1025
1169
|
];
|
|
1170
|
+
/**
|
|
1171
|
+
* Handle graphic event listeners and cursor styles for Cesium graphics.
|
|
1172
|
+
* You don't need to overly worry about memory leaks from the function, as it automatically cleans up internally.
|
|
1173
|
+
*/
|
|
1026
1174
|
function useGraphicEvent() {
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
graphics.forEach((graphic) => {
|
|
1120
|
-
var _a, _b, _c;
|
|
1121
|
-
(_b = (_a = collection.get(graphic)) == null ? void 0 : _a.get("HOVER")) == null ? void 0 : _b.forEach((fn) => {
|
|
1122
|
-
var _a2;
|
|
1123
|
-
return (_a2 = tryRun(fn)) == null ? void 0 : _a2(event);
|
|
1124
|
-
});
|
|
1125
|
-
if (!dragging.value) {
|
|
1126
|
-
(_c = cursorCollection.get(graphic)) == null ? void 0 : _c.forEach((map) => {
|
|
1127
|
-
map.forEach((fn) => {
|
|
1128
|
-
var _a2, _b2;
|
|
1129
|
-
const cursor = event.hovering ? tryRun(fn)(event) : "";
|
|
1130
|
-
(_b2 = (_a2 = viewer.value) == null ? void 0 : _a2.canvas.style) == null ? void 0 : _b2.setProperty("cursor", cursor);
|
|
1131
|
-
});
|
|
1132
|
-
});
|
|
1133
|
-
}
|
|
1134
|
-
});
|
|
1135
|
-
});
|
|
1136
|
-
useDrag((event) => {
|
|
1137
|
-
const graphics = resolvePick(event.pick).concat(GLOBAL_GRAPHIC_SYMBOL);
|
|
1138
|
-
dragging.value = event.dragging;
|
|
1139
|
-
graphics.forEach((graphic) => {
|
|
1140
|
-
var _a, _b, _c;
|
|
1141
|
-
(_b = (_a = collection.get(graphic)) == null ? void 0 : _a.get("DRAG")) == null ? void 0 : _b.forEach((fn) => tryRun(fn)(event));
|
|
1142
|
-
(_c = dragCursorCollection.get(graphic)) == null ? void 0 : _c.forEach((map) => {
|
|
1143
|
-
map.forEach((fn) => {
|
|
1144
|
-
var _a2, _b2;
|
|
1145
|
-
const cursor = event.dragging ? tryRun(fn)(event) : "";
|
|
1146
|
-
(_b2 = (_a2 = viewer.value) == null ? void 0 : _a2.canvas.style) == null ? void 0 : _b2.setProperty("cursor", cursor);
|
|
1147
|
-
});
|
|
1148
|
-
});
|
|
1149
|
-
});
|
|
1150
|
-
});
|
|
1151
|
-
return {
|
|
1152
|
-
addGraphicEvent,
|
|
1153
|
-
removeGraphicEvent,
|
|
1154
|
-
clearGraphicEvent
|
|
1155
|
-
};
|
|
1175
|
+
const collection = /* @__PURE__ */ new WeakMap();
|
|
1176
|
+
const cursorCollection = /* @__PURE__ */ new WeakMap();
|
|
1177
|
+
const dragCursorCollection = /* @__PURE__ */ new WeakMap();
|
|
1178
|
+
const removeGraphicEvent = (graphic, type, listener) => {
|
|
1179
|
+
const _graphic = graphic === "global" ? GLOBAL_GRAPHIC_SYMBOL : graphic;
|
|
1180
|
+
collection?.get(_graphic)?.get(type)?.delete(listener);
|
|
1181
|
+
cursorCollection?.get(_graphic)?.get(type)?.delete(listener);
|
|
1182
|
+
if (collection?.get(_graphic)?.get(type)?.size === 0) collection.get(_graphic).delete(type);
|
|
1183
|
+
if (collection.get(_graphic)?.size === 0) collection.delete(_graphic);
|
|
1184
|
+
cursorCollection?.get(_graphic)?.get(type)?.delete(listener);
|
|
1185
|
+
if (cursorCollection?.get(_graphic)?.get(type)?.size === 0) cursorCollection?.get(_graphic)?.delete(type);
|
|
1186
|
+
if (cursorCollection?.get(_graphic)?.size === 0) cursorCollection?.delete(_graphic);
|
|
1187
|
+
dragCursorCollection?.get(_graphic)?.get(type)?.delete(listener);
|
|
1188
|
+
if (dragCursorCollection?.get(_graphic)?.get(type)?.size === 0) dragCursorCollection?.get(_graphic)?.delete(type);
|
|
1189
|
+
if (dragCursorCollection?.get(_graphic)?.size === 0) dragCursorCollection?.delete(_graphic);
|
|
1190
|
+
};
|
|
1191
|
+
const addGraphicEvent = (graphic, type, listener, options = {}) => {
|
|
1192
|
+
const _graphic = graphic === "global" ? GLOBAL_GRAPHIC_SYMBOL : graphic;
|
|
1193
|
+
collection.get(_graphic) ?? collection.set(_graphic, /* @__PURE__ */ new Map());
|
|
1194
|
+
const eventTypeMap = collection.get(_graphic);
|
|
1195
|
+
eventTypeMap.get(type) ?? eventTypeMap.set(type, /* @__PURE__ */ new Set());
|
|
1196
|
+
const listeners = eventTypeMap.get(type);
|
|
1197
|
+
listeners.add(listener);
|
|
1198
|
+
let { cursor = "pointer", dragCursor } = options;
|
|
1199
|
+
if (isDef(cursor)) {
|
|
1200
|
+
const _cursor = isFunction(cursor) ? cursor : () => cursor;
|
|
1201
|
+
cursorCollection.get(_graphic) ?? cursorCollection.set(_graphic, /* @__PURE__ */ new Map());
|
|
1202
|
+
cursorCollection.get(_graphic).get(type) ?? cursorCollection.get(_graphic).set(type, /* @__PURE__ */ new Map());
|
|
1203
|
+
cursorCollection.get(_graphic).get(type).set(listener, _cursor);
|
|
1204
|
+
}
|
|
1205
|
+
if (type === "DRAG") dragCursor ??= (event) => event?.dragging ? "crosshair" : void 0;
|
|
1206
|
+
if (isDef(dragCursor)) {
|
|
1207
|
+
const _dragCursor = isFunction(dragCursor) ? dragCursor : () => dragCursor;
|
|
1208
|
+
dragCursorCollection.get(_graphic) ?? dragCursorCollection.set(_graphic, /* @__PURE__ */ new Map());
|
|
1209
|
+
dragCursorCollection.get(_graphic).get(type) ?? dragCursorCollection.get(_graphic).set(type, /* @__PURE__ */ new Map());
|
|
1210
|
+
dragCursorCollection.get(_graphic).get(type).set(listener, _dragCursor);
|
|
1211
|
+
}
|
|
1212
|
+
return () => removeGraphicEvent(graphic, type, listener);
|
|
1213
|
+
};
|
|
1214
|
+
const clearGraphicEvent = (graphic, type) => {
|
|
1215
|
+
const _graphic = graphic === "global" ? GLOBAL_GRAPHIC_SYMBOL : graphic;
|
|
1216
|
+
if (type === "all") {
|
|
1217
|
+
collection.delete(_graphic);
|
|
1218
|
+
cursorCollection.delete(_graphic);
|
|
1219
|
+
dragCursorCollection.delete(_graphic);
|
|
1220
|
+
return;
|
|
1221
|
+
}
|
|
1222
|
+
collection.get(_graphic)?.delete(type);
|
|
1223
|
+
if (collection.get(_graphic)?.size === 0) collection.delete(_graphic);
|
|
1224
|
+
cursorCollection?.get(_graphic)?.delete(type);
|
|
1225
|
+
dragCursorCollection?.get(_graphic)?.delete(type);
|
|
1226
|
+
if (cursorCollection?.get(_graphic)?.size === 0) cursorCollection?.delete(_graphic);
|
|
1227
|
+
if (dragCursorCollection?.get(_graphic)?.size === 0) dragCursorCollection?.delete(_graphic);
|
|
1228
|
+
};
|
|
1229
|
+
for (const type of POSITIONED_EVENT_TYPES) usePositioned(type, (event) => {
|
|
1230
|
+
const graphics = resolvePick(event.pick);
|
|
1231
|
+
graphics.concat(GLOBAL_GRAPHIC_SYMBOL).forEach((graphic) => {
|
|
1232
|
+
collection.get(graphic)?.get(type)?.forEach((fn) => tryRun(fn)?.(event));
|
|
1233
|
+
});
|
|
1234
|
+
});
|
|
1235
|
+
const dragging = ref(false);
|
|
1236
|
+
const viewer = useViewer();
|
|
1237
|
+
useHover((event) => {
|
|
1238
|
+
const graphics = resolvePick(event.pick).concat(GLOBAL_GRAPHIC_SYMBOL);
|
|
1239
|
+
graphics.forEach((graphic) => {
|
|
1240
|
+
collection.get(graphic)?.get("HOVER")?.forEach((fn) => tryRun(fn)?.(event));
|
|
1241
|
+
if (!dragging.value) cursorCollection.get(graphic)?.forEach((map) => {
|
|
1242
|
+
map.forEach((fn) => {
|
|
1243
|
+
const cursor = event.hovering ? tryRun(fn)(event) : "";
|
|
1244
|
+
viewer.value?.canvas.style?.setProperty("cursor", cursor);
|
|
1245
|
+
});
|
|
1246
|
+
});
|
|
1247
|
+
});
|
|
1248
|
+
});
|
|
1249
|
+
useDrag((event) => {
|
|
1250
|
+
const graphics = resolvePick(event.pick).concat(GLOBAL_GRAPHIC_SYMBOL);
|
|
1251
|
+
dragging.value = event.dragging;
|
|
1252
|
+
graphics.forEach((graphic) => {
|
|
1253
|
+
collection.get(graphic)?.get("DRAG")?.forEach((fn) => tryRun(fn)(event));
|
|
1254
|
+
dragCursorCollection.get(graphic)?.forEach((map) => {
|
|
1255
|
+
map.forEach((fn) => {
|
|
1256
|
+
const cursor = event.dragging ? tryRun(fn)(event) : "";
|
|
1257
|
+
viewer.value?.canvas.style?.setProperty("cursor", cursor);
|
|
1258
|
+
});
|
|
1259
|
+
});
|
|
1260
|
+
});
|
|
1261
|
+
});
|
|
1262
|
+
return {
|
|
1263
|
+
addGraphicEvent,
|
|
1264
|
+
removeGraphicEvent,
|
|
1265
|
+
clearGraphicEvent
|
|
1266
|
+
};
|
|
1156
1267
|
}
|
|
1268
|
+
|
|
1269
|
+
//#endregion
|
|
1270
|
+
//#region useImageryLayer/index.ts
|
|
1157
1271
|
function useImageryLayer(data, options = {}) {
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
}
|
|
1186
|
-
if (item == null ? void 0 : item.isDestroyed()) {
|
|
1187
|
-
console.warn("ImageryLayer is destroyed");
|
|
1188
|
-
return;
|
|
1189
|
-
}
|
|
1190
|
-
_collection == null ? void 0 : _collection.add(item);
|
|
1191
|
-
});
|
|
1192
|
-
onCleanup(() => {
|
|
1193
|
-
const destroy = toValue(destroyOnRemove);
|
|
1194
|
-
list.forEach((item) => item && (_collection == null ? void 0 : _collection.remove(item, destroy)));
|
|
1195
|
-
});
|
|
1196
|
-
}
|
|
1197
|
-
});
|
|
1198
|
-
return result;
|
|
1272
|
+
const { destroyOnRemove, collection, isActive = true, evaluating } = options;
|
|
1273
|
+
const result = computedAsync(() => toPromiseValue(data), [], { evaluating });
|
|
1274
|
+
const viewer = useViewer();
|
|
1275
|
+
watchEffect((onCleanup) => {
|
|
1276
|
+
const _isActive = toValue(isActive);
|
|
1277
|
+
if (_isActive) {
|
|
1278
|
+
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
1279
|
+
const _collection = collection ?? viewer.value?.imageryLayers;
|
|
1280
|
+
if (collection?.isDestroyed()) return;
|
|
1281
|
+
list.forEach((item) => {
|
|
1282
|
+
if (!item) {
|
|
1283
|
+
console.warn("ImageryLayer is undefined");
|
|
1284
|
+
return;
|
|
1285
|
+
}
|
|
1286
|
+
if (item?.isDestroyed()) {
|
|
1287
|
+
console.warn("ImageryLayer is destroyed");
|
|
1288
|
+
return;
|
|
1289
|
+
}
|
|
1290
|
+
_collection?.add(item);
|
|
1291
|
+
});
|
|
1292
|
+
onCleanup(() => {
|
|
1293
|
+
const destroy = toValue(destroyOnRemove);
|
|
1294
|
+
list.forEach((item) => item && _collection?.remove(item, destroy));
|
|
1295
|
+
});
|
|
1296
|
+
}
|
|
1297
|
+
});
|
|
1298
|
+
return result;
|
|
1199
1299
|
}
|
|
1300
|
+
|
|
1301
|
+
//#endregion
|
|
1302
|
+
//#region useImageryLayerScope/index.ts
|
|
1303
|
+
/**
|
|
1304
|
+
* Make `add` and `remove` operations of `ImageryLayerCollection` scoped,
|
|
1305
|
+
* automatically remove `ImageryLayer` instance when component is unmounted.
|
|
1306
|
+
*/
|
|
1200
1307
|
function useImageryLayerScope(options = {}) {
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
remove,
|
|
1223
|
-
removeWhere,
|
|
1224
|
-
removeScope
|
|
1225
|
-
};
|
|
1308
|
+
const { collection: _collection, destroyOnRemove } = options;
|
|
1309
|
+
const viewer = useViewer();
|
|
1310
|
+
const collection = computed(() => {
|
|
1311
|
+
return toValue(_collection) ?? viewer.value?.imageryLayers;
|
|
1312
|
+
});
|
|
1313
|
+
const addFn = (imageryLayer, index) => {
|
|
1314
|
+
if (!collection.value) throw new Error("collection is not defined");
|
|
1315
|
+
collection.value.add(imageryLayer, index);
|
|
1316
|
+
return imageryLayer;
|
|
1317
|
+
};
|
|
1318
|
+
const removeFn = (imageryLayer, destroy) => {
|
|
1319
|
+
return !!collection.value?.remove(imageryLayer, destroy);
|
|
1320
|
+
};
|
|
1321
|
+
const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, [destroyOnRemove]);
|
|
1322
|
+
return {
|
|
1323
|
+
scope,
|
|
1324
|
+
add,
|
|
1325
|
+
remove,
|
|
1326
|
+
removeWhere,
|
|
1327
|
+
removeScope
|
|
1328
|
+
};
|
|
1226
1329
|
}
|
|
1330
|
+
|
|
1331
|
+
//#endregion
|
|
1332
|
+
//#region usePostProcessStage/index.ts
|
|
1227
1333
|
function usePostProcessStage(data, options = {}) {
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
}
|
|
1245
|
-
const _isActive = toValue(isActive);
|
|
1246
|
-
if (_isActive) {
|
|
1247
|
-
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
1248
|
-
const _collection = collection ?? viewer.value.scene.postProcessStages;
|
|
1249
|
-
list.forEach((item) => item && _collection.add(item));
|
|
1250
|
-
onCleanup(() => {
|
|
1251
|
-
list.forEach((item) => item && _collection.remove(item));
|
|
1252
|
-
});
|
|
1253
|
-
}
|
|
1254
|
-
});
|
|
1255
|
-
return result;
|
|
1334
|
+
const { collection, isActive = true, evaluating } = options;
|
|
1335
|
+
const result = computedAsync(() => toPromiseValue(data), void 0, { evaluating });
|
|
1336
|
+
const viewer = useViewer();
|
|
1337
|
+
watchEffect((onCleanup) => {
|
|
1338
|
+
if (!viewer.value) return;
|
|
1339
|
+
const _isActive = toValue(isActive);
|
|
1340
|
+
if (_isActive) {
|
|
1341
|
+
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
1342
|
+
const _collection = collection ?? viewer.value.scene.postProcessStages;
|
|
1343
|
+
list.forEach((item) => item && _collection.add(item));
|
|
1344
|
+
onCleanup(() => {
|
|
1345
|
+
list.forEach((item) => item && _collection.remove(item));
|
|
1346
|
+
});
|
|
1347
|
+
}
|
|
1348
|
+
});
|
|
1349
|
+
return result;
|
|
1256
1350
|
}
|
|
1351
|
+
|
|
1352
|
+
//#endregion
|
|
1353
|
+
//#region usePostProcessStageScope/index.ts
|
|
1354
|
+
/**
|
|
1355
|
+
* Make `add` and `remove` operations of `PostProcessStageCollection` scoped,
|
|
1356
|
+
* automatically remove `PostProcessStage` instance when component is unmounted.
|
|
1357
|
+
*/
|
|
1257
1358
|
function usePostProcessStageScope(options = {}) {
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
remove,
|
|
1279
|
-
removeWhere,
|
|
1280
|
-
removeScope
|
|
1281
|
-
};
|
|
1359
|
+
const { collection: _collection } = options;
|
|
1360
|
+
const viewer = useViewer();
|
|
1361
|
+
const collection = computed(() => {
|
|
1362
|
+
return toValue(_collection) ?? viewer.value?.postProcessStages;
|
|
1363
|
+
});
|
|
1364
|
+
const addFn = (postProcessStage) => {
|
|
1365
|
+
if (!collection.value) throw new Error("collection is not defined");
|
|
1366
|
+
return collection.value.add(postProcessStage);
|
|
1367
|
+
};
|
|
1368
|
+
const removeFn = (postProcessStage) => {
|
|
1369
|
+
return !!collection.value?.remove(postProcessStage);
|
|
1370
|
+
};
|
|
1371
|
+
const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, []);
|
|
1372
|
+
return {
|
|
1373
|
+
scope,
|
|
1374
|
+
add,
|
|
1375
|
+
remove,
|
|
1376
|
+
removeWhere,
|
|
1377
|
+
removeScope
|
|
1378
|
+
};
|
|
1282
1379
|
}
|
|
1380
|
+
|
|
1381
|
+
//#endregion
|
|
1382
|
+
//#region usePrimitive/index.ts
|
|
1283
1383
|
function usePrimitive(data, options = {}) {
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
const _isActive = toValue(isActive);
|
|
1300
|
-
if (_isActive) {
|
|
1301
|
-
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
1302
|
-
const _collection = collection === "ground" ? (_a = viewer.value) == null ? void 0 : _a.scene.groundPrimitives : collection ?? ((_b = viewer.value) == null ? void 0 : _b.scene.primitives);
|
|
1303
|
-
list.forEach((item) => item && (_collection == null ? void 0 : _collection.add(item)));
|
|
1304
|
-
onCleanup(() => {
|
|
1305
|
-
!(_collection == null ? void 0 : _collection.isDestroyed()) && list.forEach((item) => item && (_collection == null ? void 0 : _collection.remove(item)));
|
|
1306
|
-
});
|
|
1307
|
-
}
|
|
1308
|
-
});
|
|
1309
|
-
return result;
|
|
1384
|
+
const { collection, isActive = true, evaluating } = options;
|
|
1385
|
+
const result = computedAsync(() => toPromiseValue(data), void 0, { evaluating });
|
|
1386
|
+
const viewer = useViewer();
|
|
1387
|
+
watchEffect((onCleanup) => {
|
|
1388
|
+
const _isActive = toValue(isActive);
|
|
1389
|
+
if (_isActive) {
|
|
1390
|
+
const list = Array.isArray(result.value) ? [...result.value] : [result.value];
|
|
1391
|
+
const _collection = collection === "ground" ? viewer.value?.scene.groundPrimitives : collection ?? viewer.value?.scene.primitives;
|
|
1392
|
+
list.forEach((item) => item && _collection?.add(item));
|
|
1393
|
+
onCleanup(() => {
|
|
1394
|
+
!_collection?.isDestroyed() && list.forEach((item) => item && _collection?.remove(item));
|
|
1395
|
+
});
|
|
1396
|
+
}
|
|
1397
|
+
});
|
|
1398
|
+
return result;
|
|
1310
1399
|
}
|
|
1400
|
+
|
|
1401
|
+
//#endregion
|
|
1402
|
+
//#region usePrimitiveScope/index.ts
|
|
1403
|
+
/**
|
|
1404
|
+
* Make `add` and `remove` operations of `PrimitiveCollection` scoped,
|
|
1405
|
+
* automatically remove `Primitive` instance when component is unmounted.
|
|
1406
|
+
*/
|
|
1311
1407
|
function usePrimitiveScope(options = {}) {
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
remove,
|
|
1333
|
-
removeWhere,
|
|
1334
|
-
removeScope
|
|
1335
|
-
};
|
|
1408
|
+
const { collection: _collection } = options;
|
|
1409
|
+
const viewer = useViewer();
|
|
1410
|
+
const collection = computed(() => {
|
|
1411
|
+
return toValue(_collection) ?? viewer.value?.scene.primitives;
|
|
1412
|
+
});
|
|
1413
|
+
const addFn = (primitive) => {
|
|
1414
|
+
if (!collection.value) throw new Error("collection is not defined");
|
|
1415
|
+
return collection.value.add(primitive);
|
|
1416
|
+
};
|
|
1417
|
+
const removeFn = (primitive) => {
|
|
1418
|
+
return !!collection.value?.remove(primitive);
|
|
1419
|
+
};
|
|
1420
|
+
const { scope, add, remove, removeWhere, removeScope } = useCollectionScope(addFn, removeFn, []);
|
|
1421
|
+
return {
|
|
1422
|
+
scope,
|
|
1423
|
+
add,
|
|
1424
|
+
remove,
|
|
1425
|
+
removeWhere,
|
|
1426
|
+
removeScope
|
|
1427
|
+
};
|
|
1336
1428
|
}
|
|
1429
|
+
|
|
1430
|
+
//#endregion
|
|
1431
|
+
//#region useScaleBar/index.ts
|
|
1337
1432
|
const distances = [
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1433
|
+
.01,
|
|
1434
|
+
.05,
|
|
1435
|
+
.1,
|
|
1436
|
+
.5,
|
|
1437
|
+
1,
|
|
1438
|
+
2,
|
|
1439
|
+
3,
|
|
1440
|
+
5,
|
|
1441
|
+
10,
|
|
1442
|
+
20,
|
|
1443
|
+
30,
|
|
1444
|
+
50,
|
|
1445
|
+
100,
|
|
1446
|
+
200,
|
|
1447
|
+
300,
|
|
1448
|
+
500,
|
|
1449
|
+
1e3,
|
|
1450
|
+
2e3,
|
|
1451
|
+
3e3,
|
|
1452
|
+
5e3,
|
|
1453
|
+
1e4,
|
|
1454
|
+
2e4,
|
|
1455
|
+
3e4,
|
|
1456
|
+
5e4,
|
|
1457
|
+
1e5,
|
|
1458
|
+
2e5,
|
|
1459
|
+
3e5,
|
|
1460
|
+
5e5,
|
|
1461
|
+
1e6,
|
|
1462
|
+
2e6,
|
|
1463
|
+
3e6,
|
|
1464
|
+
5e6,
|
|
1465
|
+
1e7,
|
|
1466
|
+
2e7,
|
|
1467
|
+
3e7,
|
|
1468
|
+
5e7
|
|
1374
1469
|
].reverse();
|
|
1470
|
+
/**
|
|
1471
|
+
* Reactive generation of scale bars
|
|
1472
|
+
*/
|
|
1375
1473
|
function useScaleBar(options = {}) {
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
}
|
|
1418
|
-
});
|
|
1419
|
-
const width = computed(() => {
|
|
1420
|
-
if (distance.value && pixelDistance.value) {
|
|
1421
|
-
const value = distance.value / pixelDistance.value;
|
|
1422
|
-
return value;
|
|
1423
|
-
}
|
|
1424
|
-
return 0;
|
|
1425
|
-
});
|
|
1426
|
-
const distanceText = computed(() => {
|
|
1427
|
-
if (distance.value) {
|
|
1428
|
-
return distance.value > 1e3 ? `${distance.value / 1e3 || 0}km` : `${distance.value || 0}m`;
|
|
1429
|
-
}
|
|
1430
|
-
});
|
|
1431
|
-
return {
|
|
1432
|
-
pixelDistance: readonly(pixelDistance),
|
|
1433
|
-
width,
|
|
1434
|
-
distance,
|
|
1435
|
-
distanceText
|
|
1436
|
-
};
|
|
1474
|
+
const { maxPixel = 80, delay = 8 } = options;
|
|
1475
|
+
const maxPixelRef = computed(() => toValue(maxPixel));
|
|
1476
|
+
const viewer = useViewer();
|
|
1477
|
+
const canvasSize = useElementSize(() => viewer.value?.canvas);
|
|
1478
|
+
const pixelDistance = ref();
|
|
1479
|
+
const setPixelDistance = async () => {
|
|
1480
|
+
await nextTick();
|
|
1481
|
+
const scene = viewer.value?.scene;
|
|
1482
|
+
if (!scene) return;
|
|
1483
|
+
const left = scene.camera.getPickRay(new Cartesian2(Math.floor(canvasSize.width.value / 2), canvasSize.height.value - 1));
|
|
1484
|
+
const right = scene.camera.getPickRay(new Cartesian2(Math.floor(1 + canvasSize.width.value / 2), canvasSize.height.value - 1));
|
|
1485
|
+
if (!left || !right) return;
|
|
1486
|
+
const leftPosition = scene.globe.pick(left, scene);
|
|
1487
|
+
const rightPosition = scene.globe.pick(right, scene);
|
|
1488
|
+
if (!leftPosition || !rightPosition) return;
|
|
1489
|
+
const leftCartographic = scene.globe.ellipsoid.cartesianToCartographic(leftPosition);
|
|
1490
|
+
const rightCartographic = scene.globe.ellipsoid.cartesianToCartographic(rightPosition);
|
|
1491
|
+
const geodesic = new EllipsoidGeodesic(leftCartographic, rightCartographic);
|
|
1492
|
+
pixelDistance.value = geodesic.surfaceDistance;
|
|
1493
|
+
};
|
|
1494
|
+
watchImmediate(viewer, () => setPixelDistance());
|
|
1495
|
+
useCesiumEventListener(() => viewer.value?.camera.changed, throttle(setPixelDistance, delay));
|
|
1496
|
+
const distance = computed(() => {
|
|
1497
|
+
if (pixelDistance.value) return distances.find((item) => pixelDistance.value * maxPixelRef.value > item);
|
|
1498
|
+
});
|
|
1499
|
+
const width = computed(() => {
|
|
1500
|
+
if (distance.value && pixelDistance.value) {
|
|
1501
|
+
const value = distance.value / pixelDistance.value;
|
|
1502
|
+
return value;
|
|
1503
|
+
}
|
|
1504
|
+
return 0;
|
|
1505
|
+
});
|
|
1506
|
+
const distanceText = computed(() => {
|
|
1507
|
+
if (distance.value) return distance.value > 1e3 ? `${distance.value / 1e3 || 0}km` : `${distance.value || 0}m`;
|
|
1508
|
+
});
|
|
1509
|
+
return {
|
|
1510
|
+
pixelDistance: readonly(pixelDistance),
|
|
1511
|
+
width,
|
|
1512
|
+
distance,
|
|
1513
|
+
distanceText
|
|
1514
|
+
};
|
|
1437
1515
|
}
|
|
1516
|
+
|
|
1517
|
+
//#endregion
|
|
1518
|
+
//#region useSceneDrillPick/index.ts
|
|
1519
|
+
/**
|
|
1520
|
+
* Uses the `scene.drillPick` function to perform screen point picking,
|
|
1521
|
+
* return a computed property containing the pick result, or undefined if no object is picked.
|
|
1522
|
+
*
|
|
1523
|
+
* @param windowPosition The screen coordinates of the pick point.
|
|
1524
|
+
*/
|
|
1438
1525
|
function useSceneDrillPick(windowPosition, options = {}) {
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
position.value,
|
|
1447
|
-
toValue(limit),
|
|
1448
|
-
toValue(width),
|
|
1449
|
-
toValue(height)
|
|
1450
|
-
);
|
|
1451
|
-
}
|
|
1452
|
-
});
|
|
1453
|
-
return pick;
|
|
1526
|
+
const { width = 3, height = 3, limit, throttled = 8, isActive = true } = options;
|
|
1527
|
+
const viewer = useViewer();
|
|
1528
|
+
const position = refThrottled(computed(() => toValue(windowPosition)), throttled, false, true);
|
|
1529
|
+
const pick = computed(() => {
|
|
1530
|
+
if (position.value && toValue(isActive)) return viewer.value?.scene.drillPick(position.value, toValue(limit), toValue(width), toValue(height));
|
|
1531
|
+
});
|
|
1532
|
+
return pick;
|
|
1454
1533
|
}
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
addMaterialCache,
|
|
1460
|
-
arrayDiff,
|
|
1461
|
-
assertError,
|
|
1462
|
-
canvasCoordToCartesian,
|
|
1463
|
-
cartesianToCanvasCoord,
|
|
1464
|
-
cesiumEquals,
|
|
1465
|
-
createCesiumAttribute,
|
|
1466
|
-
createCesiumProperty,
|
|
1467
|
-
createPropertyField,
|
|
1468
|
-
createViewer,
|
|
1469
|
-
degreesToDms,
|
|
1470
|
-
dmsDecode,
|
|
1471
|
-
dmsEncode,
|
|
1472
|
-
dmsToDegrees,
|
|
1473
|
-
getMaterialCache,
|
|
1474
|
-
isArray,
|
|
1475
|
-
isBase64,
|
|
1476
|
-
isBoolean,
|
|
1477
|
-
isCesiumConstant,
|
|
1478
|
-
isDef,
|
|
1479
|
-
isElement,
|
|
1480
|
-
isFunction,
|
|
1481
|
-
isNumber,
|
|
1482
|
-
isObject,
|
|
1483
|
-
isPromise,
|
|
1484
|
-
isProperty,
|
|
1485
|
-
isString,
|
|
1486
|
-
isWindow,
|
|
1487
|
-
pickHitGraphic,
|
|
1488
|
-
resolvePick,
|
|
1489
|
-
throttle,
|
|
1490
|
-
toCartesian3,
|
|
1491
|
-
toCartographic,
|
|
1492
|
-
toCoord,
|
|
1493
|
-
toPromiseValue,
|
|
1494
|
-
toProperty,
|
|
1495
|
-
toPropertyValue,
|
|
1496
|
-
tryRun,
|
|
1497
|
-
useCameraState,
|
|
1498
|
-
useCesiumEventListener,
|
|
1499
|
-
useCesiumFps,
|
|
1500
|
-
useCollectionScope,
|
|
1501
|
-
useDataSource,
|
|
1502
|
-
useDataSourceScope,
|
|
1503
|
-
useElementOverlay,
|
|
1504
|
-
useEntity,
|
|
1505
|
-
useEntityScope,
|
|
1506
|
-
useGraphicEvent,
|
|
1507
|
-
useImageryLayer,
|
|
1508
|
-
useImageryLayerScope,
|
|
1509
|
-
usePostProcessStage,
|
|
1510
|
-
usePostProcessStageScope,
|
|
1511
|
-
usePrimitive,
|
|
1512
|
-
usePrimitiveScope,
|
|
1513
|
-
useScaleBar,
|
|
1514
|
-
useSceneDrillPick,
|
|
1515
|
-
useScenePick,
|
|
1516
|
-
useScreenSpaceEventHandler,
|
|
1517
|
-
useViewer
|
|
1518
|
-
};
|
|
1519
|
-
//# sourceMappingURL=index.mjs.map
|
|
1534
|
+
|
|
1535
|
+
//#endregion
|
|
1536
|
+
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 };
|
|
1537
|
+
//# sourceMappingURL=index.mjs.map
|