gisviewer-vue3-arcgis 1.0.108 → 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 +169 -116
- 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/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/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
|
* 切换交通信息可见性
|