gisviewer-vue3-arcgis 1.0.182 → 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/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/types/index.d.ts +1 -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/types/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3,14 +3,15 @@ import * as y from "@arcgis/core/core/reactiveUtils.js";
|
|
|
3
3
|
import T from "@arcgis/core/geometry/SpatialReference";
|
|
4
4
|
import * as b from "@arcgis/core/views/3d/externalRenderers";
|
|
5
5
|
import * as a from "three";
|
|
6
|
+
import { DRACOLoader as C } from "three/examples/jsm/loaders/DRACOLoader";
|
|
6
7
|
import { GLTFLoader as f } from "three/examples/jsm/loaders/GLTFLoader";
|
|
7
|
-
import { MTLLoader as
|
|
8
|
+
import { MTLLoader as G } from "three/examples/jsm/loaders/MTLLoader";
|
|
8
9
|
import { OBJLoader as w } from "three/examples/jsm/loaders/OBJLoader";
|
|
9
|
-
import { toRaw as
|
|
10
|
+
import { toRaw as S } from "vue";
|
|
10
11
|
import { EVehiclePlateState as m } from "../../../types/index.mjs";
|
|
11
|
-
import
|
|
12
|
-
class
|
|
13
|
-
constructor(
|
|
12
|
+
import B from "../../stores/index.mjs";
|
|
13
|
+
class O {
|
|
14
|
+
constructor(t) {
|
|
14
15
|
this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new a.MeshPhongMaterial({
|
|
15
16
|
color: 16777215
|
|
16
17
|
}), this.materialMap = /* @__PURE__ */ new Map([
|
|
@@ -25,7 +26,7 @@ class N {
|
|
|
25
26
|
[9, this.createCarMaterial(2105376)],
|
|
26
27
|
[10, this.createCarMaterial(9662683)],
|
|
27
28
|
[99, this.createCarMaterial(6908265)]
|
|
28
|
-
]), this.isInitialized = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.isPaused = !1, this.currentSpriteContent = m.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.tabVisible = !0, this.updateModel = !1, this.appDataStore =
|
|
29
|
+
]), this.isInitialized = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.isPaused = !1, this.currentSpriteContent = m.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.tabVisible = !0, this.updateModel = !1, this.appDataStore = B.useAppDataStore, this.logTable = [
|
|
29
30
|
[
|
|
30
31
|
"ptcId",
|
|
31
32
|
"plateno",
|
|
@@ -46,8 +47,8 @@ class N {
|
|
|
46
47
|
"queueLength",
|
|
47
48
|
"status"
|
|
48
49
|
]
|
|
49
|
-
], this.view =
|
|
50
|
-
const s =
|
|
50
|
+
], this.view = t;
|
|
51
|
+
const s = S(this.appDataStore.mapConfig);
|
|
51
52
|
this.assetsRoot = s.assetsRoot, document.addEventListener(
|
|
52
53
|
"visibilitychange",
|
|
53
54
|
() => {
|
|
@@ -56,15 +57,15 @@ class N {
|
|
|
56
57
|
!1
|
|
57
58
|
), y.watch(
|
|
58
59
|
() => this.view.camera.position.z,
|
|
59
|
-
(
|
|
60
|
-
(i <= this.cameraHeightThreshold &&
|
|
60
|
+
(e, i) => {
|
|
61
|
+
(i <= this.cameraHeightThreshold && e > this.cameraHeightThreshold || i > this.cameraHeightThreshold && e <= this.cameraHeightThreshold) && (this.updateModel = !0);
|
|
61
62
|
}
|
|
62
63
|
);
|
|
63
64
|
}
|
|
64
65
|
// private readonly vehiclePool = new VehiclePool();
|
|
65
|
-
createCarMaterial(
|
|
66
|
+
createCarMaterial(t) {
|
|
66
67
|
return new a.MeshPhongMaterial({
|
|
67
|
-
color:
|
|
68
|
+
color: t
|
|
68
69
|
// // emissive: 0xc3c3c3,
|
|
69
70
|
// roughness: this.roughness,
|
|
70
71
|
// metalness: this.metalness
|
|
@@ -75,95 +76,98 @@ class N {
|
|
|
75
76
|
}
|
|
76
77
|
async init() {
|
|
77
78
|
await v.eachAlways([
|
|
78
|
-
new Promise((
|
|
79
|
-
new
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
new Promise((t) => {
|
|
80
|
+
const s = new C();
|
|
81
|
+
s.setDecoderPath(`${this.assetsRoot}/js/libs/draco/`), s.setDecoderConfig({ type: "wasm" }), s.preload();
|
|
82
|
+
const e = new f();
|
|
83
|
+
e.setDRACOLoader(s), e.load(`${this.assetsRoot}/3DModels/carDraco.glb`, (i) => {
|
|
84
|
+
const o = i.scene, r = new a.Box3().setFromObject(o).getSize(new a.Vector3());
|
|
85
|
+
this.carModel = new a.Object3D(), this.carModel.rotation.x = a.MathUtils.degToRad(90), this.carModel.add(o), o.position.set(0, 0, r.z / 2), t();
|
|
82
86
|
});
|
|
83
87
|
}),
|
|
84
|
-
new Promise((
|
|
85
|
-
new f().load(`${this.assetsRoot}/3DModels/van.glb`, (
|
|
86
|
-
const i =
|
|
87
|
-
this.vanModel = new a.Object3D(), this.vanModel.rotation.x = a.MathUtils.degToRad(90), this.vanModel.add(i), i.position.set(0, 0, l.z / 2),
|
|
88
|
+
new Promise((t) => {
|
|
89
|
+
new f().load(`${this.assetsRoot}/3DModels/van.glb`, (e) => {
|
|
90
|
+
const i = e.scene, l = new a.Box3().setFromObject(i).getSize(new a.Vector3());
|
|
91
|
+
this.vanModel = new a.Object3D(), this.vanModel.rotation.x = a.MathUtils.degToRad(90), this.vanModel.add(i), i.position.set(0, 0, l.z / 2), t();
|
|
88
92
|
});
|
|
89
93
|
}),
|
|
90
|
-
new Promise((
|
|
91
|
-
new f().load(`${this.assetsRoot}/3DModels/truck.glb`, (
|
|
92
|
-
const i =
|
|
94
|
+
new Promise((t) => {
|
|
95
|
+
new f().load(`${this.assetsRoot}/3DModels/truck.glb`, (e) => {
|
|
96
|
+
const i = e.scene;
|
|
93
97
|
i.scale.set(1.2, 1, 1.5);
|
|
94
98
|
const l = new a.Box3().setFromObject(i).getSize(new a.Vector3());
|
|
95
|
-
this.truckModel = new a.Object3D(), this.truckModel.rotation.x = a.MathUtils.degToRad(90), this.truckModel.add(i), i.position.set(0, 0, l.z / 2),
|
|
99
|
+
this.truckModel = new a.Object3D(), this.truckModel.rotation.x = a.MathUtils.degToRad(90), this.truckModel.add(i), i.position.set(0, 0, l.z / 2), t();
|
|
96
100
|
});
|
|
97
101
|
}),
|
|
98
|
-
new Promise((
|
|
99
|
-
new f().load(`${this.assetsRoot}/3DModels/bus.glb`, (
|
|
100
|
-
const i =
|
|
101
|
-
this.busModel = new a.Object3D(), this.busModel.rotation.x = a.MathUtils.degToRad(90), this.busModel.add(i), i.position.set(0, 0, l.z / 2),
|
|
102
|
+
new Promise((t) => {
|
|
103
|
+
new f().load(`${this.assetsRoot}/3DModels/bus.glb`, (e) => {
|
|
104
|
+
const i = e.scene, l = new a.Box3().setFromObject(i).getSize(new a.Vector3());
|
|
105
|
+
this.busModel = new a.Object3D(), this.busModel.rotation.x = a.MathUtils.degToRad(90), this.busModel.add(i), i.position.set(0, 0, l.z / 2), t();
|
|
102
106
|
});
|
|
103
107
|
}),
|
|
104
|
-
new Promise((
|
|
105
|
-
new
|
|
108
|
+
new Promise((t) => {
|
|
109
|
+
new G().load(
|
|
106
110
|
`${this.assetsRoot}/3DModels/bicycle.mtl`,
|
|
107
|
-
(
|
|
108
|
-
|
|
111
|
+
(e) => {
|
|
112
|
+
e.preload();
|
|
109
113
|
const i = new w();
|
|
110
|
-
i.setMaterials(
|
|
114
|
+
i.setMaterials(e), i.load(
|
|
111
115
|
`${this.assetsRoot}/3DModels/bicycle.obj`,
|
|
112
116
|
(o) => {
|
|
113
|
-
this.bicycleModel = o, this.bicycleModel.rotation.x = a.MathUtils.degToRad(90),
|
|
117
|
+
this.bicycleModel = o, this.bicycleModel.rotation.x = a.MathUtils.degToRad(90), t();
|
|
114
118
|
}
|
|
115
119
|
);
|
|
116
120
|
}
|
|
117
121
|
);
|
|
118
122
|
}),
|
|
119
|
-
new Promise((
|
|
120
|
-
new w().load(`${this.assetsRoot}/3DModels/male.obj`, (
|
|
121
|
-
|
|
123
|
+
new Promise((t) => {
|
|
124
|
+
new w().load(`${this.assetsRoot}/3DModels/male.obj`, (e) => {
|
|
125
|
+
e.scale.set(0.01, 0.01, 0.01), this.passengerModel = e, this.passengerModel.rotation.x = a.MathUtils.degToRad(90), this.passengerModel.rotation.y = a.MathUtils.degToRad(180), t();
|
|
122
126
|
});
|
|
123
127
|
}),
|
|
124
|
-
new Promise((
|
|
128
|
+
new Promise((t) => {
|
|
125
129
|
this.bluePlateBG = new Image(), this.bluePlateBG.src = `${this.assetsRoot}/Images/PlateBG/blue.png`, this.bluePlateBG.onload = () => {
|
|
126
|
-
|
|
130
|
+
t();
|
|
127
131
|
};
|
|
128
132
|
}),
|
|
129
|
-
new Promise((
|
|
133
|
+
new Promise((t) => {
|
|
130
134
|
this.yellowPlateBG = new Image(), this.yellowPlateBG.src = `${this.assetsRoot}/Images/PlateBG/yellow.png`, this.yellowPlateBG.onload = () => {
|
|
131
|
-
|
|
135
|
+
t();
|
|
132
136
|
};
|
|
133
137
|
}),
|
|
134
|
-
new Promise((
|
|
138
|
+
new Promise((t) => {
|
|
135
139
|
this.whitePlateBG = new Image(), this.whitePlateBG.src = `${this.assetsRoot}/Images/PlateBG/white.png`, this.whitePlateBG.onload = () => {
|
|
136
|
-
|
|
140
|
+
t();
|
|
137
141
|
};
|
|
138
142
|
}),
|
|
139
|
-
new Promise((
|
|
143
|
+
new Promise((t) => {
|
|
140
144
|
this.blackPlateBG = new Image(), this.blackPlateBG.src = `${this.assetsRoot}/Images/PlateBG/black.png`, this.blackPlateBG.onload = () => {
|
|
141
|
-
|
|
145
|
+
t();
|
|
142
146
|
};
|
|
143
147
|
}),
|
|
144
|
-
new Promise((
|
|
148
|
+
new Promise((t) => {
|
|
145
149
|
this.neoYellowPlateBG = new Image(), this.neoYellowPlateBG.src = `${this.assetsRoot}/Images/PlateBG/neo_yellow.png`, this.neoYellowPlateBG.onload = () => {
|
|
146
|
-
|
|
150
|
+
t();
|
|
147
151
|
};
|
|
148
152
|
}),
|
|
149
|
-
new Promise((
|
|
153
|
+
new Promise((t) => {
|
|
150
154
|
this.neoGreenPlateBG = new Image(), this.neoGreenPlateBG.src = `${this.assetsRoot}/Images/PlateBG/neo_green.png`, this.neoGreenPlateBG.onload = () => {
|
|
151
|
-
|
|
155
|
+
t();
|
|
152
156
|
};
|
|
153
157
|
}),
|
|
154
|
-
new Promise((
|
|
158
|
+
new Promise((t) => {
|
|
155
159
|
this.greyPlateBG = new Image(), this.greyPlateBG.src = `${this.assetsRoot}/Images/PlateBG/grey.png`, this.greyPlateBG.onload = () => {
|
|
156
|
-
|
|
160
|
+
t();
|
|
157
161
|
};
|
|
158
162
|
})
|
|
159
163
|
]), this.isInitialized = !0;
|
|
160
164
|
}
|
|
161
|
-
setInterpolate(
|
|
162
|
-
this.clearVehicles(), this.tabVisible =
|
|
165
|
+
setInterpolate(t) {
|
|
166
|
+
this.clearVehicles(), this.tabVisible = t;
|
|
163
167
|
}
|
|
164
|
-
async setup(
|
|
165
|
-
this.context =
|
|
166
|
-
context:
|
|
168
|
+
async setup(t) {
|
|
169
|
+
this.context = t, this.renderer = new a.WebGLRenderer({
|
|
170
|
+
context: t.gl,
|
|
167
171
|
premultipliedAlpha: !0,
|
|
168
172
|
logarithmicDepthBuffer: !0,
|
|
169
173
|
antialias: !0,
|
|
@@ -173,19 +177,19 @@ class N {
|
|
|
173
177
|
this.renderer
|
|
174
178
|
);
|
|
175
179
|
this.renderer.setRenderTarget = (i) => {
|
|
176
|
-
s(i), i == null &&
|
|
180
|
+
s(i), i == null && t.bindRenderTarget();
|
|
177
181
|
}, this.scene = new a.Scene();
|
|
178
|
-
const { camera:
|
|
182
|
+
const { camera: e } = t;
|
|
179
183
|
this.camera = new a.PerspectiveCamera(
|
|
180
|
-
|
|
181
|
-
|
|
184
|
+
e.fovY,
|
|
185
|
+
e.aspect,
|
|
182
186
|
0.1,
|
|
183
187
|
1e5
|
|
184
|
-
), this.ambient = new a.AmbientLight(16777215, 2), this.scene.add(this.ambient), this.sun = new a.DirectionalLight(16777215, 2), this.scene.add(this.sun),
|
|
188
|
+
), this.ambient = new a.AmbientLight(16777215, 2), this.scene.add(this.ambient), this.sun = new a.DirectionalLight(16777215, 2), this.scene.add(this.sun), t.resetWebGLState();
|
|
185
189
|
}
|
|
186
|
-
async render(
|
|
190
|
+
async render(t) {
|
|
187
191
|
var i;
|
|
188
|
-
const s =
|
|
192
|
+
const s = t.camera;
|
|
189
193
|
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(
|
|
190
194
|
new a.Vector3(s.center[0], s.center[1], s.center[2])
|
|
191
195
|
), this.camera.projectionMatrix.fromArray(s.projectionMatrix), !this.isPaused && this.tabVisible)
|
|
@@ -199,60 +203,62 @@ class N {
|
|
|
199
203
|
l.position.set(d[0], d[1], d[2]), l.rotation.y = a.MathUtils.degToRad(-r[3]);
|
|
200
204
|
}
|
|
201
205
|
}
|
|
202
|
-
const
|
|
203
|
-
this.sun.position.set(
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
), this.ambient.intensity =
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
), this.renderer.resetState(),
|
|
206
|
+
const e = t.sunLight;
|
|
207
|
+
this.sun.position.set(e.direction[0], e.direction[1], e.direction[2]), this.sun.intensity = e.diffuse.intensity, this.sun.color = new a.Color(
|
|
208
|
+
e.diffuse.color[0],
|
|
209
|
+
e.diffuse.color[1],
|
|
210
|
+
e.diffuse.color[2]
|
|
211
|
+
), this.ambient.intensity = e.ambient.intensity, this.ambient.color = new a.Color(
|
|
212
|
+
e.ambient.color[0],
|
|
213
|
+
e.ambient.color[1],
|
|
214
|
+
e.ambient.color[2]
|
|
215
|
+
), this.renderer.resetState(), t.bindRenderTarget(), this.renderer.render(this.scene, this.camera), b.requestRender(this.view), t.resetWebGLState();
|
|
212
216
|
}
|
|
213
217
|
/**
|
|
214
218
|
* 新增车辆
|
|
215
219
|
* */
|
|
216
|
-
async addVehicles(
|
|
220
|
+
async addVehicles(t) {
|
|
217
221
|
if (this.isPaused || !this.isInitialized || !this.tabVisible)
|
|
218
222
|
return;
|
|
219
223
|
const s = Date.now();
|
|
220
|
-
for (const
|
|
224
|
+
for (const e of t) {
|
|
225
|
+
if (this.historyPositionMap.has(e.vehicleId))
|
|
226
|
+
continue;
|
|
221
227
|
this.appDataStore.saveTrackLog && this.logTable.push([
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
228
|
+
e.ptcId,
|
|
229
|
+
e.plateNo,
|
|
230
|
+
e.timestamp,
|
|
231
|
+
e.localTimestamp,
|
|
232
|
+
e.speed,
|
|
233
|
+
e.x,
|
|
234
|
+
e.y,
|
|
235
|
+
e.ptcType,
|
|
236
|
+
e.vehicleType,
|
|
237
|
+
e.vehicleColor,
|
|
238
|
+
e.plateColor,
|
|
239
|
+
e.heading,
|
|
240
|
+
e.fixAngle,
|
|
241
|
+
e.roadLayer,
|
|
242
|
+
e.step,
|
|
237
243
|
s,
|
|
238
244
|
0,
|
|
239
245
|
0
|
|
240
246
|
]);
|
|
241
|
-
const { vehicleId: i, localTimestamp: o } =
|
|
247
|
+
const { vehicleId: i, localTimestamp: o } = e, l = Number(e.x), r = Number(e.y), d = Number(e.heading);
|
|
242
248
|
this.historyPositionMap.set(i, [
|
|
243
249
|
{ pos: [l, r, 0], heading: d, time: o }
|
|
244
250
|
]);
|
|
245
|
-
const h = this.getVehicleModel(
|
|
251
|
+
const h = this.getVehicleModel(e);
|
|
246
252
|
h.name = i, h.visible = !1;
|
|
247
253
|
try {
|
|
248
|
-
const n = await this.createPlateSprite(
|
|
254
|
+
const n = await this.createPlateSprite(e);
|
|
249
255
|
n && (h.add(n), n.position.set(0, 5, -4));
|
|
250
256
|
} catch (n) {
|
|
251
257
|
console.log("createPlateSprite error:", n);
|
|
252
258
|
}
|
|
253
259
|
this.scene.add(h), this.vehicleObjectMap.set(i, {
|
|
254
260
|
model: h,
|
|
255
|
-
data:
|
|
261
|
+
data: e,
|
|
256
262
|
waitForDelete: !1,
|
|
257
263
|
isMoving: !1
|
|
258
264
|
});
|
|
@@ -261,11 +267,11 @@ class N {
|
|
|
261
267
|
/**
|
|
262
268
|
* 更新车辆
|
|
263
269
|
* */
|
|
264
|
-
async updateVehicles(
|
|
270
|
+
async updateVehicles(t) {
|
|
265
271
|
if (this.isPaused || !this.isInitialized || !this.tabVisible)
|
|
266
272
|
return;
|
|
267
|
-
const s = [],
|
|
268
|
-
for (const i of
|
|
273
|
+
const s = [], e = Date.now();
|
|
274
|
+
for (const i of t) {
|
|
269
275
|
const { vehicleId: o, localTimestamp: l } = i, r = Number(i.x), d = Number(i.y);
|
|
270
276
|
let h = Number(i.heading);
|
|
271
277
|
const n = this.vehicleObjectMap.get(o), p = this.historyPositionMap.get(
|
|
@@ -290,7 +296,7 @@ class N {
|
|
|
290
296
|
i.fixAngle,
|
|
291
297
|
i.roadLayer,
|
|
292
298
|
i.step,
|
|
293
|
-
|
|
299
|
+
e,
|
|
294
300
|
p.length,
|
|
295
301
|
1
|
|
296
302
|
]), this.updateModel || n.data.vehicleColor !== i.vehicleColor || n.data.vehicleType !== i.vehicleType) {
|
|
@@ -322,12 +328,12 @@ class N {
|
|
|
322
328
|
}
|
|
323
329
|
await this.addVehicles(s), this.updateModel = !1;
|
|
324
330
|
}
|
|
325
|
-
toRenderCoordinates(
|
|
331
|
+
toRenderCoordinates(t) {
|
|
326
332
|
const s = [0, 0, 0];
|
|
327
333
|
return b.toRenderCoordinates(
|
|
328
334
|
// @ts-ignore
|
|
329
335
|
this.view,
|
|
330
|
-
|
|
336
|
+
t,
|
|
331
337
|
0,
|
|
332
338
|
T.WGS84,
|
|
333
339
|
s,
|
|
@@ -338,15 +344,15 @@ class N {
|
|
|
338
344
|
/**
|
|
339
345
|
* 删除车辆
|
|
340
346
|
* */
|
|
341
|
-
deleteVehicles(
|
|
347
|
+
deleteVehicles(t) {
|
|
342
348
|
if (this.isPaused)
|
|
343
349
|
return;
|
|
344
350
|
const s = Date.now();
|
|
345
|
-
|
|
351
|
+
t.forEach((e) => {
|
|
346
352
|
if (this.appDataStore.saveTrackLog) {
|
|
347
|
-
const o = this.historyPositionMap.get(
|
|
353
|
+
const o = this.historyPositionMap.get(e);
|
|
348
354
|
this.logTable.push([
|
|
349
|
-
|
|
355
|
+
e,
|
|
350
356
|
"",
|
|
351
357
|
"",
|
|
352
358
|
"",
|
|
@@ -366,29 +372,29 @@ class N {
|
|
|
366
372
|
2
|
|
367
373
|
]);
|
|
368
374
|
}
|
|
369
|
-
const i = this.vehicleObjectMap.get(
|
|
375
|
+
const i = this.vehicleObjectMap.get(e);
|
|
370
376
|
i && (this.tabVisible ? i.isMoving ? i.waitForDelete = !0 : this.deleteVehicle(i) : this.deleteVehicle(i));
|
|
371
377
|
});
|
|
372
378
|
}
|
|
373
|
-
deleteVehicle(
|
|
374
|
-
|
|
375
|
-
const s =
|
|
379
|
+
deleteVehicle(t) {
|
|
380
|
+
t.model.visible = !1, this.disposeModel(t.model), this.scene.remove(t.model);
|
|
381
|
+
const s = t.data.vehicleId;
|
|
376
382
|
this.vehicleObjectMap.delete(s), this.historyPositionMap.delete(s);
|
|
377
383
|
}
|
|
378
|
-
async toggleTrafficInfo(
|
|
379
|
-
|
|
380
|
-
|
|
384
|
+
async toggleTrafficInfo(t) {
|
|
385
|
+
t.name === "vehiclePlate" && (t.visible === !0 && this.currentSpriteContent === m.None ? await this.updatePanelContent(m.PlateNumber) : await this.updatePanelContent(
|
|
386
|
+
t.visible ? this.currentSpriteContent : m.None
|
|
381
387
|
));
|
|
382
388
|
}
|
|
383
|
-
togglePause(
|
|
384
|
-
this.isPaused =
|
|
389
|
+
togglePause(t) {
|
|
390
|
+
this.isPaused = t;
|
|
385
391
|
}
|
|
386
392
|
/**
|
|
387
393
|
* 清除全部车辆
|
|
388
394
|
* */
|
|
389
395
|
clearVehicles() {
|
|
390
|
-
for (const
|
|
391
|
-
this.disposeModel(
|
|
396
|
+
for (const t of this.vehicleObjectMap.values())
|
|
397
|
+
this.disposeModel(t.model), this.scene.remove(t.model);
|
|
392
398
|
this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
|
|
393
399
|
}
|
|
394
400
|
/**
|
|
@@ -396,27 +402,27 @@ class N {
|
|
|
396
402
|
* @param contentType
|
|
397
403
|
* @returns
|
|
398
404
|
*/
|
|
399
|
-
async updatePanelContent(
|
|
400
|
-
this.currentSpriteContent =
|
|
405
|
+
async updatePanelContent(t) {
|
|
406
|
+
this.currentSpriteContent = t;
|
|
401
407
|
for (const s of this.vehicleObjectMap.values()) {
|
|
402
|
-
const
|
|
403
|
-
if (
|
|
408
|
+
const e = s.model.getObjectByName("VehiclePlate");
|
|
409
|
+
if (e && (s.model.remove(e), this.disposeModel(e)), t !== m.None) {
|
|
404
410
|
const i = await this.createPlateSprite(s.data);
|
|
405
411
|
i && (s.model.add(i), i.position.set(0, 5, -4));
|
|
406
412
|
}
|
|
407
413
|
}
|
|
408
414
|
}
|
|
409
|
-
toggleGroundVehicle(
|
|
410
|
-
this.showGroundVehicle =
|
|
415
|
+
toggleGroundVehicle(t) {
|
|
416
|
+
this.showGroundVehicle = t;
|
|
411
417
|
}
|
|
412
|
-
toggleElevatedVehicle(
|
|
413
|
-
this.showElevatedVehicle =
|
|
418
|
+
toggleElevatedVehicle(t) {
|
|
419
|
+
this.showElevatedVehicle = t;
|
|
414
420
|
}
|
|
415
421
|
/**
|
|
416
422
|
* 释放模型资源
|
|
417
423
|
* */
|
|
418
|
-
disposeModel(
|
|
419
|
-
|
|
424
|
+
disposeModel(t) {
|
|
425
|
+
t.traverse((s) => {
|
|
420
426
|
if (s instanceof a.Mesh)
|
|
421
427
|
try {
|
|
422
428
|
s.geometry.dispose(), s.material.dispose();
|
|
@@ -427,24 +433,24 @@ class N {
|
|
|
427
433
|
/**
|
|
428
434
|
* 计算车辆位置
|
|
429
435
|
* */
|
|
430
|
-
computeVehiclePosition(
|
|
431
|
-
const s = this.historyPositionMap.get(
|
|
432
|
-
if (!
|
|
436
|
+
computeVehiclePosition(t) {
|
|
437
|
+
const s = this.historyPositionMap.get(t), e = this.vehicleObjectMap.get(t);
|
|
438
|
+
if (!e || !s || !e.isMoving && s.length <= 2)
|
|
433
439
|
return;
|
|
434
440
|
const i = Date.now();
|
|
435
|
-
|
|
436
|
-
const o = i -
|
|
437
|
-
o /
|
|
441
|
+
e.isMoving = !0, e.data.roadLayer === "1" ? e.model.visible = this.showGroundVehicle : e.model.visible = this.showElevatedVehicle, e.segmentStartTime || (e.segmentStartTime = i, e.segmentTotalTime = s[1].time - s[0].time);
|
|
442
|
+
const o = i - e.segmentStartTime, l = Math.min(
|
|
443
|
+
o / e.segmentTotalTime,
|
|
438
444
|
1
|
|
439
445
|
);
|
|
440
446
|
if (l === 1)
|
|
441
447
|
if (s.shift(), s.length === 1) {
|
|
442
|
-
|
|
448
|
+
e.waitForDelete === !0 ? this.deleteVehicle(e) : (e.segmentStartTime = void 0, e.segmentTotalTime = void 0, e.model.visible = !1, e.isMoving = !1, console.log("hide vehicle", t));
|
|
443
449
|
return;
|
|
444
450
|
} else {
|
|
445
|
-
|
|
446
|
-
const r = o -
|
|
447
|
-
return
|
|
451
|
+
e.segmentStartTime = Date.now();
|
|
452
|
+
const r = o - e.segmentTotalTime;
|
|
453
|
+
return e.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);
|
|
448
454
|
}
|
|
449
455
|
else if (s.length >= 2) {
|
|
450
456
|
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;
|
|
@@ -455,23 +461,23 @@ class N {
|
|
|
455
461
|
/**
|
|
456
462
|
* 根据车辆类型、车身颜色获取模型
|
|
457
463
|
* */
|
|
458
|
-
getVehicleModel(
|
|
464
|
+
getVehicleModel(t) {
|
|
459
465
|
if (this.view.camera.position.z >= this.cameraHeightThreshold) {
|
|
460
|
-
const s = new a.SphereGeometry(5, 32, 32),
|
|
466
|
+
const s = new a.SphereGeometry(5, 32, 32), e = new a.MeshPhysicalMaterial({
|
|
461
467
|
color: 325253,
|
|
462
468
|
emissive: 0,
|
|
463
469
|
roughness: this.roughness,
|
|
464
470
|
metalness: this.metalness
|
|
465
471
|
});
|
|
466
|
-
return new a.Mesh(s,
|
|
472
|
+
return new a.Mesh(s, e);
|
|
467
473
|
} else {
|
|
468
474
|
let s;
|
|
469
|
-
if (
|
|
475
|
+
if (t.ptcType === 2)
|
|
470
476
|
s = this.bicycleModel.clone();
|
|
471
|
-
else if (
|
|
477
|
+
else if (t.ptcType === 3)
|
|
472
478
|
s = this.passengerModel.clone();
|
|
473
479
|
else {
|
|
474
|
-
switch (
|
|
480
|
+
switch (t.vehicleType) {
|
|
475
481
|
case 10:
|
|
476
482
|
s = this.carModel.clone();
|
|
477
483
|
break;
|
|
@@ -488,10 +494,10 @@ class N {
|
|
|
488
494
|
s = this.carModel.clone();
|
|
489
495
|
break;
|
|
490
496
|
}
|
|
491
|
-
const
|
|
497
|
+
const e = this.materialMap.get(t.vehicleColor) || this.defaultMaterial;
|
|
492
498
|
let i = !1;
|
|
493
499
|
s.traverse((o) => {
|
|
494
|
-
!i && o instanceof a.Mesh && (o.material =
|
|
500
|
+
!i && o instanceof a.Mesh && (o.material = e, i = !0);
|
|
495
501
|
});
|
|
496
502
|
}
|
|
497
503
|
return s;
|
|
@@ -500,20 +506,20 @@ class N {
|
|
|
500
506
|
/**
|
|
501
507
|
* 创建号牌canvas
|
|
502
508
|
* */
|
|
503
|
-
createCanvas(
|
|
504
|
-
const i = document.createElement("canvas"), o =
|
|
509
|
+
createCanvas(t, s, e) {
|
|
510
|
+
const i = document.createElement("canvas"), o = t.width, l = t.height;
|
|
505
511
|
i.width = o, i.height = l;
|
|
506
512
|
const r = i.getContext("2d");
|
|
507
513
|
if (!r) {
|
|
508
514
|
console.log("canvas创建失败");
|
|
509
515
|
return;
|
|
510
516
|
}
|
|
511
|
-
return r.fillStyle = "rgba(0,0,0,0.0)", r.fillRect(0, 0, o, l), r.drawImage(
|
|
517
|
+
return r.fillStyle = "rgba(0,0,0,0.0)", r.fillRect(0, 0, o, l), r.drawImage(t, 0, 0, o, l), r.beginPath(), r.translate(o / 2, l / 2), r.fillStyle = e, r.font = "bold 32px 宋体", r.textBaseline = "middle", r.textAlign = "center", r.fillText(s, 0, 0), i;
|
|
512
518
|
}
|
|
513
|
-
createPlateSprite(
|
|
514
|
-
return new Promise((s,
|
|
519
|
+
createPlateSprite(t) {
|
|
520
|
+
return new Promise((s, e) => {
|
|
515
521
|
var h, n;
|
|
516
|
-
const i = !
|
|
522
|
+
const i = !t.plateNo || t.plateNo === "0" || t.plateNo === "000000";
|
|
517
523
|
if (this.currentSpriteContent === m.None || this.currentSpriteContent === m.PlateNumber && i) {
|
|
518
524
|
s(void 0);
|
|
519
525
|
return;
|
|
@@ -521,9 +527,9 @@ class N {
|
|
|
521
527
|
let o = new Image(), l = "", r = "";
|
|
522
528
|
if (this.currentSpriteContent === m.PlateNumber || this.currentSpriteContent === m.Mix)
|
|
523
529
|
if (i)
|
|
524
|
-
o = this.greyPlateBG, l =
|
|
530
|
+
o = this.greyPlateBG, l = t.ptcId, r = "#ffffff";
|
|
525
531
|
else
|
|
526
|
-
switch (l = ((h =
|
|
532
|
+
switch (l = ((h = t.showName) == null ? void 0 : h.substring(0, 2)) + "•" + ((n = t.showName) == null ? void 0 : n.substring(2)), t.plateColor) {
|
|
527
533
|
case 1:
|
|
528
534
|
o = this.bluePlateBG, r = "#ffffff";
|
|
529
535
|
break;
|
|
@@ -543,11 +549,11 @@ class N {
|
|
|
543
549
|
o = this.neoGreenPlateBG, r = "#000000";
|
|
544
550
|
break;
|
|
545
551
|
default:
|
|
546
|
-
o = this.greyPlateBG, l =
|
|
552
|
+
o = this.greyPlateBG, l = t.plateNo, r = "#ffffff";
|
|
547
553
|
break;
|
|
548
554
|
}
|
|
549
555
|
else
|
|
550
|
-
this.currentSpriteContent === m.Id && (o = this.greyPlateBG, l =
|
|
556
|
+
this.currentSpriteContent === m.Id && (o = this.greyPlateBG, l = t.ptcId, r = "#ffffff");
|
|
551
557
|
const d = this.createCanvas(o, l, r);
|
|
552
558
|
if (d) {
|
|
553
559
|
const p = new a.CanvasTexture(d), c = new a.SpriteMaterial({
|
|
@@ -556,15 +562,15 @@ class N {
|
|
|
556
562
|
}), g = new a.Sprite(c), u = 0.05, M = d.width * u, P = d.height * u;
|
|
557
563
|
g.scale.set(M, P, 1), g.name = "VehiclePlate", s(g);
|
|
558
564
|
} else {
|
|
559
|
-
|
|
565
|
+
e("canvas创建失败");
|
|
560
566
|
return;
|
|
561
567
|
}
|
|
562
568
|
o.onerror = (p) => {
|
|
563
|
-
console.log(`号牌背景加载失败: ${o.src}`, p),
|
|
569
|
+
console.log(`号牌背景加载失败: ${o.src}`, p), e(p);
|
|
564
570
|
};
|
|
565
571
|
});
|
|
566
572
|
}
|
|
567
573
|
}
|
|
568
574
|
export {
|
|
569
|
-
|
|
575
|
+
O as default
|
|
570
576
|
};
|
|
@@ -2,7 +2,7 @@ import c from "@arcgis/core/Graphic";
|
|
|
2
2
|
import p from "@arcgis/core/layers/GraphicsLayer";
|
|
3
3
|
import { toRaw as m } from "vue";
|
|
4
4
|
import g from "../../stores/index.mjs";
|
|
5
|
-
class
|
|
5
|
+
class P {
|
|
6
6
|
constructor(i) {
|
|
7
7
|
this.appDataStore = g.useAppDataStore, this.logTable = [
|
|
8
8
|
[
|
|
@@ -148,7 +148,7 @@ class M {
|
|
|
148
148
|
e.waitForDelete ? (this.vehicleLayer.remove(e.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (e.segmentStartTime = void 0, e.segmentTotalTime = void 0, e.graphic.visible = !1, e.isMoving = !1);
|
|
149
149
|
return;
|
|
150
150
|
} else
|
|
151
|
-
e.segmentStartTime = Date.now(), e.segmentTotalTime = t[1].time - t[0].time, (t[1].heading
|
|
151
|
+
e.segmentStartTime = Date.now(), e.segmentTotalTime = t[1].time - t[0].time, Math.abs(t[1].heading - t[0].heading) > 180 && (t[1].heading > t[0].heading ? t[0].heading += 360 : t[1].heading += 360), e.graphic.geometry = {
|
|
152
152
|
type: "point",
|
|
153
153
|
x: t[0].pos[0],
|
|
154
154
|
y: t[0].pos[1]
|
|
@@ -314,7 +314,7 @@ class M {
|
|
|
314
314
|
e = "black";
|
|
315
315
|
break;
|
|
316
316
|
}
|
|
317
|
-
return { pic: "/car/" + e + ".png", size:
|
|
317
|
+
return { pic: "/car/" + e + ".png", size: 20 };
|
|
318
318
|
}
|
|
319
319
|
}
|
|
320
320
|
/**
|
|
@@ -351,5 +351,5 @@ class M {
|
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
export {
|
|
354
|
-
|
|
354
|
+
P as default
|
|
355
355
|
};
|