gisviewer-vue3-arcgis 1.0.284 → 1.0.285
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/index.mjs +6 -5
- package/es/src/gis-map/gis-map.vue.d.ts +124 -1
- package/es/src/gis-map/gis-map.vue.mjs +63 -63
- package/es/src/gis-map/index.d.ts +124 -1
- package/es/src/gis-map/utils/edpass-device-controller.mjs +278 -0
- package/es/src/gis-map/utils/green-wave-band-controller/index.mjs +362 -0
- package/es/src/gis-map/utils/holo-flow/index.mjs +101 -0
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.d.ts +125 -0
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.mjs +153 -0
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue2.mjs +4 -0
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.mjs +336 -0
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow.mjs +236 -0
- package/es/src/gis-map/utils/holo-flow/trace-holo-flow.mjs +106 -0
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.mjs +576 -0
- package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs +386 -0
- package/es/src/gis-map/utils/index.mjs +2 -2
- package/es/src/gis-map/utils/police-jurisdiction.mjs +202 -0
- package/es/src/gis-map/utils/road-config-tool/cross.mjs +127 -0
- package/es/src/gis-map/utils/road-config-tool/entrance.mjs +79 -0
- package/es/src/gis-map/utils/road-config-tool/exit.mjs +86 -0
- package/es/src/gis-map/utils/road-config-tool/index.mjs +112 -0
- package/es/src/gis-map/utils/road-config-tool/indicator-area.mjs +44 -0
- package/es/src/gis-map/utils/road-config-tool/lane.mjs +35 -0
- package/es/src/gis-map/utils/road-config-tool/search-nearby-lanes.mjs +265 -0
- package/es/src/gis-map/utils/signal-control-area/cross-renderer.mjs +593 -0
- package/es/src/gis-map/utils/signal-control-area/district-controller.mjs +84 -0
- package/es/src/gis-map/utils/signal-control-area/district-renderer.mjs +122 -0
- package/es/src/gis-map/utils/signal-control-area/edit-area.mjs +550 -0
- package/es/src/gis-map/utils/signal-control-area/layer-symbol.mjs +984 -0
- package/es/src/gis-map/utils/signal-control-area/signal-area-controller.mjs +140 -0
- package/es/src/gis-map/utils/signal-control-area/signal-cross-controller.mjs +423 -0
- package/es/src/gis-map/utils/signal-control-area/signal-renderer.mjs +123 -0
- package/es/src/gis-map/utils/signal-control-area/sub-district-renderer.mjs +367 -0
- package/es/src/gis-map/utils/signal-system/signal-system-controller.mjs +137 -0
- package/es/src/gis-map/utils/sketchViewTool.mjs +503 -0
- package/es/src/gis-map-ol/gis-map-ol.vue.d.ts +50 -0
- package/es/src/gis-map-ol/gis-map-ol.vue.mjs +67 -0
- package/es/src/gis-map-ol/gis-map-ol.vue2.mjs +4 -0
- package/es/src/gis-map-ol/gis-map-ol.vue3.mjs +5 -0
- package/es/src/gis-map-ol/index.d.ts +44 -1
- package/es/src/gis-map-ol/index.mjs +8 -0
- package/es/src/gis-map-ol/utils/ol-map-initializer.d.ts +28 -0
- package/es/src/gis-map-ol/utils/ol-map-initializer.mjs +129 -0
- package/es/src/gis-map-ol/utils/signal-control/signal-cross-controller.d.ts +42 -0
- package/es/src/gis-map-ol/utils/signal-control/signal-cross-controller.mjs +263 -0
- package/es/src/index.mjs +4 -4
- package/es/src/types/index.mjs +5 -0
- package/lib/index.js +1 -1
- package/lib/src/gis-map/gis-map.vue.d.ts +124 -1
- package/lib/src/gis-map/gis-map.vue.js +1 -1
- package/lib/src/gis-map/index.d.ts +124 -1
- package/lib/src/gis-map/utils/edpass-device-controller.js +1 -0
- package/lib/src/gis-map/utils/green-wave-band-controller/index.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/index.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.d.ts +125 -0
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue2.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/trace-holo-flow.js +2 -0
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-layer.js +1 -0
- package/lib/src/gis-map/utils/index.js +1 -1
- package/lib/src/gis-map/utils/police-jurisdiction.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/cross.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/entrance.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/exit.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/index.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/indicator-area.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/lane.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/search-nearby-lanes.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/cross-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/district-controller.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/district-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/edit-area.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/layer-symbol.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/signal-area-controller.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/signal-cross-controller.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/signal-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/sub-district-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-system/signal-system-controller.js +1 -0
- package/lib/src/gis-map/utils/sketchViewTool.js +1 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue.d.ts +50 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue.js +1 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue2.js +1 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue3.js +1 -0
- package/lib/src/gis-map-ol/index.d.ts +44 -1
- package/lib/src/gis-map-ol/index.js +1 -0
- package/lib/src/gis-map-ol/utils/ol-map-initializer.d.ts +28 -0
- package/lib/src/gis-map-ol/utils/ol-map-initializer.js +1 -0
- package/lib/src/gis-map-ol/utils/signal-control/signal-cross-controller.d.ts +42 -0
- package/lib/src/gis-map-ol/utils/signal-control/signal-cross-controller.js +1 -0
- package/lib/src/index.js +1 -1
- package/lib/src/types/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
import * as m from "@arcgis/core/core/reactiveUtils";
|
|
2
|
+
import { Point as u } from "@arcgis/core/geometry";
|
|
3
|
+
import * as g from "@arcgis/core/geometry/support/webMercatorUtils.js";
|
|
4
|
+
import L from "@arcgis/core/Graphic";
|
|
5
|
+
import b from "@arcgis/core/layers/GraphicsLayer";
|
|
6
|
+
import M from "./signal-holo-flow.mjs";
|
|
7
|
+
class G extends M {
|
|
8
|
+
constructor(e, o) {
|
|
9
|
+
var s, n;
|
|
10
|
+
super(e), this.waitingAreaLayer = new b(), this.watchHandle = null, this.trajectoryDelayTime = 2, this.stopLineMap = /* @__PURE__ */ new Map(), this.waitingAreaMap = /* @__PURE__ */ new Map(), this.lampGroupMap = /* @__PURE__ */ new Map(), this.countdownPanelProps = o, this.view.map.add(this.waitingAreaLayer), this.trajectoryDelayTime = (n = (s = this.mapConfig.holoFlow) == null ? void 0 : s.signal) == null ? void 0 : n.delay, this.trajectoryDelayTime === void 0 && (this.trajectoryDelayTime = 2);
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* 读取停止线图层,将灯组面板沿着停止线放置
|
|
14
|
+
* @returns
|
|
15
|
+
*/
|
|
16
|
+
async initializeLayer() {
|
|
17
|
+
var n, a, i, r, t;
|
|
18
|
+
if (this.stopLineMap.size > 0)
|
|
19
|
+
return;
|
|
20
|
+
console.time("初始化停止线图层");
|
|
21
|
+
let e = (a = (n = this.mapConfig.holoFlow) == null ? void 0 : n.signal) == null ? void 0 : a.stopLineLayer;
|
|
22
|
+
if (!e)
|
|
23
|
+
return;
|
|
24
|
+
e = this.mapConfig.assetsRoot + "/" + e;
|
|
25
|
+
let o = await fetch(e), s = await o.json();
|
|
26
|
+
for (const l of s.features) {
|
|
27
|
+
const { roadId: c, nodeId: h } = l.properties;
|
|
28
|
+
let { destinationPoint: p } = l.properties;
|
|
29
|
+
const { coordinates: f } = l.geometry;
|
|
30
|
+
if (p) {
|
|
31
|
+
if (typeof p == "string")
|
|
32
|
+
try {
|
|
33
|
+
p = JSON.parse(p);
|
|
34
|
+
} catch (d) {
|
|
35
|
+
console.error("解析面板基准点失败", d);
|
|
36
|
+
continue;
|
|
37
|
+
}
|
|
38
|
+
} else {
|
|
39
|
+
const d = f[0], w = f[f.length - 1], y = (d[0] + w[0]) / 2, P = (d[1] + w[1]) / 2;
|
|
40
|
+
p = [y, P];
|
|
41
|
+
}
|
|
42
|
+
this.stopLineMap.set(`${h}_${c}`, {
|
|
43
|
+
coord: f,
|
|
44
|
+
panelPoint: p
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
if (console.timeEnd("初始化停止线图层"), console.time("初始化待行区图层"), e = (r = (i = this.mapConfig.holoFlow) == null ? void 0 : i.signal) == null ? void 0 : r.waitingAreaLayer, !!e) {
|
|
48
|
+
e = this.mapConfig.assetsRoot + "/" + e, o = await fetch(e), s = await o.json();
|
|
49
|
+
for (const l of s.features) {
|
|
50
|
+
const { roadId: c, direction: h, nodeId: p } = l.properties, { coordinates: f } = l.geometry, d = `${p}_${c}`;
|
|
51
|
+
this.waitingAreaMap.has(d) || this.waitingAreaMap.set(d, []), (t = this.waitingAreaMap.get(d)) == null || t.push({ coord: f, direction: h });
|
|
52
|
+
}
|
|
53
|
+
console.timeEnd("初始化待行区图层");
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* 初始化灯组与进口道的关联关系
|
|
58
|
+
*/
|
|
59
|
+
initializeLampGroup(e) {
|
|
60
|
+
const { sigId: o, lampGroupList: s } = e, n = [];
|
|
61
|
+
s.forEach((a) => {
|
|
62
|
+
const { lampGroupNo: i, lampGroupType: r, crossFlowList: t, pedList: l } = a;
|
|
63
|
+
if (t.length > 0)
|
|
64
|
+
for (const c of t) {
|
|
65
|
+
if (r === 81)
|
|
66
|
+
continue;
|
|
67
|
+
const h = c.upSectionId;
|
|
68
|
+
let p = "s";
|
|
69
|
+
switch (c.turn) {
|
|
70
|
+
case 1:
|
|
71
|
+
p = "s";
|
|
72
|
+
break;
|
|
73
|
+
case 2:
|
|
74
|
+
p = "l";
|
|
75
|
+
break;
|
|
76
|
+
case 4:
|
|
77
|
+
p = "r";
|
|
78
|
+
break;
|
|
79
|
+
case 8:
|
|
80
|
+
p = "u";
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
n.push({
|
|
84
|
+
lampGroupId: i,
|
|
85
|
+
roadId: h,
|
|
86
|
+
dir: p
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
l.length > 0;
|
|
90
|
+
}), this.lampGroupMap.set(o, n);
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* 处理统一信控平台信号灯数据
|
|
94
|
+
* @param data
|
|
95
|
+
*/
|
|
96
|
+
handleUniSignalData(e) {
|
|
97
|
+
this.watchHandle || (this.watchHandle = m.watch(
|
|
98
|
+
() => this.view.extent,
|
|
99
|
+
() => this.updatePanelPosition()
|
|
100
|
+
));
|
|
101
|
+
const { sigId: o, runningStatus: s } = e.data.basicInfo, n = this.lampGroupMap.get(o);
|
|
102
|
+
if (!n)
|
|
103
|
+
return { status: -1, message: "灯组未初始化" };
|
|
104
|
+
const a = /* @__PURE__ */ new Map();
|
|
105
|
+
let i = !1;
|
|
106
|
+
switch (String(s)) {
|
|
107
|
+
case "4": {
|
|
108
|
+
i = !0, n.forEach((r) => {
|
|
109
|
+
const { roadId: t, dir: l } = r;
|
|
110
|
+
a.set(t, {
|
|
111
|
+
...a.get(t) || {},
|
|
112
|
+
[`${l}Number`]: "",
|
|
113
|
+
[`${l}Color`]: "yellow"
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
break;
|
|
117
|
+
}
|
|
118
|
+
case "5": {
|
|
119
|
+
n.forEach((r) => {
|
|
120
|
+
const { roadId: t, dir: l } = r;
|
|
121
|
+
a.set(t, {
|
|
122
|
+
...a.get(t) || {},
|
|
123
|
+
[`${l}Number`]: "",
|
|
124
|
+
[`${l}Color`]: "red"
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
break;
|
|
128
|
+
}
|
|
129
|
+
case "6":
|
|
130
|
+
case "9": {
|
|
131
|
+
n.forEach((r) => {
|
|
132
|
+
const { roadId: t, dir: l } = r;
|
|
133
|
+
a.set(t, {
|
|
134
|
+
...a.get(t) || {},
|
|
135
|
+
[`${l}Number`]: "",
|
|
136
|
+
[`${l}Color`]: "off"
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
break;
|
|
140
|
+
}
|
|
141
|
+
default: {
|
|
142
|
+
const { curSigColorInfo: r } = e.data;
|
|
143
|
+
r.forEach((t) => {
|
|
144
|
+
const l = String(t.lamgroupId), { color: c, leftTime: h } = t, p = n.find(
|
|
145
|
+
(f) => f.lampGroupId === l
|
|
146
|
+
);
|
|
147
|
+
if (p) {
|
|
148
|
+
const { roadId: f, dir: d } = p;
|
|
149
|
+
a.set(f, {
|
|
150
|
+
...a.get(f) || {},
|
|
151
|
+
[`${d}Number`]: h,
|
|
152
|
+
[`${d}Color`]: c === 1 ? "red" : c === 2 ? "yellow" : "green"
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
return this.updateLampGroupPanelStatus(o, a, i), { status: 0, message: "ok" };
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* 根据地图比例尺计算灯组面板缩放比例
|
|
162
|
+
*/
|
|
163
|
+
getPanelScale() {
|
|
164
|
+
const e = this.view.scale;
|
|
165
|
+
let o = 1;
|
|
166
|
+
return e < 500 ? o = 1.2 : e < 1e3 ? o = 1 : e < 2e3 ? o = 0.8 : e < 4e3 ? o = 0.4 : o = 0, o;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* 地图移动时更新灯组面板位置
|
|
170
|
+
*/
|
|
171
|
+
updatePanelPosition() {
|
|
172
|
+
const e = this.getPanelScale();
|
|
173
|
+
for (const o of this.countdownPanelProps) {
|
|
174
|
+
e !== this.currentPanelScale && (o.scale = e);
|
|
175
|
+
const { mapPoint: s } = o;
|
|
176
|
+
let n = new u({
|
|
177
|
+
x: s[0],
|
|
178
|
+
y: s[1]
|
|
179
|
+
});
|
|
180
|
+
this.view.spatialReference.isWebMercator && (n = g.geographicToWebMercator(
|
|
181
|
+
n
|
|
182
|
+
));
|
|
183
|
+
const a = this.view.toScreen(n);
|
|
184
|
+
if (o.position.left = a.x, o.position.top = a.y, this.view.type === "3d") {
|
|
185
|
+
const i = this.getPanelRotation(o.stopLine);
|
|
186
|
+
o.rotation = i;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
this.currentPanelScale = e;
|
|
190
|
+
}
|
|
191
|
+
doHoloSignalData(e) {
|
|
192
|
+
const o = e.crossId, s = e.showWaitingArea === !0, n = e.phaseCountDownList, a = /* @__PURE__ */ new Map();
|
|
193
|
+
for (const i of n) {
|
|
194
|
+
let r = "";
|
|
195
|
+
for (let h of i.roadIdList)
|
|
196
|
+
if (h.startsWith("-") && (h = h.slice(1)), this.stopLineMap.has(`${o}_${h}`)) {
|
|
197
|
+
r = `${o}_${h}`;
|
|
198
|
+
break;
|
|
199
|
+
}
|
|
200
|
+
if (!r) {
|
|
201
|
+
console.log(`没有找到对应的进口道${o}--${r}`);
|
|
202
|
+
continue;
|
|
203
|
+
}
|
|
204
|
+
let t = a.get(r);
|
|
205
|
+
if (t || (t = {}, a.set(r, t)), !i.direction)
|
|
206
|
+
continue;
|
|
207
|
+
const l = i.direction.toLowerCase(), c = i.color === 1 ? "red" : i.color === 2 ? "yellow" : "green";
|
|
208
|
+
l === "u" ? (t.uNumber = i.leftTime, t.uColor = c) : l === "l" ? (t.lNumber = i.leftTime, t.lColor = c) : l === "s" ? (t.sNumber = i.leftTime, t.sColor = c) : l === "r" && (t.rNumber = i.leftTime, t.rColor = c);
|
|
209
|
+
}
|
|
210
|
+
this.updateLampGroupPanelStatus(o, a), s ? (this.updateWaitingArea(o, a), this.waitingAreaLayer.visible = !0) : this.waitingAreaLayer.visible = !1;
|
|
211
|
+
}
|
|
212
|
+
updateWaitingArea(e, o) {
|
|
213
|
+
o.forEach((s, n) => {
|
|
214
|
+
var a;
|
|
215
|
+
if (s.lColor) {
|
|
216
|
+
let i = this.waitingAreaLayer.graphics.find(
|
|
217
|
+
(r) => r.attributes.roadId === n && r.attributes.direction === "l"
|
|
218
|
+
);
|
|
219
|
+
if (i)
|
|
220
|
+
i.attributes.color !== s.lColor && (i.attributes.color = s.lColor, i.symbol = {
|
|
221
|
+
type: "simple-fill",
|
|
222
|
+
color: this.getColor(s.lColor),
|
|
223
|
+
outline: {
|
|
224
|
+
color: this.getColor(s.lColor)
|
|
225
|
+
}
|
|
226
|
+
});
|
|
227
|
+
else {
|
|
228
|
+
const r = (a = this.waitingAreaMap.get(n)) == null ? void 0 : a.find((t) => t.direction === "l");
|
|
229
|
+
r && (i = new L({
|
|
230
|
+
geometry: { type: "polygon", rings: r.coord },
|
|
231
|
+
attributes: {
|
|
232
|
+
roadId: n,
|
|
233
|
+
direction: "l",
|
|
234
|
+
color: s.lColor
|
|
235
|
+
},
|
|
236
|
+
symbol: {
|
|
237
|
+
type: "simple-fill",
|
|
238
|
+
color: this.getColor(s.lColor),
|
|
239
|
+
outline: {
|
|
240
|
+
color: this.getColor(s.lColor)
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
}), this.waitingAreaLayer.add(i));
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
});
|
|
247
|
+
}
|
|
248
|
+
getColor(e) {
|
|
249
|
+
return e === "green" ? [0, 255, 0, 0.8] : e === "yellow" ? [255, 192, 2, 0.8] : [255, 0, 0, 0.8];
|
|
250
|
+
}
|
|
251
|
+
updateLampGroupPanelStatus(e, o, s = !1) {
|
|
252
|
+
o.forEach((n, a) => {
|
|
253
|
+
const i = this.stopLineMap.get(a);
|
|
254
|
+
if (!i)
|
|
255
|
+
return;
|
|
256
|
+
const r = this.countdownPanelProps.find(
|
|
257
|
+
(t) => t.roadId === a
|
|
258
|
+
);
|
|
259
|
+
if (r)
|
|
260
|
+
r.lampStatus = n, r.flash = s;
|
|
261
|
+
else {
|
|
262
|
+
let t = new u({
|
|
263
|
+
x: i.panelPoint[0],
|
|
264
|
+
y: i.panelPoint[1]
|
|
265
|
+
});
|
|
266
|
+
this.view.spatialReference.isWebMercator && (t = g.geographicToWebMercator(
|
|
267
|
+
t
|
|
268
|
+
));
|
|
269
|
+
const l = this.view.toScreen(t), c = this.getPanelRotation(i.coord);
|
|
270
|
+
this.countdownPanelProps.push({
|
|
271
|
+
displayMode: "complex",
|
|
272
|
+
flash: s,
|
|
273
|
+
crossId: e,
|
|
274
|
+
roadId: a,
|
|
275
|
+
mapPoint: i.panelPoint,
|
|
276
|
+
// 定位点地理坐标
|
|
277
|
+
stopLine: i.coord,
|
|
278
|
+
// 关联的停止线坐标
|
|
279
|
+
position: { left: l.x, top: l.y },
|
|
280
|
+
// 定位点屏幕坐标
|
|
281
|
+
rotation: c,
|
|
282
|
+
// 面板旋转角度
|
|
283
|
+
scale: this.getPanelScale(),
|
|
284
|
+
lampStatus: n
|
|
285
|
+
// 灯组状态
|
|
286
|
+
});
|
|
287
|
+
}
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
/**
|
|
291
|
+
* 处理全息流信号灯数据
|
|
292
|
+
* @param data
|
|
293
|
+
* @returns
|
|
294
|
+
*/
|
|
295
|
+
async handleHoloSignalData(e) {
|
|
296
|
+
this.watchHandle || (this.watchHandle = m.watch(
|
|
297
|
+
() => this.view.extent,
|
|
298
|
+
() => this.updatePanelPosition()
|
|
299
|
+
)), this.trajectoryDelayTime === 0 ? this.doHoloSignalData(e) : setTimeout(
|
|
300
|
+
() => this.doHoloSignalData(e),
|
|
301
|
+
this.trajectoryDelayTime * 1e3
|
|
302
|
+
);
|
|
303
|
+
}
|
|
304
|
+
clearSignal() {
|
|
305
|
+
var e;
|
|
306
|
+
this.waitingAreaLayer.removeAll(), this.countdownPanelProps.length = 0, (e = this.watchHandle) == null || e.remove(), this.watchHandle = null;
|
|
307
|
+
}
|
|
308
|
+
/**
|
|
309
|
+
* 从停止线坐标计算面板旋转角度
|
|
310
|
+
* @param coordinates
|
|
311
|
+
* @returns
|
|
312
|
+
*/
|
|
313
|
+
getPanelRotation(e) {
|
|
314
|
+
const o = e[0];
|
|
315
|
+
let s = new u({
|
|
316
|
+
x: o[0],
|
|
317
|
+
y: o[1]
|
|
318
|
+
});
|
|
319
|
+
this.view.spatialReference.isWebMercator && (s = g.geographicToWebMercator(
|
|
320
|
+
s
|
|
321
|
+
));
|
|
322
|
+
const n = this.view.toScreen(s), a = e[e.length - 1];
|
|
323
|
+
let i = new u({
|
|
324
|
+
x: a[0],
|
|
325
|
+
y: a[1]
|
|
326
|
+
});
|
|
327
|
+
this.view.spatialReference.isWebMercator && (i = g.geographicToWebMercator(
|
|
328
|
+
i
|
|
329
|
+
));
|
|
330
|
+
const r = this.view.toScreen(i), t = r.x - n.x, l = r.y - n.y;
|
|
331
|
+
return Math.atan2(l, t) * (180 / Math.PI);
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
export {
|
|
335
|
+
G as default
|
|
336
|
+
};
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import * as c from "@arcgis/core/core/reactiveUtils";
|
|
2
|
+
import { Point as d } from "@arcgis/core/geometry";
|
|
3
|
+
import p from "@arcgis/core/layers/FeatureLayer";
|
|
4
|
+
import { toRaw as u } from "vue";
|
|
5
|
+
import y from "../../../stores/index.mjs";
|
|
6
|
+
class C {
|
|
7
|
+
constructor(e) {
|
|
8
|
+
this.currentPhaseMap = /* @__PURE__ */ new Map(), this.countdownCanvasMap = /* @__PURE__ */ new Map(), this.lastDataTime = 0, this.isDeletingCanvas = !1, this.canvasWidth = 80, this.canvasHeight = 40, this.view = (e.type === "2d", e);
|
|
9
|
+
const t = y.useAppDataStore;
|
|
10
|
+
this.mapConfig = u(t.mapConfig);
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* 初始化相位线图层
|
|
14
|
+
* */
|
|
15
|
+
async initializeLayer() {
|
|
16
|
+
try {
|
|
17
|
+
await this.initializePlateBackground();
|
|
18
|
+
} catch (e) {
|
|
19
|
+
console.log("倒计时背景图片加载失败", e);
|
|
20
|
+
}
|
|
21
|
+
if (this.mapConfig.phaseLineLayer)
|
|
22
|
+
if (this.phaseLineLayer)
|
|
23
|
+
this.phaseLineLayer.visible || (this.phaseLineLayer.visible = !0);
|
|
24
|
+
else {
|
|
25
|
+
const e = `${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`, s = (await (await fetch(e)).json()).features.map((i, n) => ({
|
|
26
|
+
geometry: {
|
|
27
|
+
type: "polyline",
|
|
28
|
+
paths: [i.geometry.coordinates]
|
|
29
|
+
},
|
|
30
|
+
attributes: {
|
|
31
|
+
ObjectID: n + 1,
|
|
32
|
+
id: i.properties.id,
|
|
33
|
+
color: "hide"
|
|
34
|
+
}
|
|
35
|
+
}));
|
|
36
|
+
this.phaseLineLayer = new p({
|
|
37
|
+
source: s,
|
|
38
|
+
geometryType: "polyline",
|
|
39
|
+
objectIdField: "ObjectID",
|
|
40
|
+
outFields: ["*"],
|
|
41
|
+
fields: [
|
|
42
|
+
{
|
|
43
|
+
name: "ObjectID",
|
|
44
|
+
alias: "ObjectID",
|
|
45
|
+
type: "oid"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "color",
|
|
49
|
+
alias: "color",
|
|
50
|
+
type: "string"
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
renderer: {
|
|
54
|
+
type: "unique-value",
|
|
55
|
+
field: "color",
|
|
56
|
+
// 没更新相位数据的路口不显示相位线
|
|
57
|
+
defaultSymbol: {
|
|
58
|
+
type: "simple-line",
|
|
59
|
+
color: "lightblue",
|
|
60
|
+
width: "2px",
|
|
61
|
+
style: "none"
|
|
62
|
+
},
|
|
63
|
+
uniqueValueInfos: [
|
|
64
|
+
{
|
|
65
|
+
value: "green",
|
|
66
|
+
symbol: {
|
|
67
|
+
type: "line-3d",
|
|
68
|
+
symbolLayers: [
|
|
69
|
+
{
|
|
70
|
+
type: "path",
|
|
71
|
+
profile: "quad",
|
|
72
|
+
material: { color: [19, 255, 69, 0.8] },
|
|
73
|
+
width: 1,
|
|
74
|
+
height: 0.5
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
value: "red",
|
|
81
|
+
symbol: {
|
|
82
|
+
type: "line-3d",
|
|
83
|
+
symbolLayers: [
|
|
84
|
+
{
|
|
85
|
+
type: "path",
|
|
86
|
+
profile: "quad",
|
|
87
|
+
material: { color: [254, 5, 9, 0.8] },
|
|
88
|
+
width: 1,
|
|
89
|
+
height: 0.5
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
value: "yellow",
|
|
96
|
+
symbol: {
|
|
97
|
+
type: "line-3d",
|
|
98
|
+
symbolLayers: [
|
|
99
|
+
{
|
|
100
|
+
type: "path",
|
|
101
|
+
profile: "quad",
|
|
102
|
+
material: { color: [255, 215, 0, 0.8] },
|
|
103
|
+
width: 1,
|
|
104
|
+
height: 0.5
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
}), this.view.map.add(this.phaseLineLayer), console.log("相位线图层初始化成功");
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
async initializePlateBackground() {
|
|
115
|
+
return new Promise((e, t) => {
|
|
116
|
+
const a = new Image();
|
|
117
|
+
a.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, a.onload = () => {
|
|
118
|
+
this.plateBackground = a, e();
|
|
119
|
+
}, a.onerror = (s) => {
|
|
120
|
+
t(s);
|
|
121
|
+
};
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
async handleHoloSignalData(e) {
|
|
125
|
+
const { crossId: t, lat: a, lon: s, rtStage: i, channelsConfig: n } = e;
|
|
126
|
+
await this.updateCountdown(t, a, s, i), !(!this.phaseLineLayer || !n) && ((!this.currentPhaseMap.has(t) || this.currentPhaseMap.get(t) !== i.stagePhase) && await this.updatePhaseLine(
|
|
127
|
+
t,
|
|
128
|
+
i.channelsConfig,
|
|
129
|
+
n
|
|
130
|
+
), this.currentPhaseMap.set(t, i.stagePhase));
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* 清除实时信号相关图层
|
|
134
|
+
* */
|
|
135
|
+
clearSignal() {
|
|
136
|
+
this.phaseLineLayer && (this.phaseLineLayer.visible = !1), this.countdownWatchHandel && (this.countdownWatchHandel.remove(), this.countdownWatchHandel = void 0), this.countdownCanvasMap.forEach((e) => {
|
|
137
|
+
this.view.container.removeChild(e.backgroundCanvas), this.view.container.removeChild(e.countdownCanvas);
|
|
138
|
+
}), this.countdownCanvasMap.clear();
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* 获取显示倒计时的canvas
|
|
142
|
+
* */
|
|
143
|
+
async updateCountdown(e, t, a, s) {
|
|
144
|
+
if (this.isDeletingCanvas)
|
|
145
|
+
return;
|
|
146
|
+
const i = this.countdownCanvasMap.get(e);
|
|
147
|
+
if (i)
|
|
148
|
+
this.drawCountdownText(i.countdownCanvas, s);
|
|
149
|
+
else
|
|
150
|
+
try {
|
|
151
|
+
const n = new d({
|
|
152
|
+
longitude: a,
|
|
153
|
+
latitude: t,
|
|
154
|
+
z: 10
|
|
155
|
+
}), o = this.view.toScreen(n), l = this.createCountdownCanvas();
|
|
156
|
+
if (!l)
|
|
157
|
+
return;
|
|
158
|
+
const h = l[0], r = l[1];
|
|
159
|
+
h.style.left = o.x + "px", h.style.top = o.y + "px", r.style.left = o.x + "px", r.style.top = o.y + "px", this.countdownCanvasMap.set(e, {
|
|
160
|
+
backgroundCanvas: h,
|
|
161
|
+
countdownCanvas: r,
|
|
162
|
+
mapPoint: n
|
|
163
|
+
}), this.drawCountdownText(r, s);
|
|
164
|
+
} catch (n) {
|
|
165
|
+
console.log("倒计时canvas创建失败", e, n);
|
|
166
|
+
}
|
|
167
|
+
this.countdownWatchHandel || (this.countdownWatchHandel = c.watch(
|
|
168
|
+
() => this.view.extent,
|
|
169
|
+
() => {
|
|
170
|
+
this.countdownCanvasMap.forEach((n) => {
|
|
171
|
+
const o = this.view.toScreen(n.mapPoint);
|
|
172
|
+
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";
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
));
|
|
176
|
+
}
|
|
177
|
+
/**
|
|
178
|
+
* 在倒计时面板上写入倒计时时间
|
|
179
|
+
* @param canvas 倒计时面板canvas
|
|
180
|
+
* @param rtStage 相位数据
|
|
181
|
+
* @param rtStage.stageID 相位名
|
|
182
|
+
* @param rtStage.stageRemainingTime 剩余时间
|
|
183
|
+
* @param rtStage.stageAllRedTime 全红时间
|
|
184
|
+
* @param rtStage.stageYellowTime 黄灯时间
|
|
185
|
+
*/
|
|
186
|
+
drawCountdownText(e, t) {
|
|
187
|
+
const a = e.getContext("2d");
|
|
188
|
+
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(
|
|
189
|
+
t.stageRemainingTime.toFixed(0),
|
|
190
|
+
e.width / 2,
|
|
191
|
+
e.height / 2
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
async updatePhaseLine(e, t, a) {
|
|
195
|
+
const s = this.phaseLineLayer.source.filter(
|
|
196
|
+
(i) => i.getAttribute("id").includes(e)
|
|
197
|
+
);
|
|
198
|
+
s.forEach((i) => {
|
|
199
|
+
const n = i.getAttribute("id");
|
|
200
|
+
this.isLaneInChannels(n, t) ? i.setAttribute("color", "green") : this.isLaneInChannels(n, a) ? i.setAttribute("color", "red") : i.setAttribute("color", "green");
|
|
201
|
+
}), await this.phaseLineLayer.applyEdits({ updateFeatures: s });
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* 车道是否在通道中
|
|
205
|
+
* @param laneCode 车道编码
|
|
206
|
+
* @param channels 通道列表
|
|
207
|
+
* @returns
|
|
208
|
+
*/
|
|
209
|
+
isLaneInChannels(e, t) {
|
|
210
|
+
const a = e.split("+"), s = a[1], i = a[2];
|
|
211
|
+
for (let n = 0; n < t.length; n++)
|
|
212
|
+
for (let o = 0; o < t[n].laneSnList.length; o++) {
|
|
213
|
+
const l = t[n].laneSnList[o].toFixed(0);
|
|
214
|
+
if (s === l[0] && i === l[1])
|
|
215
|
+
return !0;
|
|
216
|
+
}
|
|
217
|
+
return !1;
|
|
218
|
+
}
|
|
219
|
+
createCountdownCanvas() {
|
|
220
|
+
const e = document.createElement("canvas");
|
|
221
|
+
e.width = this.canvasWidth, e.height = this.canvasHeight, e.style.position = "absolute", e.style.transform = "translate(-50%, -50%)";
|
|
222
|
+
const t = e.getContext("2d");
|
|
223
|
+
this.plateBackground ? t.drawImage(
|
|
224
|
+
this.plateBackground,
|
|
225
|
+
0,
|
|
226
|
+
0,
|
|
227
|
+
this.canvasWidth,
|
|
228
|
+
this.canvasHeight
|
|
229
|
+
) : (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);
|
|
230
|
+
const a = document.createElement("canvas");
|
|
231
|
+
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];
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
export {
|
|
235
|
+
C as default
|
|
236
|
+
};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import * as g from "@arcgis/core/views/3d/externalRenderers";
|
|
2
|
+
import f from "./trace-renderer-external.mjs";
|
|
3
|
+
import R from "./trace-renderer-layer.mjs";
|
|
4
|
+
class V {
|
|
5
|
+
constructor(e) {
|
|
6
|
+
this.nullDataCount = 0, this.clearTraceTimer = null, e.type === "3d" ? (this.traceRenderer = new f(e), g.add(
|
|
7
|
+
e,
|
|
8
|
+
this.traceRenderer
|
|
9
|
+
)) : this.traceRenderer = new R(e);
|
|
10
|
+
}
|
|
11
|
+
async init() {
|
|
12
|
+
await this.traceRenderer.init();
|
|
13
|
+
}
|
|
14
|
+
downloadLog() {
|
|
15
|
+
const e = this.traceRenderer.getLog().map((o) => o.join(",")).join(`
|
|
16
|
+
`).replace(/null/g, ""), n = new Blob([e], { type: "text/csv;charset=utf-8;" }), i = URL.createObjectURL(n), r = document.createElement("a");
|
|
17
|
+
r.setAttribute("href", i), r.setAttribute("download", "trace-log.csv"), r.style.visibility = "hidden", document.body.appendChild(r), r.click(), document.body.removeChild(r);
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* 处理全息流轨迹数据
|
|
21
|
+
* */
|
|
22
|
+
async handleVehicleTraceData(e) {
|
|
23
|
+
this.clearTraceTimer || (this.clearTraceTimer = setInterval(() => {
|
|
24
|
+
this.nullDataCount++, this.nullDataCount >= 5 && (console.log("clear trace data"), this.clearTrace(), this.nullDataCount = 0);
|
|
25
|
+
}, 1e3)), this.nullDataCount = 0;
|
|
26
|
+
const { newVehList: n, updateVehList: i, deleteVehList: r, jgsj: o } = e, l = e.crossId || "", a = [], s = [];
|
|
27
|
+
if (n && n.length > 0) {
|
|
28
|
+
for (const c of n) {
|
|
29
|
+
c.localTimestamp || (c.localTimestamp = o || Date.now());
|
|
30
|
+
const t = this.buildVehicleTrackData(c, l);
|
|
31
|
+
t && a.push(t);
|
|
32
|
+
}
|
|
33
|
+
await this.traceRenderer.addVehicles(a);
|
|
34
|
+
}
|
|
35
|
+
if (i && i.length > 0) {
|
|
36
|
+
for (const c of i) {
|
|
37
|
+
const t = this.buildVehicleTrackData(c, l);
|
|
38
|
+
t && s.push(t);
|
|
39
|
+
}
|
|
40
|
+
await this.traceRenderer.updateVehicles(s);
|
|
41
|
+
}
|
|
42
|
+
if (r && r.length > 0) {
|
|
43
|
+
const c = r.map(
|
|
44
|
+
(t) => l + "-" + (t.ptcId || t.vehno || t.vehNo)
|
|
45
|
+
);
|
|
46
|
+
this.traceRenderer.deleteVehicles(c);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* 切换交通信息可见性
|
|
51
|
+
* @param params
|
|
52
|
+
*/
|
|
53
|
+
toggleTrafficInfo(e) {
|
|
54
|
+
this.traceRenderer.toggleTrafficInfo(e);
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* 清除轨迹流
|
|
58
|
+
* */
|
|
59
|
+
clearTrace() {
|
|
60
|
+
this.clearTraceTimer && (clearInterval(this.clearTraceTimer), this.clearTraceTimer = null), this.traceRenderer.clearVehicles();
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* 切换暂停
|
|
64
|
+
* */
|
|
65
|
+
togglePause(e) {
|
|
66
|
+
this.traceRenderer.togglePause(e);
|
|
67
|
+
}
|
|
68
|
+
updatePanelContent(e) {
|
|
69
|
+
this.traceRenderer.updatePanelContent(e);
|
|
70
|
+
}
|
|
71
|
+
toggleGroundVehicle(e) {
|
|
72
|
+
this.traceRenderer.toggleGroundVehicle(e);
|
|
73
|
+
}
|
|
74
|
+
toggleElevatedVehicle(e) {
|
|
75
|
+
this.traceRenderer.toggleElevatedVehicle(e);
|
|
76
|
+
}
|
|
77
|
+
setInterpolate(e) {
|
|
78
|
+
this.traceRenderer.setInterpolate(e);
|
|
79
|
+
}
|
|
80
|
+
buildVehicleTrackData(e, n) {
|
|
81
|
+
const i = e.longitude, r = e.latitude, o = e.ptcId, l = Number(e.ptcType), a = e.heading, s = Number(e.vehicleType), c = Number(e.vehicleColor), t = e.plateNo || e.plateno, h = Number(e.plateColor), d = e.timestamp, u = e.localTimestamp, p = e.roadLayer ? String(e.roadLayer) : "1", m = e.step, T = e.speed;
|
|
82
|
+
if (!(l < 0 || l > 8))
|
|
83
|
+
return {
|
|
84
|
+
ptcId: o,
|
|
85
|
+
crossId: n,
|
|
86
|
+
vehicleId: n + "-" + o,
|
|
87
|
+
x: i,
|
|
88
|
+
y: r,
|
|
89
|
+
ptcType: l,
|
|
90
|
+
vehicleType: s,
|
|
91
|
+
heading: l === 2 ? -a : a,
|
|
92
|
+
vehicleColor: c,
|
|
93
|
+
showName: t && t !== "" && t !== "0" && t !== "000000" ? t : "",
|
|
94
|
+
plateNo: t,
|
|
95
|
+
plateColor: h,
|
|
96
|
+
timestamp: d,
|
|
97
|
+
localTimestamp: u,
|
|
98
|
+
roadLayer: p,
|
|
99
|
+
step: m,
|
|
100
|
+
speed: T
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
export {
|
|
105
|
+
V as default
|
|
106
|
+
};
|