gisviewer-vue3-arcgis 1.0.107 → 1.0.109
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.mjs +88 -88
- package/es/src/gis-map/utils/holo-flow/index.d.ts +1 -0
- package/es/src/gis-map/utils/holo-flow/index.mjs +23 -27
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow.d.ts +2 -0
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow.mjs +69 -57
- package/es/src/gis-map/utils/holo-flow/trace-holo-flow.d.ts +3 -0
- package/es/src/gis-map/utils/holo-flow/trace-holo-flow.mjs +48 -40
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.d.ts +9 -5
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.mjs +168 -127
- package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.d.ts +1 -0
- package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs +3 -0
- package/es/src/gis-map/utils/map-initializer.mjs +4 -4
- package/es/src/types/index.d.ts +1 -0
- package/lib/src/gis-map/gis-map.vue.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/index.d.ts +1 -0
- package/lib/src/gis-map/utils/holo-flow/index.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow.d.ts +2 -0
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/trace-holo-flow.d.ts +3 -0
- package/lib/src/gis-map/utils/holo-flow/trace-holo-flow.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.d.ts +9 -5
- 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.d.ts +1 -0
- 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 -0
- package/package.json +1 -1
|
@@ -1,115 +1,115 @@
|
|
|
1
|
-
import { defineComponent as ae, ref as
|
|
2
|
-
import
|
|
1
|
+
import { defineComponent as ae, ref as ne, onMounted as oe, getCurrentInstance as re, computed as se, openBlock as ce, createElementBlock as ie, createElementVNode as le } from "vue";
|
|
2
|
+
import me, { registerStore as pe } from "./stores/index.mjs";
|
|
3
3
|
import "./style/index.css";
|
|
4
|
-
import
|
|
4
|
+
import ue from "./utils/holo-flow/index.mjs";
|
|
5
5
|
import fe from "./utils/map-initializer.mjs";
|
|
6
6
|
import ge from "./utils/open-drive-renderer/index.mjs";
|
|
7
7
|
import de from "./utils/overlay.mjs";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
const
|
|
8
|
+
import we from "./utils/queue-length.mjs";
|
|
9
|
+
import y from "./utils/road-config-tool/index.mjs";
|
|
10
|
+
import ye from "./utils/traffic-flow.mjs";
|
|
11
|
+
const Ce = { class: "gis-viewer" }, Se = /* @__PURE__ */ ae({
|
|
12
12
|
__name: "gis-map",
|
|
13
13
|
props: {
|
|
14
14
|
config: {},
|
|
15
15
|
assetsRoot: {}
|
|
16
16
|
},
|
|
17
17
|
emits: ["mapLoaded", "markerClick", "mapClick"],
|
|
18
|
-
setup(
|
|
19
|
-
const m =
|
|
20
|
-
let
|
|
21
|
-
|
|
18
|
+
setup(C, { expose: h, emit: v }) {
|
|
19
|
+
const m = ne(null);
|
|
20
|
+
let r, s, a, n, o, t, i, l;
|
|
21
|
+
pe(), oe(async () => {
|
|
22
22
|
if (!m.value)
|
|
23
23
|
return;
|
|
24
|
-
const e =
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
|
|
24
|
+
const e = re(), { $gisviewerAssetsRoot: c } = e.appContext.config.globalProperties, w = await (await fetch(d.config)).json();
|
|
25
|
+
w.assetsRoot = d.assetsRoot || c;
|
|
26
|
+
const ee = me.useAppDataStore;
|
|
27
|
+
ee.mapConfig = w, s = new fe(), r = await s.initialize({
|
|
28
28
|
container: m.value,
|
|
29
|
-
markerClickCallback: (u, f, g,
|
|
30
|
-
p("markerClick", u, f, g,
|
|
29
|
+
markerClickCallback: (u, f, g, te) => {
|
|
30
|
+
p("markerClick", u, f, g, te);
|
|
31
31
|
},
|
|
32
32
|
mapClickCallback: (u, f, g) => {
|
|
33
33
|
p("mapClick", u, f, g);
|
|
34
34
|
}
|
|
35
|
-
}),
|
|
35
|
+
}), o = new ue(r), await o.init(), p("mapLoaded");
|
|
36
36
|
});
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
},
|
|
37
|
+
const O = se(() => r), T = async (e) => await s.setMapCenter(e), k = async (e) => await s.setMapCamera(e), I = async (e) => await s.lookAt(e), b = (e) => s.setLayerVisibility(e), A = (e, c) => s.requestCoordinateTransform(e, c), L = (e) => {
|
|
38
|
+
s.cancelCoordinateTransform(e);
|
|
39
|
+
}, D = (e) => {
|
|
40
|
+
s.setMapZoomRange(e);
|
|
41
|
+
}, S = (e) => (a || (a = new y(r)), a.showLaneNumber(e)), _ = () => {
|
|
42
42
|
a == null || a.clearLaneNumber();
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
},
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
},
|
|
57
|
-
|
|
43
|
+
}, M = async (e) => (a || (a = new y(r)), await a.initializeSearch(e)), R = async () => a == null ? void 0 : a.calCrossIndicatorArea(), V = async () => {
|
|
44
|
+
}, x = async (e, c) => {
|
|
45
|
+
n || (n = new ye(r)), n.connectTrafficFlow(e, c);
|
|
46
|
+
}, B = () => {
|
|
47
|
+
n == null || n.disconnectTrafficFlow();
|
|
48
|
+
}, H = (e) => {
|
|
49
|
+
o.handleVehicleTraceData(e);
|
|
50
|
+
}, z = () => {
|
|
51
|
+
o.clearHoloTrace();
|
|
52
|
+
}, N = (e) => {
|
|
53
|
+
o.setInterpolate(e);
|
|
54
|
+
}, Q = async (e) => {
|
|
55
|
+
await o.handleSignalData(e);
|
|
56
|
+
}, j = () => {
|
|
57
|
+
o.clearHoloSignal();
|
|
58
|
+
}, P = (e) => {
|
|
59
|
+
n == null || n.toggleTrafficInfo(e), o.toggleTrafficInfo(e);
|
|
58
60
|
}, E = (e) => {
|
|
59
|
-
|
|
61
|
+
o.togglePause(e);
|
|
60
62
|
}, Z = (e) => {
|
|
61
|
-
|
|
63
|
+
n == null || n.toggleTrafficObject(e), o.toggleTrafficObject(e);
|
|
62
64
|
}, q = (e) => {
|
|
63
|
-
|
|
64
|
-
}, $ = (e) => {
|
|
65
|
-
t == null || t.
|
|
66
|
-
},
|
|
67
|
-
|
|
68
|
-
},
|
|
69
|
-
i || (i = new ye(s)), i.updateQueueLength(e);
|
|
70
|
-
}, Y = () => {
|
|
65
|
+
o.updatePanelContent(e);
|
|
66
|
+
}, F = async (e) => (t || (t = new de(r)), t.addOverlays(e)), $ = (e) => t == null ? void 0 : t.removeOverlaysByType(e), G = (e) => t == null ? void 0 : t.removeOverlaysById(e), J = () => t == null ? void 0 : t.removeAllOverlays(), K = () => {
|
|
67
|
+
t == null || t.showAllOverlays();
|
|
68
|
+
}, U = (e) => {
|
|
69
|
+
i || (i = new we(r)), i.updateQueueLength(e);
|
|
70
|
+
}, W = () => {
|
|
71
71
|
i == null || i.removeQueueLength();
|
|
72
|
-
},
|
|
73
|
-
l || (l = new ge(
|
|
74
|
-
},
|
|
72
|
+
}, X = async (e, c) => {
|
|
73
|
+
l || (l = new ge(r)), await l.showOpenDrive(e, c);
|
|
74
|
+
}, Y = async () => {
|
|
75
75
|
await (l == null ? void 0 : l.hideOpenDrive());
|
|
76
|
-
},
|
|
77
|
-
return
|
|
78
|
-
mapViewer:
|
|
79
|
-
setLayerVisibility:
|
|
80
|
-
setMapCenter:
|
|
81
|
-
lookAt:
|
|
82
|
-
setMapCamera:
|
|
83
|
-
setMapZoomRange:
|
|
84
|
-
requestCoordinateTransform:
|
|
85
|
-
cancelCoordinateTransform:
|
|
86
|
-
addOverlays:
|
|
87
|
-
showAllOverlays:
|
|
88
|
-
removeOverlaysByType:
|
|
89
|
-
removeOverlaysById:
|
|
90
|
-
removeAllOverlays:
|
|
91
|
-
showLaneNumber:
|
|
92
|
-
clearLaneNumber:
|
|
93
|
-
initializeAreaTool:
|
|
94
|
-
calCrossIndicatorArea:
|
|
95
|
-
calRoadIndicatorArea:
|
|
96
|
-
connectCarFlow:
|
|
97
|
-
disconnectCarFlow:
|
|
98
|
-
handleHoloVehicleTraceData:
|
|
99
|
-
clearHoloTrace:
|
|
100
|
-
handleHoloSignalData:
|
|
101
|
-
clearHoloSignal:
|
|
102
|
-
setInterpolate:
|
|
103
|
-
toggleTrafficInfo:
|
|
104
|
-
toggleTrafficObject:
|
|
105
|
-
toggleVehicleInfo:
|
|
106
|
-
togglePause:
|
|
107
|
-
updateQueueLength:
|
|
108
|
-
removeQueueLength:
|
|
109
|
-
showOpenDrive:
|
|
110
|
-
hideOpenDrive:
|
|
111
|
-
}), (e, c) => (
|
|
112
|
-
|
|
76
|
+
}, d = C, p = v;
|
|
77
|
+
return h({
|
|
78
|
+
mapViewer: O,
|
|
79
|
+
setLayerVisibility: b,
|
|
80
|
+
setMapCenter: T,
|
|
81
|
+
lookAt: I,
|
|
82
|
+
setMapCamera: k,
|
|
83
|
+
setMapZoomRange: D,
|
|
84
|
+
requestCoordinateTransform: A,
|
|
85
|
+
cancelCoordinateTransform: L,
|
|
86
|
+
addOverlays: F,
|
|
87
|
+
showAllOverlays: K,
|
|
88
|
+
removeOverlaysByType: $,
|
|
89
|
+
removeOverlaysById: G,
|
|
90
|
+
removeAllOverlays: J,
|
|
91
|
+
showLaneNumber: S,
|
|
92
|
+
clearLaneNumber: _,
|
|
93
|
+
initializeAreaTool: M,
|
|
94
|
+
calCrossIndicatorArea: R,
|
|
95
|
+
calRoadIndicatorArea: V,
|
|
96
|
+
connectCarFlow: x,
|
|
97
|
+
disconnectCarFlow: B,
|
|
98
|
+
handleHoloVehicleTraceData: H,
|
|
99
|
+
clearHoloTrace: z,
|
|
100
|
+
handleHoloSignalData: Q,
|
|
101
|
+
clearHoloSignal: j,
|
|
102
|
+
setInterpolate: N,
|
|
103
|
+
toggleTrafficInfo: P,
|
|
104
|
+
toggleTrafficObject: Z,
|
|
105
|
+
toggleVehicleInfo: q,
|
|
106
|
+
togglePause: E,
|
|
107
|
+
updateQueueLength: U,
|
|
108
|
+
removeQueueLength: W,
|
|
109
|
+
showOpenDrive: X,
|
|
110
|
+
hideOpenDrive: Y
|
|
111
|
+
}), (e, c) => (ce(), ie("div", Ce, [
|
|
112
|
+
le("div", {
|
|
113
113
|
class: "gis-viewer-main",
|
|
114
114
|
ref_key: "mapContainer",
|
|
115
115
|
ref: m
|
|
@@ -1,73 +1,69 @@
|
|
|
1
|
-
import { EVehiclePlateState as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
class
|
|
1
|
+
import { EVehiclePlateState as l } from "../../../types/index.mjs";
|
|
2
|
+
import a from "./signal-holo-flow.mjs";
|
|
3
|
+
import t from "./trace-holo-flow.mjs";
|
|
4
|
+
class n {
|
|
5
5
|
constructor(e) {
|
|
6
6
|
this.view = e;
|
|
7
7
|
}
|
|
8
|
+
async init() {
|
|
9
|
+
this.traceHoloFlow = new t(this.view), await this.traceHoloFlow.init();
|
|
10
|
+
}
|
|
8
11
|
/**
|
|
9
12
|
* 处理全息流轨迹数据
|
|
10
13
|
* */
|
|
11
14
|
handleVehicleTraceData(e) {
|
|
12
|
-
this.traceHoloFlow
|
|
15
|
+
this.traceHoloFlow.handleVehicleTraceData(e);
|
|
13
16
|
}
|
|
14
17
|
toggleTrafficObject(e) {
|
|
15
|
-
var o, l;
|
|
16
18
|
switch (e.name.toLowerCase()) {
|
|
17
19
|
case "groundVehicle".toLowerCase():
|
|
18
|
-
|
|
20
|
+
this.traceHoloFlow.toggleGroundVehicle(e.visible);
|
|
19
21
|
break;
|
|
20
22
|
case "elevatedVehicle".toLowerCase():
|
|
21
|
-
|
|
23
|
+
this.traceHoloFlow.toggleElevatedVehicle(e.visible);
|
|
22
24
|
break;
|
|
23
25
|
}
|
|
24
26
|
}
|
|
25
27
|
clearHoloTrace() {
|
|
26
|
-
|
|
27
|
-
(e = this.traceHoloFlow) == null || e.clearTrace();
|
|
28
|
+
this.traceHoloFlow.clearTrace();
|
|
28
29
|
}
|
|
29
30
|
// public toggleVehiclePlate(visible: boolean): void {
|
|
30
31
|
// this.traceHoloFlow?.togglePlateLayer(visible);
|
|
31
32
|
// }
|
|
32
33
|
toggleTrafficInfo(e) {
|
|
33
|
-
|
|
34
|
-
(o = this.traceHoloFlow) == null || o.toggleTrafficInfo(e);
|
|
34
|
+
this.traceHoloFlow.toggleTrafficInfo(e);
|
|
35
35
|
}
|
|
36
36
|
togglePause(e) {
|
|
37
|
-
|
|
38
|
-
(o = this.traceHoloFlow) == null || o.togglePause(e);
|
|
37
|
+
this.traceHoloFlow.togglePause(e);
|
|
39
38
|
}
|
|
40
39
|
updatePanelContent(e) {
|
|
41
|
-
|
|
42
|
-
let o = a.None;
|
|
40
|
+
let o = l.None;
|
|
43
41
|
switch (e) {
|
|
44
42
|
case "none":
|
|
45
|
-
o =
|
|
43
|
+
o = l.None;
|
|
46
44
|
break;
|
|
47
45
|
case "plateNumber":
|
|
48
|
-
o =
|
|
46
|
+
o = l.PlateNumber;
|
|
49
47
|
break;
|
|
50
48
|
case "vehicleId":
|
|
51
|
-
o =
|
|
49
|
+
o = l.Id;
|
|
52
50
|
break;
|
|
53
51
|
case "mix":
|
|
54
|
-
o =
|
|
52
|
+
o = l.Mix;
|
|
55
53
|
break;
|
|
56
54
|
}
|
|
57
|
-
|
|
55
|
+
this.traceHoloFlow.updatePanelContent(o);
|
|
58
56
|
}
|
|
59
57
|
async handleSignalData(e) {
|
|
60
|
-
this.signalHoloFlow || (this.signalHoloFlow = new
|
|
58
|
+
this.signalHoloFlow || (this.signalHoloFlow = new a(this.view)), await this.signalHoloFlow.initializeLayer(), await this.signalHoloFlow.handleSignalData(e);
|
|
61
59
|
}
|
|
62
60
|
clearHoloSignal() {
|
|
63
|
-
|
|
64
|
-
(e = this.signalHoloFlow) == null || e.clearSignal();
|
|
61
|
+
this.signalHoloFlow.clearSignal();
|
|
65
62
|
}
|
|
66
63
|
setInterpolate(e) {
|
|
67
|
-
|
|
68
|
-
(o = this.traceHoloFlow) == null || o.setInterpolate(e);
|
|
64
|
+
this.traceHoloFlow.setInterpolate(e);
|
|
69
65
|
}
|
|
70
66
|
}
|
|
71
67
|
export {
|
|
72
|
-
|
|
68
|
+
n as default
|
|
73
69
|
};
|
|
@@ -9,12 +9,14 @@ export default class SignalHoloFlow {
|
|
|
9
9
|
/** 每个路口倒计时canvas */
|
|
10
10
|
private countdownCanvasMap;
|
|
11
11
|
private countdownWatchHandel;
|
|
12
|
+
private plateBackground;
|
|
12
13
|
private lastDataTime;
|
|
13
14
|
constructor(view: View);
|
|
14
15
|
/**
|
|
15
16
|
* 初始化相位线图层
|
|
16
17
|
* */
|
|
17
18
|
initializeLayer(): Promise<void>;
|
|
19
|
+
private initializePlateBackground;
|
|
18
20
|
handleSignalData(data: any): Promise<void>;
|
|
19
21
|
/**
|
|
20
22
|
* 清除实时信号相关图层
|
|
@@ -12,23 +12,23 @@ class f {
|
|
|
12
12
|
* 初始化相位线图层
|
|
13
13
|
* */
|
|
14
14
|
async initializeLayer() {
|
|
15
|
-
if (this.mapConfig.phaseLineLayer)
|
|
15
|
+
if (await this.initializePlateBackground(), !!this.mapConfig.phaseLineLayer)
|
|
16
16
|
if (this.phaseLineLayer)
|
|
17
17
|
this.phaseLineLayer.visible || (this.phaseLineLayer.visible = !0);
|
|
18
18
|
else {
|
|
19
|
-
const e = `${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,
|
|
19
|
+
const e = `${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`, s = (await (await fetch(e)).json()).features.map((n, i) => ({
|
|
20
20
|
geometry: {
|
|
21
21
|
type: "polyline",
|
|
22
|
-
paths: [
|
|
22
|
+
paths: [n.geometry.coordinates]
|
|
23
23
|
},
|
|
24
24
|
attributes: {
|
|
25
|
-
ObjectID:
|
|
26
|
-
id:
|
|
25
|
+
ObjectID: i + 1,
|
|
26
|
+
id: n.properties.id,
|
|
27
27
|
color: "hide"
|
|
28
28
|
}
|
|
29
29
|
}));
|
|
30
30
|
this.phaseLineLayer = new p({
|
|
31
|
-
source:
|
|
31
|
+
source: s,
|
|
32
32
|
geometryType: "polyline",
|
|
33
33
|
objectIdField: "ObjectID",
|
|
34
34
|
outFields: ["*"],
|
|
@@ -105,13 +105,23 @@ class f {
|
|
|
105
105
|
}), this.view.map.add(this.phaseLineLayer);
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
+
async initializePlateBackground() {
|
|
109
|
+
return new Promise((e, a) => {
|
|
110
|
+
const t = new Image();
|
|
111
|
+
t.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, t.onload = () => {
|
|
112
|
+
this.plateBackground = t, e();
|
|
113
|
+
}, t.onerror = (s) => {
|
|
114
|
+
a(s);
|
|
115
|
+
};
|
|
116
|
+
});
|
|
117
|
+
}
|
|
108
118
|
async handleSignalData(e) {
|
|
109
|
-
const { crossId: a, lat:
|
|
110
|
-
await this.updateCountdown(a,
|
|
119
|
+
const { crossId: a, lat: t, lon: s, rtStage: n, channelsConfig: i } = e;
|
|
120
|
+
await this.updateCountdown(a, t, s, n), !(!this.phaseLineLayer || !i) && ((!this.currentPhaseMap.has(a) || this.currentPhaseMap.get(a) !== n.stagePhase) && await this.updatePhaseLine(
|
|
111
121
|
a,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
), this.currentPhaseMap.set(a,
|
|
122
|
+
n.channelsConfig,
|
|
123
|
+
i
|
|
124
|
+
), this.currentPhaseMap.set(a, n.stagePhase));
|
|
115
125
|
}
|
|
116
126
|
/**
|
|
117
127
|
* 清除实时信号相关图层
|
|
@@ -124,33 +134,36 @@ class f {
|
|
|
124
134
|
/**
|
|
125
135
|
* 获取显示倒计时的canvas
|
|
126
136
|
* */
|
|
127
|
-
async updateCountdown(e, a,
|
|
137
|
+
async updateCountdown(e, a, t, s) {
|
|
128
138
|
if (this.isDeletingCanvas)
|
|
129
139
|
return;
|
|
130
|
-
const
|
|
131
|
-
if (
|
|
132
|
-
this.drawCountdownText(
|
|
140
|
+
const n = this.countdownCanvasMap.get(e);
|
|
141
|
+
if (n)
|
|
142
|
+
this.drawCountdownText(n.countdownCanvas, s);
|
|
133
143
|
else
|
|
134
144
|
try {
|
|
135
|
-
const
|
|
136
|
-
longitude:
|
|
145
|
+
const i = new c({
|
|
146
|
+
longitude: t,
|
|
137
147
|
latitude: a,
|
|
138
148
|
z: 10
|
|
139
|
-
}), o = this.view.toScreen(
|
|
149
|
+
}), o = this.view.toScreen(i), l = this.createCountdownCanvas();
|
|
150
|
+
if (!l)
|
|
151
|
+
return;
|
|
152
|
+
const h = l[0], r = l[1];
|
|
140
153
|
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, {
|
|
141
154
|
backgroundCanvas: h,
|
|
142
155
|
countdownCanvas: r,
|
|
143
|
-
mapPoint:
|
|
144
|
-
}), this.drawCountdownText(r,
|
|
145
|
-
} catch (
|
|
146
|
-
console.log("倒计时canvas创建失败", e,
|
|
156
|
+
mapPoint: i
|
|
157
|
+
}), this.drawCountdownText(r, s);
|
|
158
|
+
} catch (i) {
|
|
159
|
+
console.log("倒计时canvas创建失败", e, i);
|
|
147
160
|
}
|
|
148
161
|
this.countdownWatchHandel || (this.countdownWatchHandel = d.watch(
|
|
149
162
|
() => this.view.extent,
|
|
150
163
|
() => {
|
|
151
|
-
this.countdownCanvasMap.forEach((
|
|
152
|
-
const o = this.view.toScreen(
|
|
153
|
-
|
|
164
|
+
this.countdownCanvasMap.forEach((i) => {
|
|
165
|
+
const o = this.view.toScreen(i.mapPoint);
|
|
166
|
+
i.backgroundCanvas.style.left = o.x + "px", i.backgroundCanvas.style.top = o.y + "px", i.countdownCanvas.style.left = o.x + "px", i.countdownCanvas.style.top = o.y + "px";
|
|
154
167
|
});
|
|
155
168
|
}
|
|
156
169
|
));
|
|
@@ -165,8 +178,8 @@ class f {
|
|
|
165
178
|
* @param rtStage.stageYellowTime 黄灯时间
|
|
166
179
|
*/
|
|
167
180
|
drawCountdownText(e, a) {
|
|
168
|
-
const
|
|
169
|
-
|
|
181
|
+
const t = e.getContext("2d");
|
|
182
|
+
t.clearRect(0, 0, e.width, e.height), t.font = "24px Digital", t.textBaseline = "middle", t.textAlign = "center", t.fillStyle = a.stageRemainingTime <= a.stageAllRedTime ? "red" : a.stageRemainingTime <= a.stageAllRedTime + a.stageYellowTime ? "yellow" : "lime", t.fillText(
|
|
170
183
|
`${a.stageID} ${a.stageRemainingTime.toFixed(0)}`,
|
|
171
184
|
e.width / 2,
|
|
172
185
|
e.height / 2
|
|
@@ -174,9 +187,9 @@ class f {
|
|
|
174
187
|
}
|
|
175
188
|
drawCircle(e, a) {
|
|
176
189
|
console.log(a);
|
|
177
|
-
const
|
|
178
|
-
|
|
179
|
-
|
|
190
|
+
const t = e.getContext("2d");
|
|
191
|
+
t.clearRect(0, 0, e.width, e.height), this.ctxDraw(
|
|
192
|
+
t,
|
|
180
193
|
"lime",
|
|
181
194
|
e.width / 2,
|
|
182
195
|
e.height / 2,
|
|
@@ -185,17 +198,17 @@ class f {
|
|
|
185
198
|
-Math.PI / 2 + 2 * 0.6 * Math.PI
|
|
186
199
|
);
|
|
187
200
|
}
|
|
188
|
-
ctxDraw(e, a,
|
|
189
|
-
e.save, e.beginPath(), e.lineWidth = 4, e.strokeStyle = a, e.arc(
|
|
201
|
+
ctxDraw(e, a, t, s, n, i, o) {
|
|
202
|
+
e.save, e.beginPath(), e.lineWidth = 4, e.strokeStyle = a, e.arc(t, s, n, i, o), e.stroke(), e.closePath(), e.font = "26px Digital", e.textBaseline = "middle", e.textAlign = "center", e.fillText("A", t, s), e.restore();
|
|
190
203
|
}
|
|
191
|
-
async updatePhaseLine(e, a,
|
|
192
|
-
const
|
|
193
|
-
(
|
|
204
|
+
async updatePhaseLine(e, a, t) {
|
|
205
|
+
const s = this.phaseLineLayer.source.filter(
|
|
206
|
+
(n) => n.getAttribute("id").includes(e)
|
|
194
207
|
);
|
|
195
|
-
|
|
196
|
-
const
|
|
197
|
-
this.isLaneInChannels(
|
|
198
|
-
}), await this.phaseLineLayer.applyEdits({ updateFeatures:
|
|
208
|
+
s.forEach((n) => {
|
|
209
|
+
const i = n.getAttribute("id");
|
|
210
|
+
this.isLaneInChannels(i, a) ? n.setAttribute("color", "green") : this.isLaneInChannels(i, t) ? n.setAttribute("color", "red") : n.setAttribute("color", "green");
|
|
211
|
+
}), await this.phaseLineLayer.applyEdits({ updateFeatures: s });
|
|
199
212
|
}
|
|
200
213
|
/**
|
|
201
214
|
* 车道是否在通道中
|
|
@@ -204,29 +217,28 @@ class f {
|
|
|
204
217
|
* @returns
|
|
205
218
|
*/
|
|
206
219
|
isLaneInChannels(e, a) {
|
|
207
|
-
const
|
|
208
|
-
for (let
|
|
209
|
-
for (let o = 0; o < a[
|
|
210
|
-
const l = a[
|
|
211
|
-
if (
|
|
220
|
+
const t = e.split("+"), s = t[1], n = t[2];
|
|
221
|
+
for (let i = 0; i < a.length; i++)
|
|
222
|
+
for (let o = 0; o < a[i].laneSnList.length; o++) {
|
|
223
|
+
const l = a[i].laneSnList[o].toFixed(0);
|
|
224
|
+
if (s === l[0] && n === l[1])
|
|
212
225
|
return !0;
|
|
213
226
|
}
|
|
214
227
|
return !1;
|
|
215
228
|
}
|
|
216
229
|
createCountdownCanvas() {
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
});
|
|
230
|
+
if (!this.plateBackground)
|
|
231
|
+
return;
|
|
232
|
+
const e = document.createElement("canvas");
|
|
233
|
+
e.width = this.canvasWidth, e.height = this.canvasHeight, e.style.position = "absolute", e.style.transform = "translate(-50%, -50%)", e.getContext("2d").drawImage(
|
|
234
|
+
this.plateBackground,
|
|
235
|
+
0,
|
|
236
|
+
0,
|
|
237
|
+
this.canvasWidth,
|
|
238
|
+
this.canvasHeight
|
|
239
|
+
), this.view.container.appendChild(e);
|
|
240
|
+
const t = document.createElement("canvas");
|
|
241
|
+
return t.width = this.canvasWidth - 10, t.height = this.canvasHeight - 10, t.style.position = "absolute", t.style.transform = "translate(-50%, -50%)", this.view.container.appendChild(t), [e, t];
|
|
230
242
|
}
|
|
231
243
|
}
|
|
232
244
|
export {
|
|
@@ -5,9 +5,12 @@ export default class TraceHoloFlow {
|
|
|
5
5
|
private lastDataTime;
|
|
6
6
|
private readonly traceRenderer;
|
|
7
7
|
constructor(view: __esri.View);
|
|
8
|
+
init(): Promise<void>;
|
|
8
9
|
/**
|
|
9
10
|
* 处理全息流轨迹数据
|
|
10
11
|
* */
|
|
12
|
+
private lastLocalTimestamp;
|
|
13
|
+
private lastDataTimestamp;
|
|
11
14
|
handleVehicleTraceData(data: any): Promise<void>;
|
|
12
15
|
/**
|
|
13
16
|
* 切换交通信息可见性
|