gisviewer-vue3-arcgis 1.0.110 → 1.0.112
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/trace-holo-flow.mjs +105 -78
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.d.ts +1 -0
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.mjs +224 -244
- package/es/src/gis-map/utils/holo-flow/vehicle-pool.d.ts +41 -0
- package/es/src/gis-map/utils/holo-flow/vehicle-pool.mjs +180 -0
- package/es/src/types/index.d.ts +10 -0
- package/lib/src/gis-map/utils/holo-flow/trace-holo-flow.js +2 -2
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.d.ts +1 -0
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/vehicle-pool.d.ts +41 -0
- package/lib/src/gis-map/utils/holo-flow/vehicle-pool.js +1 -0
- package/lib/src/types/index.d.ts +10 -0
- package/package.json +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as v from "@arcgis/core/core/promiseUtils.js";
|
|
2
2
|
import * as b from "@arcgis/core/core/reactiveUtils.js";
|
|
3
|
-
import
|
|
3
|
+
import M from "@arcgis/core/geometry/SpatialReference";
|
|
4
4
|
import * as u from "@arcgis/core/views/3d/externalRenderers";
|
|
5
|
-
import * as
|
|
6
|
-
import { GLTFLoader as y } from "three/examples/jsm/loaders/GLTFLoader.js";
|
|
5
|
+
import * as c from "three";
|
|
7
6
|
import { EVehiclePlateState as d } from "../../../types/index.mjs";
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
import y from "../../stores/index.mjs";
|
|
8
|
+
import G from "./vehicle-pool.mjs";
|
|
9
|
+
class R {
|
|
10
|
+
constructor(e) {
|
|
11
|
+
this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new c.MeshPhongMaterial({
|
|
12
12
|
color: 16777215
|
|
13
|
-
}), this.materialMap = /* @__PURE__ */ new Map([
|
|
13
|
+
}), this.vehiclePool = new G(), this.materialMap = /* @__PURE__ */ new Map([
|
|
14
14
|
[1, this.createCarMaterial(16777215)],
|
|
15
15
|
[2, this.createCarMaterial(7833753)],
|
|
16
16
|
[3, this.createCarMaterial(16766720)],
|
|
@@ -23,52 +23,69 @@ class I {
|
|
|
23
23
|
[10, this.createCarMaterial(9662683)],
|
|
24
24
|
[99, this.createCarMaterial(6908265)]
|
|
25
25
|
]), this.isInitialized = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.isPaused = !1, this.currentSpriteContent = d.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0, this.updateModel = !1;
|
|
26
|
-
const
|
|
26
|
+
const t = y.useAppDataStore;
|
|
27
27
|
this.assetsRoot = JSON.parse(
|
|
28
|
-
JSON.stringify(
|
|
29
|
-
).assetsRoot, this.view =
|
|
28
|
+
JSON.stringify(t.mapConfig)
|
|
29
|
+
).assetsRoot, this.view = e, b.watch(
|
|
30
30
|
() => this.view.camera.position.z,
|
|
31
|
-
(
|
|
32
|
-
(
|
|
31
|
+
(i, o) => {
|
|
32
|
+
(o <= this.cameraHeightThreshold && i > this.cameraHeightThreshold || o > this.cameraHeightThreshold && i <= this.cameraHeightThreshold) && (this.updateModel = !0);
|
|
33
33
|
}
|
|
34
34
|
);
|
|
35
35
|
}
|
|
36
|
-
createCarMaterial(
|
|
37
|
-
return new
|
|
38
|
-
color:
|
|
36
|
+
createCarMaterial(e) {
|
|
37
|
+
return new c.MeshPhongMaterial({
|
|
38
|
+
color: e
|
|
39
39
|
// // emissive: 0xc3c3c3,
|
|
40
40
|
// roughness: this.roughness,
|
|
41
41
|
// metalness: this.metalness
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
44
|
async init() {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
})
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}),
|
|
45
|
+
await this.vehiclePool.initPool(this.assetsRoot, this.view), await v.eachAlways([
|
|
46
|
+
// new Promise<void>((resolve) => {
|
|
47
|
+
// gltfLoader.load(`${this.assetsRoot}/3DModels/car.glb`, (gltf) => {
|
|
48
|
+
// this.carModel = gltf.scene;
|
|
49
|
+
// // this.carModel.scale.set(10, 10, 10);
|
|
50
|
+
// // 调整模型初始角度
|
|
51
|
+
// this.carModel.rotation.x = Three.MathUtils.degToRad(90);
|
|
52
|
+
// resolve();
|
|
53
|
+
// });
|
|
54
|
+
// }),
|
|
55
|
+
// new Promise<void>((resolve) => {
|
|
56
|
+
// gltfLoader.load(`${this.assetsRoot}/3DModels/van.glb`, (gltf) => {
|
|
57
|
+
// this.vanModel = gltf.scene;
|
|
58
|
+
// // 调整模型初始角度
|
|
59
|
+
// this.vanModel.rotation.x = Three.MathUtils.degToRad(90);
|
|
60
|
+
// resolve();
|
|
61
|
+
// });
|
|
62
|
+
// }),
|
|
63
|
+
// new Promise<void>((resolve) => {
|
|
64
|
+
// gltfLoader.load(`${this.assetsRoot}/3DModels/truck.glb`, (gltf) => {
|
|
65
|
+
// this.truckModel = gltf.scene;
|
|
66
|
+
// this.truckModel.scale.set(1.2, 1, 1.5);
|
|
67
|
+
// // 调整模型初始角度
|
|
68
|
+
// this.truckModel.rotation.x = Three.MathUtils.degToRad(90);
|
|
69
|
+
// resolve();
|
|
70
|
+
// });
|
|
71
|
+
// }),
|
|
72
|
+
// new Promise<void>((resolve) => {
|
|
73
|
+
// gltfLoader.load(`${this.assetsRoot}/3DModels/bus.glb`, (gltf) => {
|
|
74
|
+
// this.busModel = gltf.scene;
|
|
75
|
+
// // 调整模型初始角度
|
|
76
|
+
// this.busModel.rotation.x = Three.MathUtils.degToRad(90);
|
|
77
|
+
// resolve();
|
|
78
|
+
// });
|
|
79
|
+
// }),
|
|
80
|
+
// new Promise<void>((resolve) => {
|
|
81
|
+
// gltfLoader.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (gltf) => {
|
|
82
|
+
// this.bicycleModel = gltf.scene;
|
|
83
|
+
// // 调整模型初始角度
|
|
84
|
+
// this.bicycleModel.rotation.x = Three.MathUtils.degToRad(90);
|
|
85
|
+
// this.bicycleModel.rotation.y = Three.MathUtils.degToRad(180);
|
|
86
|
+
// resolve();
|
|
87
|
+
// });
|
|
88
|
+
// }),
|
|
72
89
|
new Promise((e) => {
|
|
73
90
|
this.bluePlateBG = new Image(), this.bluePlateBG.src = `${this.assetsRoot}/Images/PlateBG/blue.png`, this.bluePlateBG.onload = () => {
|
|
74
91
|
e();
|
|
@@ -106,79 +123,79 @@ class I {
|
|
|
106
123
|
})
|
|
107
124
|
]), this.isInitialized = !0;
|
|
108
125
|
}
|
|
109
|
-
setInterpolate(
|
|
110
|
-
this.clearVehicles(), this.needInterpolate =
|
|
126
|
+
setInterpolate(e) {
|
|
127
|
+
this.clearVehicles(), this.needInterpolate = e;
|
|
111
128
|
}
|
|
112
|
-
async setup(
|
|
113
|
-
this.context =
|
|
114
|
-
context:
|
|
129
|
+
async setup(e) {
|
|
130
|
+
this.context = e, this.renderer = new c.WebGLRenderer({
|
|
131
|
+
context: e.gl,
|
|
115
132
|
premultipliedAlpha: !0,
|
|
116
133
|
logarithmicDepthBuffer: !0,
|
|
117
134
|
antialias: !0,
|
|
118
135
|
powerPreference: "high-performance"
|
|
119
136
|
}), 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;
|
|
120
|
-
const
|
|
137
|
+
const t = this.renderer.setRenderTarget.bind(
|
|
121
138
|
this.renderer
|
|
122
139
|
);
|
|
123
|
-
this.renderer.setRenderTarget = (
|
|
124
|
-
|
|
125
|
-
}, this.scene = new
|
|
126
|
-
const { camera:
|
|
127
|
-
this.camera = new
|
|
128
|
-
|
|
129
|
-
|
|
140
|
+
this.renderer.setRenderTarget = (o) => {
|
|
141
|
+
t(o), o == null && e.bindRenderTarget();
|
|
142
|
+
}, this.scene = new c.Scene();
|
|
143
|
+
const { camera: i } = e;
|
|
144
|
+
this.camera = new c.PerspectiveCamera(
|
|
145
|
+
i.fovY,
|
|
146
|
+
i.aspect,
|
|
130
147
|
0.1,
|
|
131
148
|
1e5
|
|
132
|
-
), this.ambient = new
|
|
149
|
+
), this.ambient = new c.AmbientLight(16777215, 2), this.scene.add(this.ambient), this.sun = new c.DirectionalLight(16777215, 2), this.scene.add(this.sun), e.resetWebGLState();
|
|
133
150
|
}
|
|
134
|
-
async render(
|
|
135
|
-
var
|
|
136
|
-
const
|
|
137
|
-
if (this.camera.position.set(
|
|
138
|
-
new
|
|
139
|
-
), this.camera.projectionMatrix.fromArray(
|
|
151
|
+
async render(e) {
|
|
152
|
+
var o;
|
|
153
|
+
const t = e.camera;
|
|
154
|
+
if (this.camera.position.set(t.eye[0], t.eye[1], t.eye[2]), this.camera.up.set(t.up[0], t.up[1], t.up[2]), this.camera.lookAt(
|
|
155
|
+
new c.Vector3(t.center[0], t.center[1], t.center[2])
|
|
156
|
+
), this.camera.projectionMatrix.fromArray(t.projectionMatrix), !this.isPaused && this.needInterpolate)
|
|
140
157
|
for (const a of this.vehicleObjectMap.keys()) {
|
|
141
|
-
const n = (
|
|
158
|
+
const n = (o = this.vehicleObjectMap.get(a)) == null ? void 0 : o.model;
|
|
142
159
|
if (!n)
|
|
143
160
|
continue;
|
|
144
|
-
const
|
|
145
|
-
if (
|
|
146
|
-
const
|
|
147
|
-
n.position.set(
|
|
161
|
+
const s = this.computeVehiclePosition(a);
|
|
162
|
+
if (s) {
|
|
163
|
+
const l = this.toRenderCoordinates(s);
|
|
164
|
+
n.position.set(l[0], l[1], l[2]), n.rotation.y = c.MathUtils.degToRad(-s[3]);
|
|
148
165
|
}
|
|
149
166
|
}
|
|
150
|
-
const
|
|
151
|
-
this.sun.position.set(
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
), this.ambient.intensity =
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
), this.renderer.resetState(),
|
|
167
|
+
const i = e.sunLight;
|
|
168
|
+
this.sun.position.set(i.direction[0], i.direction[1], i.direction[2]), this.sun.intensity = i.diffuse.intensity, this.sun.color = new c.Color(
|
|
169
|
+
i.diffuse.color[0],
|
|
170
|
+
i.diffuse.color[1],
|
|
171
|
+
i.diffuse.color[2]
|
|
172
|
+
), this.ambient.intensity = i.ambient.intensity, this.ambient.color = new c.Color(
|
|
173
|
+
i.ambient.color[0],
|
|
174
|
+
i.ambient.color[1],
|
|
175
|
+
i.ambient.color[2]
|
|
176
|
+
), this.renderer.resetState(), e.bindRenderTarget(), this.renderer.render(this.scene, this.camera), u.requestRender(this.view), e.resetWebGLState();
|
|
160
177
|
}
|
|
161
178
|
/**
|
|
162
179
|
* 新增车辆
|
|
163
180
|
* */
|
|
164
|
-
async addVehicles(
|
|
181
|
+
async addVehicles(e) {
|
|
165
182
|
if (!(this.isPaused || !this.isInitialized))
|
|
166
|
-
for (const
|
|
167
|
-
const { vehicleId:
|
|
168
|
-
this.historyPositionMap.set(
|
|
169
|
-
{ pos: [a, n, 0], heading:
|
|
183
|
+
for (const t of e) {
|
|
184
|
+
const { vehicleId: i, localTimestamp: o } = t, a = Number(t.x), n = Number(t.y), s = Number(t.heading);
|
|
185
|
+
this.historyPositionMap.set(i, [
|
|
186
|
+
{ pos: [a, n, 0], heading: s, time: o }
|
|
170
187
|
]);
|
|
171
|
-
const
|
|
172
|
-
|
|
188
|
+
const l = this.getVehicleModel(t);
|
|
189
|
+
l.name = i, l.visible = !1;
|
|
173
190
|
try {
|
|
174
|
-
const r = await this.createPlateSprite(
|
|
175
|
-
r && (
|
|
191
|
+
const r = await this.createPlateSprite(t);
|
|
192
|
+
r && (l.add(r), r.position.set(0, 5, -4));
|
|
176
193
|
} catch (r) {
|
|
177
194
|
console.log("createPlateSprite error:", r);
|
|
178
195
|
}
|
|
179
|
-
this.scene.add(
|
|
180
|
-
model:
|
|
181
|
-
data:
|
|
196
|
+
this.scene.add(l), this.vehicleObjectMap.set(i, {
|
|
197
|
+
model: l,
|
|
198
|
+
data: t,
|
|
182
199
|
waitForDelete: !1,
|
|
183
200
|
isMoving: !1
|
|
184
201
|
});
|
|
@@ -187,90 +204,90 @@ class I {
|
|
|
187
204
|
/**
|
|
188
205
|
* 更新车辆
|
|
189
206
|
* */
|
|
190
|
-
async updateVehicles(
|
|
207
|
+
async updateVehicles(e) {
|
|
191
208
|
if (this.isPaused || !this.isInitialized)
|
|
192
209
|
return;
|
|
193
|
-
const
|
|
194
|
-
for (const
|
|
195
|
-
const { vehicleId:
|
|
196
|
-
let
|
|
197
|
-
const r = this.vehicleObjectMap.get(
|
|
198
|
-
|
|
210
|
+
const t = [];
|
|
211
|
+
for (const i of e) {
|
|
212
|
+
const { vehicleId: o, timestamp: a } = i, n = Number(i.x), s = Number(i.y);
|
|
213
|
+
let l = Number(i.heading);
|
|
214
|
+
const r = this.vehicleObjectMap.get(o), p = this.historyPositionMap.get(
|
|
215
|
+
o
|
|
199
216
|
);
|
|
200
|
-
if (!r || !
|
|
201
|
-
|
|
217
|
+
if (!r || !p)
|
|
218
|
+
t.push(i);
|
|
202
219
|
else {
|
|
203
|
-
if (
|
|
204
|
-
this.
|
|
205
|
-
const
|
|
206
|
-
|
|
220
|
+
if (this.updateModel || r.data.vehicleColor !== i.vehicleColor || r.data.vehicleType !== i.vehicleType) {
|
|
221
|
+
this.vehiclePool.recycleInstance(r.model), r.model = this.getVehicleModel(i), r.model.visible = !0;
|
|
222
|
+
const h = await this.createPlateSprite(i);
|
|
223
|
+
h && (r.model.add(h), h.position.set(0, 5, -4)), this.scene.add(r.model);
|
|
207
224
|
}
|
|
208
|
-
if (r.data.showName !==
|
|
209
|
-
const
|
|
210
|
-
|
|
211
|
-
const
|
|
212
|
-
|
|
225
|
+
if (r.data.showName !== i.showName || r.data.plateColor !== i.plateColor) {
|
|
226
|
+
const h = r.model.getObjectByName("VehiclePlate");
|
|
227
|
+
h && (r.model.remove(h), this.disposeModel(h));
|
|
228
|
+
const m = await this.createPlateSprite(i);
|
|
229
|
+
m && (r.model.add(m), m.position.set(0, 5, -4));
|
|
213
230
|
}
|
|
214
|
-
if (r.data =
|
|
215
|
-
const
|
|
216
|
-
Math.abs(
|
|
217
|
-
pos: [n,
|
|
218
|
-
heading:
|
|
231
|
+
if (r.data = i, this.needInterpolate) {
|
|
232
|
+
const h = p[p.length - 1];
|
|
233
|
+
Math.abs(l - h.heading) >= 180 && (l > h.heading ? h.heading += 360 : l += 360), p.push({
|
|
234
|
+
pos: [n, s, 0],
|
|
235
|
+
heading: l,
|
|
219
236
|
time: a
|
|
220
237
|
});
|
|
221
238
|
} else {
|
|
222
|
-
this.historyPositionMap.set(
|
|
223
|
-
{ pos: [n,
|
|
239
|
+
this.historyPositionMap.set(o, [
|
|
240
|
+
{ pos: [n, s, 0], heading: l, time: a }
|
|
224
241
|
]);
|
|
225
|
-
const
|
|
226
|
-
r.model.position.set(
|
|
242
|
+
const h = this.toRenderCoordinates([n, s, 0]);
|
|
243
|
+
r.model.position.set(h[0], h[1], h[2]), r.model.rotation.y = c.MathUtils.degToRad(-l);
|
|
227
244
|
}
|
|
228
245
|
}
|
|
229
246
|
}
|
|
230
|
-
await this.addVehicles(
|
|
247
|
+
await this.addVehicles(t), this.updateModel = !1, this.needInterpolate || this.render(this.context);
|
|
231
248
|
}
|
|
232
|
-
toRenderCoordinates(
|
|
233
|
-
const
|
|
249
|
+
toRenderCoordinates(e) {
|
|
250
|
+
const t = [0, 0, 0];
|
|
234
251
|
return u.toRenderCoordinates(
|
|
235
252
|
// @ts-ignore
|
|
236
253
|
this.view,
|
|
237
|
-
i,
|
|
238
|
-
0,
|
|
239
|
-
v.WGS84,
|
|
240
254
|
e,
|
|
241
255
|
0,
|
|
256
|
+
M.WGS84,
|
|
257
|
+
t,
|
|
258
|
+
0,
|
|
242
259
|
1
|
|
243
|
-
),
|
|
260
|
+
), t;
|
|
244
261
|
}
|
|
245
262
|
/**
|
|
246
263
|
* 删除车辆
|
|
247
264
|
* */
|
|
248
|
-
deleteVehicles(
|
|
249
|
-
this.isPaused ||
|
|
250
|
-
const
|
|
251
|
-
|
|
265
|
+
deleteVehicles(e) {
|
|
266
|
+
this.isPaused || e.forEach((t) => {
|
|
267
|
+
const i = this.vehicleObjectMap.get(t);
|
|
268
|
+
i && (this.needInterpolate ? i.isMoving ? i.waitForDelete = !0 : this.deleteVehicle(i) : this.deleteVehicle(i));
|
|
252
269
|
});
|
|
253
270
|
}
|
|
254
|
-
deleteVehicle(
|
|
255
|
-
this.
|
|
256
|
-
const
|
|
257
|
-
this.vehicleObjectMap.delete(
|
|
271
|
+
deleteVehicle(e) {
|
|
272
|
+
this.vehiclePool.recycleInstance(e.model);
|
|
273
|
+
const t = e.data.vehicleId;
|
|
274
|
+
this.vehicleObjectMap.delete(t), this.historyPositionMap.delete(t);
|
|
258
275
|
}
|
|
259
|
-
async toggleTrafficInfo(
|
|
260
|
-
|
|
261
|
-
|
|
276
|
+
async toggleTrafficInfo(e) {
|
|
277
|
+
e.name === "vehiclePlate" && (e.visible === !0 && this.currentSpriteContent === d.None ? await this.updatePanelContent(d.PlateNumber) : await this.updatePanelContent(
|
|
278
|
+
e.visible ? this.currentSpriteContent : d.None
|
|
262
279
|
));
|
|
263
280
|
}
|
|
264
|
-
togglePause(
|
|
265
|
-
this.isPaused =
|
|
281
|
+
togglePause(e) {
|
|
282
|
+
this.isPaused = e;
|
|
266
283
|
}
|
|
267
284
|
/**
|
|
268
285
|
* 清除全部车辆
|
|
269
286
|
* */
|
|
270
287
|
clearVehicles() {
|
|
271
|
-
for (const
|
|
272
|
-
const
|
|
273
|
-
|
|
288
|
+
for (const e of this.vehicleObjectMap.keys()) {
|
|
289
|
+
const t = this.vehicleObjectMap.get(e);
|
|
290
|
+
t && this.vehiclePool.recycleInstance(t.model);
|
|
274
291
|
}
|
|
275
292
|
this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
|
|
276
293
|
}
|
|
@@ -279,171 +296,134 @@ class I {
|
|
|
279
296
|
* @param contentType
|
|
280
297
|
* @returns
|
|
281
298
|
*/
|
|
282
|
-
async updatePanelContent(
|
|
283
|
-
if (
|
|
284
|
-
this.currentSpriteContent =
|
|
285
|
-
for (const
|
|
286
|
-
const
|
|
287
|
-
if (
|
|
288
|
-
const
|
|
289
|
-
if (
|
|
290
|
-
const a = await this.createPlateSprite(
|
|
291
|
-
a && (
|
|
299
|
+
async updatePanelContent(e) {
|
|
300
|
+
if (e !== this.currentSpriteContent) {
|
|
301
|
+
this.currentSpriteContent = e;
|
|
302
|
+
for (const t of this.vehicleObjectMap.keys()) {
|
|
303
|
+
const i = this.vehicleObjectMap.get(t);
|
|
304
|
+
if (i) {
|
|
305
|
+
const o = i.model.getObjectByName("VehiclePlate");
|
|
306
|
+
if (o && (i.model.remove(o), this.disposeModel(o)), e !== d.None) {
|
|
307
|
+
const a = await this.createPlateSprite(i.data);
|
|
308
|
+
a && (i.model.add(a), a.position.set(0, 5, -4));
|
|
292
309
|
}
|
|
293
310
|
}
|
|
294
311
|
}
|
|
295
312
|
}
|
|
296
313
|
}
|
|
297
|
-
toggleGroundVehicle(
|
|
298
|
-
console.log("toggleGroundVehicle",
|
|
314
|
+
toggleGroundVehicle(e) {
|
|
315
|
+
console.log("toggleGroundVehicle", e), this.showGroundVehicle = e;
|
|
299
316
|
}
|
|
300
|
-
toggleElevatedVehicle(
|
|
301
|
-
this.showElevatedVehicle =
|
|
317
|
+
toggleElevatedVehicle(e) {
|
|
318
|
+
this.showElevatedVehicle = e;
|
|
302
319
|
}
|
|
303
320
|
/**
|
|
304
321
|
* 释放模型资源
|
|
305
322
|
* */
|
|
306
|
-
disposeModel(
|
|
307
|
-
|
|
308
|
-
|
|
323
|
+
disposeModel(e) {
|
|
324
|
+
e.traverse((t) => {
|
|
325
|
+
t instanceof c.Mesh && (t.geometry.dispose(), t.material.dispose());
|
|
309
326
|
});
|
|
310
327
|
}
|
|
311
328
|
/**
|
|
312
329
|
* 计算车辆位置
|
|
313
330
|
* */
|
|
314
|
-
computeVehiclePosition(
|
|
315
|
-
const
|
|
316
|
-
if (!
|
|
331
|
+
computeVehiclePosition(e) {
|
|
332
|
+
const t = this.historyPositionMap.get(e), i = this.vehicleObjectMap.get(e);
|
|
333
|
+
if (!i || !t || !i.isMoving && t.length <= 2)
|
|
317
334
|
return;
|
|
318
|
-
const
|
|
319
|
-
|
|
320
|
-
const a =
|
|
321
|
-
a /
|
|
335
|
+
const o = Date.now();
|
|
336
|
+
i.isMoving = !0, i.data.roadLayer === "1" ? i.model.visible = this.showGroundVehicle : i.model.visible = this.showElevatedVehicle, i.segmentStartTime || (i.segmentStartTime = o, i.segmentTotalTime = t[1].time - t[0].time);
|
|
337
|
+
const a = o - i.segmentStartTime, n = Math.min(
|
|
338
|
+
a / i.segmentTotalTime,
|
|
322
339
|
1
|
|
323
340
|
);
|
|
324
341
|
if (n === 1)
|
|
325
|
-
if (
|
|
326
|
-
|
|
342
|
+
if (t.shift(), t.length === 1) {
|
|
343
|
+
i.waitForDelete === !0 ? this.deleteVehicle(i) : (i.segmentStartTime = void 0, i.segmentTotalTime = void 0, i.model.visible = !1, i.isMoving = !1, console.log("hide vehicle", e));
|
|
327
344
|
return;
|
|
328
345
|
} else
|
|
329
|
-
return
|
|
330
|
-
else if (
|
|
331
|
-
const
|
|
332
|
-
return [
|
|
346
|
+
return i.segmentStartTime = Date.now(), i.segmentTotalTime = t[1].time - t[0].time, (t[1].heading >= 270 && t[0].heading <= 90 || t[1].heading <= 90 && t[0].heading >= 270) && (t[1].heading > t[0].heading ? t[0].heading += 360 : t[1].heading += 360), t[0].pos.concat(t[0].heading);
|
|
347
|
+
else if (t.length >= 2) {
|
|
348
|
+
const s = t[0].pos[0] + (t[1].pos[0] - t[0].pos[0]) * n, l = t[0].pos[1] + (t[1].pos[1] - t[0].pos[1]) * n, r = t[0].heading + (t[1].heading - t[0].heading) * n;
|
|
349
|
+
return [s, l, 0, r];
|
|
333
350
|
} else
|
|
334
351
|
return;
|
|
335
352
|
}
|
|
336
353
|
/**
|
|
337
354
|
* 根据车辆类型、车身颜色获取模型
|
|
338
355
|
* */
|
|
339
|
-
getVehicleModel(
|
|
340
|
-
|
|
341
|
-
const e = new l.SphereGeometry(5, 32, 32), t = new l.MeshPhysicalMaterial({
|
|
342
|
-
color: 325253,
|
|
343
|
-
emissive: 0,
|
|
344
|
-
roughness: this.roughness,
|
|
345
|
-
metalness: this.metalness
|
|
346
|
-
});
|
|
347
|
-
return new l.Mesh(e, t);
|
|
348
|
-
} else {
|
|
349
|
-
let e;
|
|
350
|
-
if (i.ptcType === 2)
|
|
351
|
-
e = this.bicycleModel.clone();
|
|
352
|
-
else {
|
|
353
|
-
switch (i.vehicleType) {
|
|
354
|
-
case 10:
|
|
355
|
-
e = this.carModel.clone();
|
|
356
|
-
break;
|
|
357
|
-
case 20:
|
|
358
|
-
e = this.vanModel.clone();
|
|
359
|
-
break;
|
|
360
|
-
case 25:
|
|
361
|
-
e = this.truckModel.clone();
|
|
362
|
-
break;
|
|
363
|
-
case 50:
|
|
364
|
-
e = this.busModel.clone();
|
|
365
|
-
break;
|
|
366
|
-
default:
|
|
367
|
-
e = this.carModel.clone();
|
|
368
|
-
break;
|
|
369
|
-
}
|
|
370
|
-
const t = this.materialMap.get(i.vehicleColor) || this.defaultMaterial;
|
|
371
|
-
let s = !1;
|
|
372
|
-
e.traverse((a) => {
|
|
373
|
-
!s && a instanceof l.Mesh && (a.material = t, s = !0);
|
|
374
|
-
});
|
|
375
|
-
}
|
|
376
|
-
return e;
|
|
377
|
-
}
|
|
356
|
+
getVehicleModel(e) {
|
|
357
|
+
return this.vehiclePool.getInstance(e);
|
|
378
358
|
}
|
|
379
359
|
/**
|
|
380
360
|
* 创建号牌canvas
|
|
381
361
|
* */
|
|
382
|
-
createCanvas(
|
|
383
|
-
const
|
|
384
|
-
|
|
385
|
-
const
|
|
386
|
-
if (!
|
|
362
|
+
createCanvas(e, t, i) {
|
|
363
|
+
const o = document.createElement("canvas"), a = e.width, n = e.height;
|
|
364
|
+
o.width = a, o.height = n;
|
|
365
|
+
const s = o.getContext("2d");
|
|
366
|
+
if (!s) {
|
|
387
367
|
console.log("canvas创建失败");
|
|
388
368
|
return;
|
|
389
369
|
}
|
|
390
|
-
return
|
|
370
|
+
return s.fillStyle = "rgba(0,0,0,0.0)", s.fillRect(0, 0, a, n), s.drawImage(e, 0, 0, a, n), s.beginPath(), s.translate(a / 2, n / 2), s.fillStyle = i, s.font = "bold 32px 宋体", s.textBaseline = "middle", s.textAlign = "center", s.fillText(t, 0, 0), o;
|
|
391
371
|
}
|
|
392
|
-
createPlateSprite(
|
|
393
|
-
return new Promise((
|
|
394
|
-
var r,
|
|
395
|
-
const
|
|
396
|
-
if (this.currentSpriteContent === d.None || this.currentSpriteContent === d.PlateNumber &&
|
|
397
|
-
|
|
372
|
+
createPlateSprite(e) {
|
|
373
|
+
return new Promise((t, i) => {
|
|
374
|
+
var r, p;
|
|
375
|
+
const o = !e.plateNo || e.plateNo === "0" || e.plateNo === "000000";
|
|
376
|
+
if (this.currentSpriteContent === d.None || this.currentSpriteContent === d.PlateNumber && o) {
|
|
377
|
+
t(void 0);
|
|
398
378
|
return;
|
|
399
379
|
}
|
|
400
|
-
let a = new Image(), n = "",
|
|
380
|
+
let a = new Image(), n = "", s = "";
|
|
401
381
|
if (this.currentSpriteContent === d.PlateNumber || this.currentSpriteContent === d.Mix)
|
|
402
|
-
if (
|
|
403
|
-
a = this.greyPlateBG, n =
|
|
382
|
+
if (o)
|
|
383
|
+
a = this.greyPlateBG, n = e.ptcId, s = "#ffffff";
|
|
404
384
|
else
|
|
405
|
-
switch (n = ((r =
|
|
385
|
+
switch (n = ((r = e.showName) == null ? void 0 : r.substring(0, 2)) + "•" + ((p = e.showName) == null ? void 0 : p.substring(2)), e.plateColor) {
|
|
406
386
|
case 1:
|
|
407
|
-
a = this.bluePlateBG,
|
|
387
|
+
a = this.bluePlateBG, s = "#ffffff";
|
|
408
388
|
break;
|
|
409
389
|
case 2:
|
|
410
|
-
a = this.yellowPlateBG,
|
|
390
|
+
a = this.yellowPlateBG, s = "#000000";
|
|
411
391
|
break;
|
|
412
392
|
case 3:
|
|
413
|
-
a = this.whitePlateBG,
|
|
393
|
+
a = this.whitePlateBG, s = "#000000";
|
|
414
394
|
break;
|
|
415
395
|
case 4:
|
|
416
|
-
a = this.blackPlateBG,
|
|
396
|
+
a = this.blackPlateBG, s = "#ffffff";
|
|
417
397
|
break;
|
|
418
398
|
case 5:
|
|
419
|
-
a = this.neoYellowPlateBG,
|
|
399
|
+
a = this.neoYellowPlateBG, s = "#000000";
|
|
420
400
|
break;
|
|
421
401
|
case 6:
|
|
422
|
-
a = this.neoGreenPlateBG,
|
|
402
|
+
a = this.neoGreenPlateBG, s = "#000000";
|
|
423
403
|
break;
|
|
424
404
|
default:
|
|
425
|
-
a = this.greyPlateBG, n =
|
|
405
|
+
a = this.greyPlateBG, n = e.plateNo, s = "#ffffff";
|
|
426
406
|
break;
|
|
427
407
|
}
|
|
428
408
|
else
|
|
429
|
-
this.currentSpriteContent === d.Id && (a = this.greyPlateBG, n =
|
|
430
|
-
const
|
|
431
|
-
if (
|
|
432
|
-
const
|
|
433
|
-
map:
|
|
409
|
+
this.currentSpriteContent === d.Id && (a = this.greyPlateBG, n = e.ptcId, s = "#ffffff");
|
|
410
|
+
const l = this.createCanvas(a, n, s);
|
|
411
|
+
if (l) {
|
|
412
|
+
const h = new c.CanvasTexture(l), m = new c.SpriteMaterial({
|
|
413
|
+
map: h,
|
|
434
414
|
transparent: !1
|
|
435
|
-
}),
|
|
436
|
-
|
|
415
|
+
}), f = new c.Sprite(m), g = 0.05, P = l.width * g, w = l.height * g;
|
|
416
|
+
f.scale.set(P, w, 1), f.name = "VehiclePlate", t(f);
|
|
437
417
|
} else {
|
|
438
|
-
|
|
418
|
+
i("canvas创建失败");
|
|
439
419
|
return;
|
|
440
420
|
}
|
|
441
|
-
a.onerror = (
|
|
442
|
-
console.log(`号牌背景加载失败: ${a.src}`,
|
|
421
|
+
a.onerror = (h) => {
|
|
422
|
+
console.log(`号牌背景加载失败: ${a.src}`, h), i(h);
|
|
443
423
|
};
|
|
444
424
|
});
|
|
445
425
|
}
|
|
446
426
|
}
|
|
447
427
|
export {
|
|
448
|
-
|
|
428
|
+
R as default
|
|
449
429
|
};
|