gisviewer-vue3-arcgis 1.0.181 → 1.0.183
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/es/src/gis-map/gis-map.vue.d.ts +4 -1
- package/es/src/gis-map/index.d.ts +4 -1
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow.d.ts +0 -2
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow.mjs +8 -24
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.mjs +162 -156
- package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs +4 -4
- package/es/src/gis-map/utils/map-initializer.mjs +101 -99
- package/es/src/gis-map/utils/signal-control-area-controller/district-controller.d.ts +1 -1
- package/es/src/gis-map/utils/signal-control-area-controller/district-controller.mjs +12 -12
- package/es/src/gis-map/utils/signal-control-area-controller/index.d.ts +9 -1
- package/es/src/gis-map/utils/signal-control-area-controller/index.mjs +10 -2
- package/es/src/types/index.d.ts +1 -1
- package/lib/src/gis-map/gis-map.vue.d.ts +4 -1
- package/lib/src/gis-map/index.d.ts +4 -1
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow.d.ts +0 -2
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-layer.js +1 -1
- package/lib/src/gis-map/utils/map-initializer.js +1 -1
- package/lib/src/gis-map/utils/signal-control-area-controller/district-controller.d.ts +1 -1
- package/lib/src/gis-map/utils/signal-control-area-controller/district-controller.js +1 -1
- package/lib/src/gis-map/utils/signal-control-area-controller/index.d.ts +9 -1
- package/lib/src/gis-map/utils/signal-control-area-controller/index.js +1 -1
- package/lib/src/types/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import C from "@arcgis/core/Basemap";
|
|
2
2
|
import d from "@arcgis/core/config";
|
|
3
3
|
import * as k from "@arcgis/core/core/reactiveUtils";
|
|
4
|
-
import { Polygon as W, Polyline as z, Point as
|
|
4
|
+
import { Polygon as W, Polyline as z, Point as P } from "@arcgis/core/geometry";
|
|
5
5
|
import * as w from "@arcgis/core/geometry/support/webMercatorUtils";
|
|
6
6
|
import L from "@arcgis/core/layers/GeoJSONLayer";
|
|
7
7
|
import x from "@arcgis/core/layers/MapImageLayer";
|
|
@@ -13,8 +13,8 @@ import O from "@arcgis/core/views/SceneView";
|
|
|
13
13
|
import S from "@turf/destination";
|
|
14
14
|
import * as B from "@turf/helpers";
|
|
15
15
|
import N from "./custom-layer/custom-wmts-layer.mjs";
|
|
16
|
-
function
|
|
17
|
-
return h && (h.startsWith("http://") || h.startsWith("https://") ? h :
|
|
16
|
+
function T(h, t) {
|
|
17
|
+
return h && (h.startsWith("http://") || h.startsWith("https://") ? h : t + h);
|
|
18
18
|
}
|
|
19
19
|
class Z {
|
|
20
20
|
constructor() {
|
|
@@ -25,19 +25,21 @@ class Z {
|
|
|
25
25
|
* @param params 容器
|
|
26
26
|
* @returns view
|
|
27
27
|
*/
|
|
28
|
-
async initialize(
|
|
28
|
+
async initialize(t) {
|
|
29
29
|
var p, u, b, v;
|
|
30
|
-
this.mapConfig =
|
|
31
|
-
const { container:
|
|
30
|
+
this.mapConfig = t.mapConfig;
|
|
31
|
+
const { container: i, markerClickCallback: o, mapClickCallback: a } = t;
|
|
32
32
|
d.assetsPath = `${this.mapConfig.assetsRoot}/ArcgisAssets`, d.fontsUrl = `${this.mapConfig.assetsRoot}/fonts`, d.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
|
|
33
33
|
const n = new H();
|
|
34
|
-
if (((p = this.mapConfig) == null ? void 0 : p.mapOptions.mode.toLowerCase()) === "2d" ? this.view = new G({
|
|
34
|
+
if (((p = this.mapConfig) == null ? void 0 : p.mapOptions.mode.toLowerCase()) === "2d" ? (this.view = new G({
|
|
35
35
|
map: n,
|
|
36
|
-
container:
|
|
36
|
+
container: i,
|
|
37
37
|
...this.mapConfig.mapOptions
|
|
38
|
-
})
|
|
38
|
+
}), this.view.on("drag", (e) => {
|
|
39
|
+
e.button === 2 && e.stopPropagation();
|
|
40
|
+
})) : this.view = new O({
|
|
39
41
|
map: n,
|
|
40
|
-
container:
|
|
42
|
+
container: i,
|
|
41
43
|
environment: {
|
|
42
44
|
atmosphereEnabled: !0,
|
|
43
45
|
lighting: {
|
|
@@ -53,62 +55,62 @@ class Z {
|
|
|
53
55
|
}, this.view.popup.dockOptions = {
|
|
54
56
|
buttonEnabled: !1,
|
|
55
57
|
breakpoint: !1
|
|
56
|
-
}, this.view.on("click", async (
|
|
58
|
+
}, this.view.on("click", async (e) => {
|
|
57
59
|
var y, M;
|
|
58
60
|
if (a) {
|
|
59
|
-
let
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
let s = e.mapPoint;
|
|
62
|
+
s.spatialReference.isWebMercator && (s = w.webMercatorToGeographic(
|
|
63
|
+
s
|
|
62
64
|
)), a(
|
|
63
|
-
[
|
|
64
|
-
[
|
|
65
|
-
|
|
65
|
+
[s.x, s.y],
|
|
66
|
+
[e.screenPoint.x, e.screenPoint.y],
|
|
67
|
+
e
|
|
66
68
|
);
|
|
67
69
|
}
|
|
68
70
|
if (this.view.type === "3d") {
|
|
69
|
-
const
|
|
71
|
+
const s = this.view.camera;
|
|
70
72
|
if (this.view.spatialReference.isWebMercator) {
|
|
71
73
|
const m = w.webMercatorToGeographic(
|
|
72
|
-
|
|
74
|
+
s.position
|
|
73
75
|
), f = {
|
|
74
|
-
heading:
|
|
75
|
-
tilt:
|
|
76
|
+
heading: s.heading,
|
|
77
|
+
tilt: s.tilt,
|
|
76
78
|
position: m.toJSON()
|
|
77
79
|
};
|
|
78
80
|
console.log(f), (y = navigator.clipboard) == null || y.writeText(JSON.stringify(f));
|
|
79
81
|
} else
|
|
80
|
-
console.log(
|
|
82
|
+
console.log(s.toJSON());
|
|
81
83
|
console.log(this.view.zoom, this.view.scale);
|
|
82
84
|
} else {
|
|
83
|
-
let
|
|
84
|
-
this.view.spatialReference.isWebMercator && (
|
|
85
|
-
|
|
85
|
+
let s = this.view.center;
|
|
86
|
+
this.view.spatialReference.isWebMercator && (s = w.webMercatorToGeographic(
|
|
87
|
+
s
|
|
86
88
|
)), console.log({
|
|
87
|
-
center:
|
|
89
|
+
center: s.toJSON(),
|
|
88
90
|
zoom: this.view.zoom,
|
|
89
91
|
scale: this.view.scale
|
|
90
92
|
});
|
|
91
93
|
}
|
|
92
|
-
const r = (M = (await this.view.hitTest(
|
|
93
|
-
(
|
|
94
|
+
const r = (M = (await this.view.hitTest(e)).results) == null ? void 0 : M.filter(
|
|
95
|
+
(s) => s.type === "graphic"
|
|
94
96
|
);
|
|
95
|
-
r.length > 0 && r.forEach((
|
|
97
|
+
r.length > 0 && r.forEach((s) => {
|
|
96
98
|
var f;
|
|
97
|
-
const m =
|
|
98
|
-
(f = m.attributes) != null && f.type &&
|
|
99
|
+
const m = s.graphic;
|
|
100
|
+
(f = m.attributes) != null && f.type && o && o(
|
|
99
101
|
m.attributes.type,
|
|
100
102
|
m.attributes.id,
|
|
101
103
|
m.attributes,
|
|
102
|
-
|
|
104
|
+
e
|
|
103
105
|
);
|
|
104
106
|
});
|
|
105
|
-
}), (b = this.mapConfig) != null && b.baseLayers ? this.mapConfig.baseLayers.forEach((
|
|
106
|
-
const c =
|
|
107
|
-
switch (
|
|
107
|
+
}), (b = this.mapConfig) != null && b.baseLayers ? this.mapConfig.baseLayers.forEach((e) => {
|
|
108
|
+
const c = T(e.url, this.mapConfig.assetsRoot);
|
|
109
|
+
switch (e.type.toLowerCase()) {
|
|
108
110
|
case "webTile".toLowerCase(): {
|
|
109
111
|
const r = new R({
|
|
110
112
|
urlTemplate: c,
|
|
111
|
-
...
|
|
113
|
+
...e.options
|
|
112
114
|
});
|
|
113
115
|
n.add(r);
|
|
114
116
|
break;
|
|
@@ -116,7 +118,7 @@ class Z {
|
|
|
116
118
|
case "tile": {
|
|
117
119
|
const r = new I({
|
|
118
120
|
url: c,
|
|
119
|
-
...
|
|
121
|
+
...e.options
|
|
120
122
|
});
|
|
121
123
|
n.add(r);
|
|
122
124
|
break;
|
|
@@ -124,7 +126,7 @@ class Z {
|
|
|
124
126
|
case "customWMTS".toLowerCase(): {
|
|
125
127
|
const r = new N({
|
|
126
128
|
urlTemplate: c,
|
|
127
|
-
...
|
|
129
|
+
...e.options
|
|
128
130
|
});
|
|
129
131
|
n.add(r);
|
|
130
132
|
break;
|
|
@@ -132,13 +134,13 @@ class Z {
|
|
|
132
134
|
case "mapImage".toLowerCase(): {
|
|
133
135
|
const r = new x({
|
|
134
136
|
url: c,
|
|
135
|
-
...
|
|
137
|
+
...e.options
|
|
136
138
|
});
|
|
137
139
|
n.add(r);
|
|
138
140
|
break;
|
|
139
141
|
}
|
|
140
142
|
case "arcgis": {
|
|
141
|
-
const r = new C(
|
|
143
|
+
const r = new C(e.options);
|
|
142
144
|
n.basemap = r;
|
|
143
145
|
break;
|
|
144
146
|
}
|
|
@@ -149,92 +151,92 @@ class Z {
|
|
|
149
151
|
language: "zh-CN"
|
|
150
152
|
}
|
|
151
153
|
}), (v = this.mapConfig) != null && v.hdLayers) {
|
|
152
|
-
const
|
|
154
|
+
const e = this.mapConfig.hdLayers.map(
|
|
153
155
|
(c) => (
|
|
154
156
|
// 图层文件为GeoJson格式, renderer和symbol使用autocast配置
|
|
155
157
|
new L({
|
|
156
|
-
url:
|
|
158
|
+
url: T(c.url, this.mapConfig.assetsRoot),
|
|
157
159
|
...c.options,
|
|
158
160
|
title: c.options.id
|
|
159
161
|
})
|
|
160
162
|
)
|
|
161
163
|
);
|
|
162
|
-
n.addMany(
|
|
164
|
+
n.addMany(e);
|
|
163
165
|
}
|
|
164
166
|
this.view.ui.remove("attribution"), await this.view.when();
|
|
165
167
|
const g = this.mapConfig.camera;
|
|
166
168
|
let l;
|
|
167
169
|
if (this.view.type === "2d") {
|
|
168
|
-
let
|
|
169
|
-
this.view.spatialReference.isWebMercator && (
|
|
170
|
-
|
|
171
|
-
)), l = { center: [
|
|
170
|
+
let e = this.view.center;
|
|
171
|
+
this.view.spatialReference.isWebMercator && (e = w.webMercatorToGeographic(
|
|
172
|
+
e
|
|
173
|
+
)), l = { center: [e.x, e.y], zoom: this.view.zoom };
|
|
172
174
|
} else {
|
|
173
|
-
let
|
|
174
|
-
this.view.spatialReference.isWebMercator && (
|
|
175
|
-
|
|
175
|
+
let e = this.view.camera.position;
|
|
176
|
+
this.view.spatialReference.isWebMercator && (e = w.webMercatorToGeographic(
|
|
177
|
+
e
|
|
176
178
|
)), l = {
|
|
177
|
-
position:
|
|
179
|
+
position: e,
|
|
178
180
|
heading: this.view.camera.heading,
|
|
179
181
|
tilt: this.view.camera.tilt
|
|
180
182
|
};
|
|
181
183
|
}
|
|
182
184
|
return g ? g.home = l : this.mapConfig.camera = { home: l }, this.view;
|
|
183
185
|
}
|
|
184
|
-
setLayerVisibility(
|
|
185
|
-
const { id:
|
|
186
|
-
return a ? (a.visible =
|
|
186
|
+
setLayerVisibility(t) {
|
|
187
|
+
const { id: i, visible: o } = t, a = this.view.map.findLayerById(i);
|
|
188
|
+
return a ? (a.visible = o, { status: 0, message: "ok" }) : { status: -1, message: "未找到图层" };
|
|
187
189
|
}
|
|
188
190
|
/**
|
|
189
191
|
* 设置地图中心点
|
|
190
192
|
* @param params
|
|
191
193
|
* @returns
|
|
192
194
|
*/
|
|
193
|
-
async setMapCenter(
|
|
194
|
-
var
|
|
195
|
+
async setMapCenter(t) {
|
|
196
|
+
var i;
|
|
195
197
|
if (!this.view)
|
|
196
198
|
return { status: -1, message: "未初始化" };
|
|
197
|
-
if (
|
|
198
|
-
switch ((
|
|
199
|
+
if (t.center || t.target) {
|
|
200
|
+
switch ((i = t.target) == null ? void 0 : i.type) {
|
|
199
201
|
case "point":
|
|
200
|
-
|
|
202
|
+
t.target = new P(t.target);
|
|
201
203
|
break;
|
|
202
204
|
case "polyline":
|
|
203
|
-
|
|
205
|
+
t.target = new z(t.target);
|
|
204
206
|
break;
|
|
205
207
|
case "polygon":
|
|
206
|
-
|
|
208
|
+
t.target = new W(t.target);
|
|
207
209
|
break;
|
|
208
210
|
}
|
|
209
|
-
await this.view.goTo(
|
|
211
|
+
await this.view.goTo(t, { duration: (t.duration || 0) * 1e3 });
|
|
210
212
|
}
|
|
211
213
|
return { status: 0, message: "成功" };
|
|
212
214
|
}
|
|
213
215
|
/**
|
|
214
216
|
* 在一定的高度,以一定的角度去观察某个坐标
|
|
215
217
|
* */
|
|
216
|
-
async lookAt(
|
|
218
|
+
async lookAt(t) {
|
|
217
219
|
if (this.view.type === "2d")
|
|
218
220
|
return;
|
|
219
|
-
const
|
|
220
|
-
if (
|
|
221
|
+
const i = t.tilt || 0, o = t.heading || 0;
|
|
222
|
+
if (i === 0)
|
|
221
223
|
await this.view.goTo(
|
|
222
224
|
{
|
|
223
225
|
position: {
|
|
224
|
-
x:
|
|
225
|
-
y:
|
|
226
|
-
z:
|
|
226
|
+
x: t.center[0],
|
|
227
|
+
y: t.center[1],
|
|
228
|
+
z: t.height
|
|
227
229
|
},
|
|
228
|
-
heading:
|
|
230
|
+
heading: o,
|
|
229
231
|
tilt: 0
|
|
230
232
|
},
|
|
231
|
-
{ duration: (
|
|
233
|
+
{ duration: (t.duration || 2) * 1e3 }
|
|
232
234
|
);
|
|
233
235
|
else {
|
|
234
|
-
const a = Math.tan(
|
|
235
|
-
B.point(
|
|
236
|
+
const a = Math.tan(i * Math.PI / 180) * t.height, n = S(
|
|
237
|
+
B.point(t.center),
|
|
236
238
|
a,
|
|
237
|
-
|
|
239
|
+
o + 180,
|
|
238
240
|
{
|
|
239
241
|
units: "meters"
|
|
240
242
|
}
|
|
@@ -244,63 +246,63 @@ class Z {
|
|
|
244
246
|
position: {
|
|
245
247
|
x: n.geometry.coordinates[0],
|
|
246
248
|
y: n.geometry.coordinates[1],
|
|
247
|
-
z:
|
|
249
|
+
z: t.height
|
|
248
250
|
},
|
|
249
|
-
heading:
|
|
250
|
-
tilt:
|
|
251
|
+
heading: o,
|
|
252
|
+
tilt: i
|
|
251
253
|
},
|
|
252
|
-
{ duration: (
|
|
254
|
+
{ duration: (t.duration || 2) * 1e3 }
|
|
253
255
|
);
|
|
254
256
|
}
|
|
255
257
|
}
|
|
256
|
-
async setMapCamera(
|
|
258
|
+
async setMapCamera(t) {
|
|
257
259
|
if (!this.view)
|
|
258
260
|
return { status: -1, message: "未初始化" };
|
|
259
|
-
const { name:
|
|
261
|
+
const { name: i, duration: o = 0 } = t, { camera: a } = this.mapConfig;
|
|
260
262
|
if (!a)
|
|
261
263
|
return { status: -1, message: "未配置camera" };
|
|
262
|
-
const n = a[
|
|
263
|
-
return n ? (await this.view.goTo(n, { duration:
|
|
264
|
+
const n = a[i];
|
|
265
|
+
return n ? (await this.view.goTo(n, { duration: o * 1e3 }), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" };
|
|
264
266
|
}
|
|
265
267
|
/**
|
|
266
268
|
* 经纬度转像素坐标,在地图移动时回调
|
|
267
269
|
* */
|
|
268
|
-
requestCoordinateTransform(
|
|
269
|
-
let
|
|
270
|
+
requestCoordinateTransform(t, i) {
|
|
271
|
+
let o = 0;
|
|
270
272
|
const n = 1e3 / 30, g = k.watch(
|
|
271
273
|
() => this.view.center,
|
|
272
274
|
() => {
|
|
273
|
-
const l = this.transformPoints(
|
|
274
|
-
p -
|
|
275
|
+
const l = this.transformPoints(t), p = Date.now();
|
|
276
|
+
p - o > n && (i(l), o = p);
|
|
275
277
|
}
|
|
276
278
|
);
|
|
277
|
-
return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, g), { handle: this.handleIndex, points: this.transformPoints(
|
|
279
|
+
return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, g), { handle: this.handleIndex, points: this.transformPoints(t) };
|
|
278
280
|
}
|
|
279
|
-
transformPoints(
|
|
280
|
-
return
|
|
281
|
-
const
|
|
282
|
-
x:
|
|
283
|
-
y:
|
|
284
|
-
}), a = this.view.toScreen(
|
|
281
|
+
transformPoints(t) {
|
|
282
|
+
return t.map((i) => {
|
|
283
|
+
const o = new P({
|
|
284
|
+
x: i[0],
|
|
285
|
+
y: i[1]
|
|
286
|
+
}), a = this.view.toScreen(o);
|
|
285
287
|
return [a.x, a.y];
|
|
286
288
|
});
|
|
287
289
|
}
|
|
288
290
|
/**
|
|
289
291
|
* 停止坐标转换回调
|
|
290
292
|
* */
|
|
291
|
-
cancelCoordinateTransform(
|
|
292
|
-
const
|
|
293
|
-
|
|
293
|
+
cancelCoordinateTransform(t) {
|
|
294
|
+
const i = this.watchHandleMap.get(t);
|
|
295
|
+
i && (i.remove(), this.watchHandleMap.delete(t));
|
|
294
296
|
}
|
|
295
297
|
/**
|
|
296
298
|
* 设置地图zoom范围
|
|
297
299
|
* */
|
|
298
|
-
setMapZoomRange(
|
|
299
|
-
const { min:
|
|
300
|
-
!
|
|
300
|
+
setMapZoomRange(t) {
|
|
301
|
+
const { min: i, max: o } = t;
|
|
302
|
+
!i && !o || (this.zoomWatchHandle && this.zoomWatchHandle.remove(), this.zoomWatchHandle = k.watch(
|
|
301
303
|
() => this.view.zoom,
|
|
302
304
|
(a) => {
|
|
303
|
-
|
|
305
|
+
i && a <= i && (this.view.zoom = i), o && a >= o && (this.view.zoom = o);
|
|
304
306
|
}
|
|
305
307
|
));
|
|
306
308
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import e from "../common-utils.mjs";
|
|
2
|
-
class
|
|
3
|
-
constructor(t) {
|
|
4
|
-
this.parentName = "", this.crosses = [], this.subDistricts = [], this.
|
|
2
|
+
class r {
|
|
3
|
+
constructor(t, i) {
|
|
4
|
+
this.parentName = "", this.crosses = [], this.subDistricts = [], this.crossCount = 0, this.subDistrictCount = 0, this.id = t.id, this.name = t.name, this.parentId = t.parentId, this.areaColor = i === "alarm" ? [255, 0, 0] : [61, 139, 249];
|
|
5
5
|
for (const s of t.children)
|
|
6
6
|
if (s.children) {
|
|
7
|
-
const
|
|
8
|
-
|
|
7
|
+
const o = new r(s, i);
|
|
8
|
+
o.parentName = this.name, this.subDistricts.push(o), this.subDistrictCount++, this.crossCount += o.crossCount;
|
|
9
9
|
} else if (e.isCoordinateValid(s)) {
|
|
10
|
-
const
|
|
10
|
+
const o = {
|
|
11
11
|
id: s.id,
|
|
12
12
|
name: s.name,
|
|
13
13
|
parentId: s.parentId,
|
|
@@ -16,18 +16,18 @@ class o {
|
|
|
16
16
|
signalId: s.signalId,
|
|
17
17
|
isKey: s.isKey === 1
|
|
18
18
|
};
|
|
19
|
-
this.crosses.push(
|
|
19
|
+
this.crosses.push(o), this.crossCount++;
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
getAllCrossCoordinates() {
|
|
23
23
|
const t = [];
|
|
24
|
-
for (const
|
|
25
|
-
t.push([
|
|
26
|
-
for (const
|
|
27
|
-
t.push(...
|
|
24
|
+
for (const i of this.crosses)
|
|
25
|
+
t.push([i.longitude, i.latitude]);
|
|
26
|
+
for (const i of this.subDistricts)
|
|
27
|
+
t.push(...i.getAllCrossCoordinates());
|
|
28
28
|
return t;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
export {
|
|
32
|
-
|
|
32
|
+
r as default
|
|
33
33
|
};
|
|
@@ -10,7 +10,15 @@ export default class SignalControlAreaController {
|
|
|
10
10
|
private readonly crossScale;
|
|
11
11
|
private openDriveServer;
|
|
12
12
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* 显示信控区控与子区
|
|
15
|
+
* @param params
|
|
16
|
+
* @returns
|
|
17
|
+
*/
|
|
18
|
+
showSignalControlArea(params: {
|
|
19
|
+
areaList: any[];
|
|
20
|
+
style?: string;
|
|
21
|
+
}): IResult;
|
|
14
22
|
clearSignalControlArea(): IResult;
|
|
15
23
|
locateSignalControlArea(params: {
|
|
16
24
|
id: string;
|
|
@@ -34,10 +34,18 @@ class N {
|
|
|
34
34
|
this.highlightLayer
|
|
35
35
|
]);
|
|
36
36
|
}
|
|
37
|
+
/**
|
|
38
|
+
* 显示信控区控与子区
|
|
39
|
+
* @param params
|
|
40
|
+
* @returns
|
|
41
|
+
*/
|
|
37
42
|
showSignalControlArea(e) {
|
|
38
43
|
this.districtControllerLayer.removeAll(), this.subDistrictControllerLayer.removeAll(), this.crossLayer.removeAll(), this.highlightLayer.removeAll(), this.subDistrictControllerLayer.visible = !1, this.crossLayer.visible = !1, this.districtControllerLayer.visible = !0;
|
|
39
|
-
for (const t of e) {
|
|
40
|
-
const r = new v(
|
|
44
|
+
for (const t of e.areaList) {
|
|
45
|
+
const r = new v(
|
|
46
|
+
t,
|
|
47
|
+
e.style || ""
|
|
48
|
+
);
|
|
41
49
|
this.drawArea(r, !0);
|
|
42
50
|
}
|
|
43
51
|
return this.scaleWatcher = g.watch(
|
package/es/src/types/index.d.ts
CHANGED
|
@@ -115,7 +115,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
|
|
|
115
115
|
status: number;
|
|
116
116
|
message: string;
|
|
117
117
|
}>;
|
|
118
|
-
showSignalControlArea: (params:
|
|
118
|
+
showSignalControlArea: (params: {
|
|
119
|
+
areaList: any[];
|
|
120
|
+
style?: string;
|
|
121
|
+
}) => import("../types").IResult;
|
|
119
122
|
clearSignalControlArea: () => void;
|
|
120
123
|
locateSignalControlArea: (params: {
|
|
121
124
|
id: string;
|
|
@@ -104,7 +104,10 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
|
|
|
104
104
|
status: number;
|
|
105
105
|
message: string;
|
|
106
106
|
}>;
|
|
107
|
-
showSignalControlArea: (params:
|
|
107
|
+
showSignalControlArea: (params: {
|
|
108
|
+
areaList: any[];
|
|
109
|
+
style?: string | undefined;
|
|
110
|
+
}) => import("../types").IResult;
|
|
108
111
|
clearSignalControlArea: () => void;
|
|
109
112
|
locateSignalControlArea: (params: {
|
|
110
113
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("vue"),y=require("../../stores/index.js");function w(
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("vue"),y=require("../../stores/index.js");function w(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const f=w(d);class m{constructor(e){this.currentPhaseMap=new Map,this.countdownCanvasMap=new Map,this.lastDataTime=0,this.isDeletingCanvas=!1,this.canvasWidth=80,this.canvasHeight=40,this.view=(e.type==="2d",e);const t=y.default.useAppDataStore;this.mapConfig=g.toRaw(t.mapConfig)}async initializeLayer(){try{await this.initializePlateBackground()}catch(e){console.log("倒计时背景图片加载失败",e)}if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const e=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,s=(await(await fetch(e)).json()).features.map((i,n)=>({geometry:{type:"polyline",paths:[i.geometry.coordinates]},attributes:{ObjectID:n+1,id:i.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:s,geometryType:"polyline",objectIdField:"ObjectID",outFields:["*"],fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"color",alias:"color",type:"string"}],renderer:{type:"unique-value",field:"color",defaultSymbol:{type:"simple-line",color:"lightblue",width:"2px",style:"none"},uniqueValueInfos:[{value:"green",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[19,255,69,.8]},width:1,height:.5}]}},{value:"red",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[254,5,9,.8]},width:1,height:.5}]}},{value:"yellow",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[255,215,0,.8]},width:1,height:.5}]}}]}}),this.view.map.add(this.phaseLineLayer)}}async initializePlateBackground(){return new Promise((e,t)=>{const a=new Image;a.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,a.onload=()=>{this.plateBackground=a,e()},a.onerror=s=>{t(s)}})}async handleSignalData(e){const{crossId:t,lat:a,lon:s,rtStage:i,channelsConfig:n}=e;await this.updateCountdown(t,a,s,i),!(!this.phaseLineLayer||!n)&&((!this.currentPhaseMap.has(t)||this.currentPhaseMap.get(t)!==i.stagePhase)&&await this.updatePhaseLine(t,i.channelsConfig,n),this.currentPhaseMap.set(t,i.stagePhase))}clearSignal(){this.phaseLineLayer&&(this.phaseLineLayer.visible=!1),this.countdownWatchHandel&&(this.countdownWatchHandel.remove(),this.countdownWatchHandel=void 0),this.countdownCanvasMap.forEach(e=>{this.view.container.removeChild(e.backgroundCanvas),this.view.container.removeChild(e.countdownCanvas)}),this.countdownCanvasMap.clear()}async updateCountdown(e,t,a,s){if(this.isDeletingCanvas)return;const i=this.countdownCanvasMap.get(e);if(i)this.drawCountdownText(i.countdownCanvas,s);else try{const n=new u.Point({longitude:a,latitude:t,z:10}),o=this.view.toScreen(n),l=this.createCountdownCanvas();if(!l)return;const h=l[0],c=l[1];h.style.left=o.x+"px",h.style.top=o.y+"px",c.style.left=o.x+"px",c.style.top=o.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:h,countdownCanvas:c,mapPoint:n}),this.drawCountdownText(c,s)}catch(n){console.log("倒计时canvas创建失败",e,n)}this.countdownWatchHandel||(this.countdownWatchHandel=f.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(n=>{const o=this.view.toScreen(n.mapPoint);n.backgroundCanvas.style.left=o.x+"px",n.backgroundCanvas.style.top=o.y+"px",n.countdownCanvas.style.left=o.x+"px",n.countdownCanvas.style.top=o.y+"px"})}))}drawCountdownText(e,t){const a=e.getContext("2d");a.clearRect(0,0,e.width,e.height),a.font="24px Digital",a.textBaseline="middle",a.textAlign="center",a.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",a.fillText(t.stageRemainingTime.toFixed(0),e.width/2,e.height/2)}async updatePhaseLine(e,t,a){const s=this.phaseLineLayer.source.filter(i=>i.getAttribute("id").includes(e));s.forEach(i=>{const n=i.getAttribute("id");this.isLaneInChannels(n,t)?i.setAttribute("color","green"):this.isLaneInChannels(n,a)?i.setAttribute("color","red"):i.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:s})}isLaneInChannels(e,t){const a=e.split("+"),s=a[1],i=a[2];for(let n=0;n<t.length;n++)for(let o=0;o<t[n].laneSnList.length;o++){const l=t[n].laneSnList[o].toFixed(0);if(s===l[0]&&i===l[1])return!0}return!1}createCountdownCanvas(){const e=document.createElement("canvas");e.width=this.canvasWidth,e.height=this.canvasHeight,e.style.position="absolute",e.style.transform="translate(-50%, -50%)";const t=e.getContext("2d");this.plateBackground?t.drawImage(this.plateBackground,0,0,this.canvasWidth,this.canvasHeight):(t.strokeStyle="rgba(0, 255, 0, 1)",t.lineWidth=1,t.strokeRect(0,0,this.canvasWidth,this.canvasHeight),t.fillStyle="rgba(0, 0, 0, 1)",t.fillRect(0,0,this.canvasWidth,this.canvasHeight)),this.view.container.appendChild(e);const a=document.createElement("canvas");return a.width=this.canvasWidth-10,a.height=this.canvasHeight-10,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",this.view.container.appendChild(a),[e,a]}}exports.default=m;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("@arcgis/core/core/promiseUtils.js"),S=require("@arcgis/core/core/reactiveUtils.js"),G=require("@arcgis/core/geometry/SpatialReference"),C=require("@arcgis/core/views/3d/externalRenderers"),V=require("three"),f=require("three/examples/jsm/loaders/GLTFLoader"),B=require("three/examples/jsm/loaders/MTLLoader"),M=require("three/examples/jsm/loaders/OBJLoader"),L=require("vue"),m=require("../../../types/index.js"),x=require("../../stores/index.js");function b(u){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(e,s,t.get?t:{enumerable:!0,get:()=>u[s]})}}return e.default=u,Object.freeze(e)}const R=b(T),I=b(S),P=b(C),o=b(V);class j{constructor(e){this.cameraHeightThreshold=1e3,this.roughness=.2,this.metalness=.8,this.defaultMaterial=new o.MeshPhongMaterial({color:16777215}),this.materialMap=new Map([[1,this.createCarMaterial(16777215)],[2,this.createCarMaterial(7833753)],[3,this.createCarMaterial(16766720)],[4,this.createCarMaterial(16758465)],[5,this.createCarMaterial(14423100)],[6,this.createCarMaterial(3329330)],[7,this.createCarMaterial(2003183)],[8,this.createCarMaterial(16032864)],[9,this.createCarMaterial(2105376)],[10,this.createCarMaterial(9662683)],[99,this.createCarMaterial(6908265)]]),this.isInitialized=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.isPaused=!1,this.currentSpriteContent=m.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.tabVisible=!0,this.updateModel=!1,this.appDataStore=x.default.useAppDataStore,this.logTable=[["ptcId","plateno","timestamp","localTimestamp","speed","longitude","latitude","ptcType","vehicleType","vehicleColor","plateColor","heading","fixAngle","roadLayer","step","receiveTimestamp","queueLength","status"]],this.view=e;const s=L.toRaw(this.appDataStore.mapConfig);this.assetsRoot=s.assetsRoot,document.addEventListener("visibilitychange",()=>{this.clearVehicles(),this.tabVisible=!document.hidden},!1),I.watch(()=>this.view.camera.position.z,(t,i)=>{(i<=this.cameraHeightThreshold&&t>this.cameraHeightThreshold||i>this.cameraHeightThreshold&&t<=this.cameraHeightThreshold)&&(this.updateModel=!0)})}createCarMaterial(e){return new o.MeshPhongMaterial({color:e})}getLog(){return this.logTable}async init(){await R.eachAlways([new Promise(e=>{new f.GLTFLoader().load(`${this.assetsRoot}/3DModels/car.glb`,t=>{const i=t.scene,l=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.carModel=new o.Object3D,this.carModel.rotation.x=o.MathUtils.degToRad(90),this.carModel.add(i),i.position.set(0,0,l.z/2),e()})}),new Promise(e=>{new f.GLTFLoader().load(`${this.assetsRoot}/3DModels/van.glb`,t=>{const i=t.scene,l=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.vanModel=new o.Object3D,this.vanModel.rotation.x=o.MathUtils.degToRad(90),this.vanModel.add(i),i.position.set(0,0,l.z/2),e()})}),new Promise(e=>{new f.GLTFLoader().load(`${this.assetsRoot}/3DModels/truck.glb`,t=>{const i=t.scene;i.scale.set(1.2,1,1.5);const l=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.truckModel=new o.Object3D,this.truckModel.rotation.x=o.MathUtils.degToRad(90),this.truckModel.add(i),i.position.set(0,0,l.z/2),e()})}),new Promise(e=>{new f.GLTFLoader().load(`${this.assetsRoot}/3DModels/bus.glb`,t=>{const i=t.scene,l=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.busModel=new o.Object3D,this.busModel.rotation.x=o.MathUtils.degToRad(90),this.busModel.add(i),i.position.set(0,0,l.z/2),e()})}),new Promise(e=>{new B.MTLLoader().load(`${this.assetsRoot}/3DModels/bicycle.mtl`,t=>{t.preload();const i=new M.OBJLoader;i.setMaterials(t),i.load(`${this.assetsRoot}/3DModels/bicycle.obj`,a=>{this.bicycleModel=a,this.bicycleModel.rotation.x=o.MathUtils.degToRad(90),e()})})}),new Promise(e=>{new M.OBJLoader().load(`${this.assetsRoot}/3DModels/male.obj`,t=>{t.scale.set(.01,.01,.01),this.passengerModel=t,this.passengerModel.rotation.x=o.MathUtils.degToRad(90),this.passengerModel.rotation.y=o.MathUtils.degToRad(180),e()})}),new Promise(e=>{this.bluePlateBG=new Image,this.bluePlateBG.src=`${this.assetsRoot}/Images/PlateBG/blue.png`,this.bluePlateBG.onload=()=>{e()}}),new Promise(e=>{this.yellowPlateBG=new Image,this.yellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/yellow.png`,this.yellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.whitePlateBG=new Image,this.whitePlateBG.src=`${this.assetsRoot}/Images/PlateBG/white.png`,this.whitePlateBG.onload=()=>{e()}}),new Promise(e=>{this.blackPlateBG=new Image,this.blackPlateBG.src=`${this.assetsRoot}/Images/PlateBG/black.png`,this.blackPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoYellowPlateBG=new Image,this.neoYellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_yellow.png`,this.neoYellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoGreenPlateBG=new Image,this.neoGreenPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_green.png`,this.neoGreenPlateBG.onload=()=>{e()}}),new Promise(e=>{this.greyPlateBG=new Image,this.greyPlateBG.src=`${this.assetsRoot}/Images/PlateBG/grey.png`,this.greyPlateBG.onload=()=>{e()}})]),this.isInitialized=!0}setInterpolate(e){this.clearVehicles(),this.tabVisible=e}async setup(e){this.context=e,this.renderer=new o.WebGLRenderer({context:e.gl,premultipliedAlpha:!0,logarithmicDepthBuffer:!0,antialias:!0,powerPreference:"high-performance"}),this.renderer.shadowMap.enabled=!0,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setViewport(0,0,this.view.width,this.view.height),this.renderer.autoClearDepth=!1,this.renderer.autoClearStencil=!1,this.renderer.autoClearColor=!1;const s=this.renderer.setRenderTarget.bind(this.renderer);this.renderer.setRenderTarget=i=>{s(i),i==null&&e.bindRenderTarget()},this.scene=new o.Scene;const{camera:t}=e;this.camera=new o.PerspectiveCamera(t.fovY,t.aspect,.1,1e5),this.ambient=new o.AmbientLight(16777215,2),this.scene.add(this.ambient),this.sun=new o.DirectionalLight(16777215,2),this.scene.add(this.sun),e.resetWebGLState()}async render(e){var i;const s=e.camera;if(this.camera.position.set(s.eye[0],s.eye[1],s.eye[2]),this.camera.up.set(s.up[0],s.up[1],s.up[2]),this.camera.lookAt(new o.Vector3(s.center[0],s.center[1],s.center[2])),this.camera.projectionMatrix.fromArray(s.projectionMatrix),!this.isPaused&&this.tabVisible)for(const a of this.vehicleObjectMap.keys()){const l=(i=this.vehicleObjectMap.get(a))==null?void 0:i.model;if(!l)continue;const r=this.computeVehiclePosition(a);if(r){const d=this.toRenderCoordinates(r);l.position.set(d[0],d[1],d[2]),l.rotation.y=o.MathUtils.degToRad(-r[3])}}const t=e.sunLight;this.sun.position.set(t.direction[0],t.direction[1],t.direction[2]),this.sun.intensity=t.diffuse.intensity,this.sun.color=new o.Color(t.diffuse.color[0],t.diffuse.color[1],t.diffuse.color[2]),this.ambient.intensity=t.ambient.intensity,this.ambient.color=new o.Color(t.ambient.color[0],t.ambient.color[1],t.ambient.color[2]),this.renderer.resetState(),e.bindRenderTarget(),this.renderer.render(this.scene,this.camera),P.requestRender(this.view),e.resetWebGLState()}async addVehicles(e){if(this.isPaused||!this.isInitialized||!this.tabVisible)return;const s=Date.now();for(const t of e){this.appDataStore.saveTrackLog&&this.logTable.push([t.ptcId,t.plateNo,t.timestamp,t.localTimestamp,t.speed,t.x,t.y,t.ptcType,t.vehicleType,t.vehicleColor,t.plateColor,t.heading,t.fixAngle,t.roadLayer,t.step,s,0,0]);const{vehicleId:i,localTimestamp:a}=t,l=Number(t.x),r=Number(t.y),d=Number(t.heading);this.historyPositionMap.set(i,[{pos:[l,r,0],heading:d,time:a}]);const h=this.getVehicleModel(t);h.name=i,h.visible=!1;try{const n=await this.createPlateSprite(t);n&&(h.add(n),n.position.set(0,5,-4))}catch(n){console.log("createPlateSprite error:",n)}this.scene.add(h),this.vehicleObjectMap.set(i,{model:h,data:t,waitForDelete:!1,isMoving:!1})}}async updateVehicles(e){if(this.isPaused||!this.isInitialized||!this.tabVisible)return;const s=[],t=Date.now();for(const i of e){const{vehicleId:a,localTimestamp:l}=i,r=Number(i.x),d=Number(i.y);let h=Number(i.heading);const n=this.vehicleObjectMap.get(a),p=this.historyPositionMap.get(a);if(!n||!p)s.push(i);else{if(this.appDataStore.saveTrackLog&&this.logTable.push([i.ptcId,i.plateNo,i.timestamp,i.localTimestamp,i.speed,i.x,i.y,i.ptcType,i.vehicleType,i.vehicleColor,i.plateColor,i.heading,i.fixAngle,i.roadLayer,i.step,t,p.length,1]),this.updateModel||n.data.vehicleColor!==i.vehicleColor||n.data.vehicleType!==i.vehicleType){this.scene.remove(n.model),this.disposeModel(n.model),n.model=this.getVehicleModel(i),n.model.visible=!0;const c=await this.createPlateSprite(i);c&&(n.model.add(c),c.position.set(0,5,-4)),this.scene.add(n.model)}if(n.data.showName!==i.showName||n.data.plateColor!==i.plateColor){const c=n.model.getObjectByName("VehiclePlate");c&&(n.model.remove(c),this.disposeModel(c));const g=await this.createPlateSprite(i);g&&(n.model.add(g),g.position.set(0,5,-4))}if(n.data=i,this.tabVisible){const c=p[p.length-1];Math.abs(h-c.heading)>=180&&(h>c.heading?c.heading+=360:h+=360),p.push({pos:[r,d,0],heading:h,time:l})}else{this.historyPositionMap.set(a,[{pos:[r,d,0],heading:h,time:l}]);const c=this.toRenderCoordinates([r,d,0]);n.model.position.set(c[0],c[1],c[2]),n.model.rotation.y=o.MathUtils.degToRad(-h)}}}await this.addVehicles(s),this.updateModel=!1}toRenderCoordinates(e){const s=[0,0,0];return P.toRenderCoordinates(this.view,e,0,G.WGS84,s,0,1),s}deleteVehicles(e){if(this.isPaused)return;const s=Date.now();e.forEach(t=>{if(this.appDataStore.saveTrackLog){const a=this.historyPositionMap.get(t);this.logTable.push([t,"","","","","","","","","","","","","","",s,a?a.length:0,2])}const i=this.vehicleObjectMap.get(t);i&&(this.tabVisible?i.isMoving?i.waitForDelete=!0:this.deleteVehicle(i):this.deleteVehicle(i))})}deleteVehicle(e){e.model.visible=!1,this.disposeModel(e.model),this.scene.remove(e.model);const s=e.data.vehicleId;this.vehicleObjectMap.delete(s),this.historyPositionMap.delete(s)}async toggleTrafficInfo(e){e.name==="vehiclePlate"&&(e.visible===!0&&this.currentSpriteContent===m.EVehiclePlateState.None?await this.updatePanelContent(m.EVehiclePlateState.PlateNumber):await this.updatePanelContent(e.visible?this.currentSpriteContent:m.EVehiclePlateState.None))}togglePause(e){this.isPaused=e}clearVehicles(){for(const e of this.vehicleObjectMap.values())this.disposeModel(e.model),this.scene.remove(e.model);this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}async updatePanelContent(e){this.currentSpriteContent=e;for(const s of this.vehicleObjectMap.values()){const t=s.model.getObjectByName("VehiclePlate");if(t&&(s.model.remove(t),this.disposeModel(t)),e!==m.EVehiclePlateState.None){const i=await this.createPlateSprite(s.data);i&&(s.model.add(i),i.position.set(0,5,-4))}}}toggleGroundVehicle(e){this.showGroundVehicle=e}toggleElevatedVehicle(e){this.showElevatedVehicle=e}disposeModel(e){e.traverse(s=>{if(s instanceof o.Mesh)try{s.geometry.dispose(),s.material.dispose()}catch{}})}computeVehiclePosition(e){const s=this.historyPositionMap.get(e),t=this.vehicleObjectMap.get(e);if(!t||!s||!t.isMoving&&s.length<=2)return;const i=Date.now();t.isMoving=!0,t.data.roadLayer==="1"?t.model.visible=this.showGroundVehicle:t.model.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=i,t.segmentTotalTime=s[1].time-s[0].time);const a=i-t.segmentStartTime,l=Math.min(a/t.segmentTotalTime,1);if(l===1)if(s.shift(),s.length===1){t.waitForDelete===!0?this.deleteVehicle(t):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0,t.model.visible=!1,t.isMoving=!1,console.log("hide vehicle",e));return}else{t.segmentStartTime=Date.now();const r=a-t.segmentTotalTime;return t.segmentTotalTime=s[1].time-s[0].time-r,(s[1].heading>=270&&s[0].heading<=90||s[1].heading<=90&&s[0].heading>=270)&&(s[1].heading>s[0].heading?s[0].heading+=360:s[1].heading+=360),s[0].pos.concat(s[0].heading)}else if(s.length>=2){const r=s[0].pos[0]+(s[1].pos[0]-s[0].pos[0])*l,d=s[0].pos[1]+(s[1].pos[1]-s[0].pos[1])*l,h=s[0].heading+(s[1].heading-s[0].heading)*l;return[r,d,0,h]}else return}getVehicleModel(e){if(this.view.camera.position.z>=this.cameraHeightThreshold){const s=new o.SphereGeometry(5,32,32),t=new o.MeshPhysicalMaterial({color:325253,emissive:0,roughness:this.roughness,metalness:this.metalness});return new o.Mesh(s,t)}else{let s;if(e.ptcType===2)s=this.bicycleModel.clone();else if(e.ptcType===3)s=this.passengerModel.clone();else{switch(e.vehicleType){case 10:s=this.carModel.clone();break;case 20:s=this.vanModel.clone();break;case 25:s=this.truckModel.clone();break;case 50:s=this.busModel.clone();break;default:s=this.carModel.clone();break}const t=this.materialMap.get(e.vehicleColor)||this.defaultMaterial;let i=!1;s.traverse(a=>{!i&&a instanceof o.Mesh&&(a.material=t,i=!0)})}return s}}createCanvas(e,s,t){const i=document.createElement("canvas"),a=e.width,l=e.height;i.width=a,i.height=l;const r=i.getContext("2d");if(!r){console.log("canvas创建失败");return}return r.fillStyle="rgba(0,0,0,0.0)",r.fillRect(0,0,a,l),r.drawImage(e,0,0,a,l),r.beginPath(),r.translate(a/2,l/2),r.fillStyle=t,r.font="bold 32px 宋体",r.textBaseline="middle",r.textAlign="center",r.fillText(s,0,0),i}createPlateSprite(e){return new Promise((s,t)=>{var h,n;const i=!e.plateNo||e.plateNo==="0"||e.plateNo==="000000";if(this.currentSpriteContent===m.EVehiclePlateState.None||this.currentSpriteContent===m.EVehiclePlateState.PlateNumber&&i){s(void 0);return}let a=new Image,l="",r="";if(this.currentSpriteContent===m.EVehiclePlateState.PlateNumber||this.currentSpriteContent===m.EVehiclePlateState.Mix)if(i)a=this.greyPlateBG,l=e.ptcId,r="#ffffff";else switch(l=((h=e.showName)==null?void 0:h.substring(0,2))+"•"+((n=e.showName)==null?void 0:n.substring(2)),e.plateColor){case 1:a=this.bluePlateBG,r="#ffffff";break;case 2:a=this.yellowPlateBG,r="#000000";break;case 3:a=this.whitePlateBG,r="#000000";break;case 4:a=this.blackPlateBG,r="#ffffff";break;case 5:a=this.neoYellowPlateBG,r="#000000";break;case 6:a=this.neoGreenPlateBG,r="#000000";break;default:a=this.greyPlateBG,l=e.plateNo,r="#ffffff";break}else this.currentSpriteContent===m.EVehiclePlateState.Id&&(a=this.greyPlateBG,l=e.ptcId,r="#ffffff");const d=this.createCanvas(a,l,r);if(d){const p=new o.CanvasTexture(d),c=new o.SpriteMaterial({map:p,transparent:!1}),g=new o.Sprite(c),w=.05,v=d.width*w,y=d.height*w;g.scale.set(v,y,1),g.name="VehiclePlate",s(g)}else{t("canvas创建失败");return}a.onerror=p=>{console.log(`号牌背景加载失败: ${a.src}`,p),t(p)}})}}exports.default=j;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("@arcgis/core/core/promiseUtils.js"),S=require("@arcgis/core/core/reactiveUtils.js"),C=require("@arcgis/core/geometry/SpatialReference"),G=require("@arcgis/core/views/3d/externalRenderers"),L=require("three"),V=require("three/examples/jsm/loaders/DRACOLoader"),f=require("three/examples/jsm/loaders/GLTFLoader"),B=require("three/examples/jsm/loaders/MTLLoader"),M=require("three/examples/jsm/loaders/OBJLoader"),R=require("vue"),m=require("../../../types/index.js"),x=require("../../stores/index.js");function b(u){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(e,s,t.get?t:{enumerable:!0,get:()=>u[s]})}}return e.default=u,Object.freeze(e)}const D=b(T),I=b(S),P=b(G),o=b(L);class O{constructor(e){this.cameraHeightThreshold=1e3,this.roughness=.2,this.metalness=.8,this.defaultMaterial=new o.MeshPhongMaterial({color:16777215}),this.materialMap=new Map([[1,this.createCarMaterial(16777215)],[2,this.createCarMaterial(7833753)],[3,this.createCarMaterial(16766720)],[4,this.createCarMaterial(16758465)],[5,this.createCarMaterial(14423100)],[6,this.createCarMaterial(3329330)],[7,this.createCarMaterial(2003183)],[8,this.createCarMaterial(16032864)],[9,this.createCarMaterial(2105376)],[10,this.createCarMaterial(9662683)],[99,this.createCarMaterial(6908265)]]),this.isInitialized=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.isPaused=!1,this.currentSpriteContent=m.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.tabVisible=!0,this.updateModel=!1,this.appDataStore=x.default.useAppDataStore,this.logTable=[["ptcId","plateno","timestamp","localTimestamp","speed","longitude","latitude","ptcType","vehicleType","vehicleColor","plateColor","heading","fixAngle","roadLayer","step","receiveTimestamp","queueLength","status"]],this.view=e;const s=R.toRaw(this.appDataStore.mapConfig);this.assetsRoot=s.assetsRoot,document.addEventListener("visibilitychange",()=>{this.clearVehicles(),this.tabVisible=!document.hidden},!1),I.watch(()=>this.view.camera.position.z,(t,i)=>{(i<=this.cameraHeightThreshold&&t>this.cameraHeightThreshold||i>this.cameraHeightThreshold&&t<=this.cameraHeightThreshold)&&(this.updateModel=!0)})}createCarMaterial(e){return new o.MeshPhongMaterial({color:e})}getLog(){return this.logTable}async init(){await D.eachAlways([new Promise(e=>{const s=new V.DRACOLoader;s.setDecoderPath(`${this.assetsRoot}/js/libs/draco/`),s.setDecoderConfig({type:"wasm"}),s.preload();const t=new f.GLTFLoader;t.setDRACOLoader(s),t.load(`${this.assetsRoot}/3DModels/carDraco.glb`,i=>{const a=i.scene,r=new o.Box3().setFromObject(a).getSize(new o.Vector3);this.carModel=new o.Object3D,this.carModel.rotation.x=o.MathUtils.degToRad(90),this.carModel.add(a),a.position.set(0,0,r.z/2),e()})}),new Promise(e=>{new f.GLTFLoader().load(`${this.assetsRoot}/3DModels/van.glb`,t=>{const i=t.scene,l=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.vanModel=new o.Object3D,this.vanModel.rotation.x=o.MathUtils.degToRad(90),this.vanModel.add(i),i.position.set(0,0,l.z/2),e()})}),new Promise(e=>{new f.GLTFLoader().load(`${this.assetsRoot}/3DModels/truck.glb`,t=>{const i=t.scene;i.scale.set(1.2,1,1.5);const l=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.truckModel=new o.Object3D,this.truckModel.rotation.x=o.MathUtils.degToRad(90),this.truckModel.add(i),i.position.set(0,0,l.z/2),e()})}),new Promise(e=>{new f.GLTFLoader().load(`${this.assetsRoot}/3DModels/bus.glb`,t=>{const i=t.scene,l=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.busModel=new o.Object3D,this.busModel.rotation.x=o.MathUtils.degToRad(90),this.busModel.add(i),i.position.set(0,0,l.z/2),e()})}),new Promise(e=>{new B.MTLLoader().load(`${this.assetsRoot}/3DModels/bicycle.mtl`,t=>{t.preload();const i=new M.OBJLoader;i.setMaterials(t),i.load(`${this.assetsRoot}/3DModels/bicycle.obj`,a=>{this.bicycleModel=a,this.bicycleModel.rotation.x=o.MathUtils.degToRad(90),e()})})}),new Promise(e=>{new M.OBJLoader().load(`${this.assetsRoot}/3DModels/male.obj`,t=>{t.scale.set(.01,.01,.01),this.passengerModel=t,this.passengerModel.rotation.x=o.MathUtils.degToRad(90),this.passengerModel.rotation.y=o.MathUtils.degToRad(180),e()})}),new Promise(e=>{this.bluePlateBG=new Image,this.bluePlateBG.src=`${this.assetsRoot}/Images/PlateBG/blue.png`,this.bluePlateBG.onload=()=>{e()}}),new Promise(e=>{this.yellowPlateBG=new Image,this.yellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/yellow.png`,this.yellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.whitePlateBG=new Image,this.whitePlateBG.src=`${this.assetsRoot}/Images/PlateBG/white.png`,this.whitePlateBG.onload=()=>{e()}}),new Promise(e=>{this.blackPlateBG=new Image,this.blackPlateBG.src=`${this.assetsRoot}/Images/PlateBG/black.png`,this.blackPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoYellowPlateBG=new Image,this.neoYellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_yellow.png`,this.neoYellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoGreenPlateBG=new Image,this.neoGreenPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_green.png`,this.neoGreenPlateBG.onload=()=>{e()}}),new Promise(e=>{this.greyPlateBG=new Image,this.greyPlateBG.src=`${this.assetsRoot}/Images/PlateBG/grey.png`,this.greyPlateBG.onload=()=>{e()}})]),this.isInitialized=!0}setInterpolate(e){this.clearVehicles(),this.tabVisible=e}async setup(e){this.context=e,this.renderer=new o.WebGLRenderer({context:e.gl,premultipliedAlpha:!0,logarithmicDepthBuffer:!0,antialias:!0,powerPreference:"high-performance"}),this.renderer.shadowMap.enabled=!0,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setViewport(0,0,this.view.width,this.view.height),this.renderer.autoClearDepth=!1,this.renderer.autoClearStencil=!1,this.renderer.autoClearColor=!1;const s=this.renderer.setRenderTarget.bind(this.renderer);this.renderer.setRenderTarget=i=>{s(i),i==null&&e.bindRenderTarget()},this.scene=new o.Scene;const{camera:t}=e;this.camera=new o.PerspectiveCamera(t.fovY,t.aspect,.1,1e5),this.ambient=new o.AmbientLight(16777215,2),this.scene.add(this.ambient),this.sun=new o.DirectionalLight(16777215,2),this.scene.add(this.sun),e.resetWebGLState()}async render(e){var i;const s=e.camera;if(this.camera.position.set(s.eye[0],s.eye[1],s.eye[2]),this.camera.up.set(s.up[0],s.up[1],s.up[2]),this.camera.lookAt(new o.Vector3(s.center[0],s.center[1],s.center[2])),this.camera.projectionMatrix.fromArray(s.projectionMatrix),!this.isPaused&&this.tabVisible)for(const a of this.vehicleObjectMap.keys()){const l=(i=this.vehicleObjectMap.get(a))==null?void 0:i.model;if(!l)continue;const r=this.computeVehiclePosition(a);if(r){const d=this.toRenderCoordinates(r);l.position.set(d[0],d[1],d[2]),l.rotation.y=o.MathUtils.degToRad(-r[3])}}const t=e.sunLight;this.sun.position.set(t.direction[0],t.direction[1],t.direction[2]),this.sun.intensity=t.diffuse.intensity,this.sun.color=new o.Color(t.diffuse.color[0],t.diffuse.color[1],t.diffuse.color[2]),this.ambient.intensity=t.ambient.intensity,this.ambient.color=new o.Color(t.ambient.color[0],t.ambient.color[1],t.ambient.color[2]),this.renderer.resetState(),e.bindRenderTarget(),this.renderer.render(this.scene,this.camera),P.requestRender(this.view),e.resetWebGLState()}async addVehicles(e){if(this.isPaused||!this.isInitialized||!this.tabVisible)return;const s=Date.now();for(const t of e){if(this.historyPositionMap.has(t.vehicleId))continue;this.appDataStore.saveTrackLog&&this.logTable.push([t.ptcId,t.plateNo,t.timestamp,t.localTimestamp,t.speed,t.x,t.y,t.ptcType,t.vehicleType,t.vehicleColor,t.plateColor,t.heading,t.fixAngle,t.roadLayer,t.step,s,0,0]);const{vehicleId:i,localTimestamp:a}=t,l=Number(t.x),r=Number(t.y),d=Number(t.heading);this.historyPositionMap.set(i,[{pos:[l,r,0],heading:d,time:a}]);const h=this.getVehicleModel(t);h.name=i,h.visible=!1;try{const n=await this.createPlateSprite(t);n&&(h.add(n),n.position.set(0,5,-4))}catch(n){console.log("createPlateSprite error:",n)}this.scene.add(h),this.vehicleObjectMap.set(i,{model:h,data:t,waitForDelete:!1,isMoving:!1})}}async updateVehicles(e){if(this.isPaused||!this.isInitialized||!this.tabVisible)return;const s=[],t=Date.now();for(const i of e){const{vehicleId:a,localTimestamp:l}=i,r=Number(i.x),d=Number(i.y);let h=Number(i.heading);const n=this.vehicleObjectMap.get(a),p=this.historyPositionMap.get(a);if(!n||!p)s.push(i);else{if(this.appDataStore.saveTrackLog&&this.logTable.push([i.ptcId,i.plateNo,i.timestamp,i.localTimestamp,i.speed,i.x,i.y,i.ptcType,i.vehicleType,i.vehicleColor,i.plateColor,i.heading,i.fixAngle,i.roadLayer,i.step,t,p.length,1]),this.updateModel||n.data.vehicleColor!==i.vehicleColor||n.data.vehicleType!==i.vehicleType){this.scene.remove(n.model),this.disposeModel(n.model),n.model=this.getVehicleModel(i),n.model.visible=!0;const c=await this.createPlateSprite(i);c&&(n.model.add(c),c.position.set(0,5,-4)),this.scene.add(n.model)}if(n.data.showName!==i.showName||n.data.plateColor!==i.plateColor){const c=n.model.getObjectByName("VehiclePlate");c&&(n.model.remove(c),this.disposeModel(c));const g=await this.createPlateSprite(i);g&&(n.model.add(g),g.position.set(0,5,-4))}if(n.data=i,this.tabVisible){const c=p[p.length-1];Math.abs(h-c.heading)>=180&&(h>c.heading?c.heading+=360:h+=360),p.push({pos:[r,d,0],heading:h,time:l})}else{this.historyPositionMap.set(a,[{pos:[r,d,0],heading:h,time:l}]);const c=this.toRenderCoordinates([r,d,0]);n.model.position.set(c[0],c[1],c[2]),n.model.rotation.y=o.MathUtils.degToRad(-h)}}}await this.addVehicles(s),this.updateModel=!1}toRenderCoordinates(e){const s=[0,0,0];return P.toRenderCoordinates(this.view,e,0,C.WGS84,s,0,1),s}deleteVehicles(e){if(this.isPaused)return;const s=Date.now();e.forEach(t=>{if(this.appDataStore.saveTrackLog){const a=this.historyPositionMap.get(t);this.logTable.push([t,"","","","","","","","","","","","","","",s,a?a.length:0,2])}const i=this.vehicleObjectMap.get(t);i&&(this.tabVisible?i.isMoving?i.waitForDelete=!0:this.deleteVehicle(i):this.deleteVehicle(i))})}deleteVehicle(e){e.model.visible=!1,this.disposeModel(e.model),this.scene.remove(e.model);const s=e.data.vehicleId;this.vehicleObjectMap.delete(s),this.historyPositionMap.delete(s)}async toggleTrafficInfo(e){e.name==="vehiclePlate"&&(e.visible===!0&&this.currentSpriteContent===m.EVehiclePlateState.None?await this.updatePanelContent(m.EVehiclePlateState.PlateNumber):await this.updatePanelContent(e.visible?this.currentSpriteContent:m.EVehiclePlateState.None))}togglePause(e){this.isPaused=e}clearVehicles(){for(const e of this.vehicleObjectMap.values())this.disposeModel(e.model),this.scene.remove(e.model);this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}async updatePanelContent(e){this.currentSpriteContent=e;for(const s of this.vehicleObjectMap.values()){const t=s.model.getObjectByName("VehiclePlate");if(t&&(s.model.remove(t),this.disposeModel(t)),e!==m.EVehiclePlateState.None){const i=await this.createPlateSprite(s.data);i&&(s.model.add(i),i.position.set(0,5,-4))}}}toggleGroundVehicle(e){this.showGroundVehicle=e}toggleElevatedVehicle(e){this.showElevatedVehicle=e}disposeModel(e){e.traverse(s=>{if(s instanceof o.Mesh)try{s.geometry.dispose(),s.material.dispose()}catch{}})}computeVehiclePosition(e){const s=this.historyPositionMap.get(e),t=this.vehicleObjectMap.get(e);if(!t||!s||!t.isMoving&&s.length<=2)return;const i=Date.now();t.isMoving=!0,t.data.roadLayer==="1"?t.model.visible=this.showGroundVehicle:t.model.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=i,t.segmentTotalTime=s[1].time-s[0].time);const a=i-t.segmentStartTime,l=Math.min(a/t.segmentTotalTime,1);if(l===1)if(s.shift(),s.length===1){t.waitForDelete===!0?this.deleteVehicle(t):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0,t.model.visible=!1,t.isMoving=!1,console.log("hide vehicle",e));return}else{t.segmentStartTime=Date.now();const r=a-t.segmentTotalTime;return t.segmentTotalTime=s[1].time-s[0].time-r,Math.abs(s[1].heading-s[0].heading)>180&&(s[1].heading>s[0].heading?s[0].heading+=360:s[1].heading+=360),s[0].pos.concat(s[0].heading)}else if(s.length>=2){const r=s[0].pos[0]+(s[1].pos[0]-s[0].pos[0])*l,d=s[0].pos[1]+(s[1].pos[1]-s[0].pos[1])*l,h=s[0].heading+(s[1].heading-s[0].heading)*l;return[r,d,0,h]}else return}getVehicleModel(e){if(this.view.camera.position.z>=this.cameraHeightThreshold){const s=new o.SphereGeometry(5,32,32),t=new o.MeshPhysicalMaterial({color:325253,emissive:0,roughness:this.roughness,metalness:this.metalness});return new o.Mesh(s,t)}else{let s;if(e.ptcType===2)s=this.bicycleModel.clone();else if(e.ptcType===3)s=this.passengerModel.clone();else{switch(e.vehicleType){case 10:s=this.carModel.clone();break;case 20:s=this.vanModel.clone();break;case 25:s=this.truckModel.clone();break;case 50:s=this.busModel.clone();break;default:s=this.carModel.clone();break}const t=this.materialMap.get(e.vehicleColor)||this.defaultMaterial;let i=!1;s.traverse(a=>{!i&&a instanceof o.Mesh&&(a.material=t,i=!0)})}return s}}createCanvas(e,s,t){const i=document.createElement("canvas"),a=e.width,l=e.height;i.width=a,i.height=l;const r=i.getContext("2d");if(!r){console.log("canvas创建失败");return}return r.fillStyle="rgba(0,0,0,0.0)",r.fillRect(0,0,a,l),r.drawImage(e,0,0,a,l),r.beginPath(),r.translate(a/2,l/2),r.fillStyle=t,r.font="bold 32px 宋体",r.textBaseline="middle",r.textAlign="center",r.fillText(s,0,0),i}createPlateSprite(e){return new Promise((s,t)=>{var h,n;const i=!e.plateNo||e.plateNo==="0"||e.plateNo==="000000";if(this.currentSpriteContent===m.EVehiclePlateState.None||this.currentSpriteContent===m.EVehiclePlateState.PlateNumber&&i){s(void 0);return}let a=new Image,l="",r="";if(this.currentSpriteContent===m.EVehiclePlateState.PlateNumber||this.currentSpriteContent===m.EVehiclePlateState.Mix)if(i)a=this.greyPlateBG,l=e.ptcId,r="#ffffff";else switch(l=((h=e.showName)==null?void 0:h.substring(0,2))+"•"+((n=e.showName)==null?void 0:n.substring(2)),e.plateColor){case 1:a=this.bluePlateBG,r="#ffffff";break;case 2:a=this.yellowPlateBG,r="#000000";break;case 3:a=this.whitePlateBG,r="#000000";break;case 4:a=this.blackPlateBG,r="#ffffff";break;case 5:a=this.neoYellowPlateBG,r="#000000";break;case 6:a=this.neoGreenPlateBG,r="#000000";break;default:a=this.greyPlateBG,l=e.plateNo,r="#ffffff";break}else this.currentSpriteContent===m.EVehiclePlateState.Id&&(a=this.greyPlateBG,l=e.ptcId,r="#ffffff");const d=this.createCanvas(a,l,r);if(d){const p=new o.CanvasTexture(d),c=new o.SpriteMaterial({map:p,transparent:!1}),g=new o.Sprite(c),w=.05,v=d.width*w,y=d.height*w;g.scale.set(v,y,1),g.name="VehiclePlate",s(g)}else{t("canvas创建失败");return}a.onerror=p=>{console.log(`号牌背景加载失败: ${a.src}`,p),t(p)}})}}exports.default=O;
|