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