gisviewer-vue3-arcgis 1.0.195 → 1.0.196
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/green-wave-band-controller/index.d.ts +4 -2
- package/es/src/gis-map/utils/green-wave-band-controller/index.mjs +142 -48
- package/es/src/types/index.d.ts +1 -0
- package/lib/src/gis-map/utils/green-wave-band-controller/index.d.ts +4 -2
- package/lib/src/gis-map/utils/green-wave-band-controller/index.js +1 -1
- package/lib/src/types/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ import { IEditSignalControlAreaParams } from '../../../types';
|
|
|
2
2
|
export default class GreenWaveBandController {
|
|
3
3
|
private view;
|
|
4
4
|
private allNodesLayer;
|
|
5
|
+
private roadsectLayer;
|
|
5
6
|
private viewClickWatcher?;
|
|
6
7
|
private openDriveServer;
|
|
7
8
|
private selectedNodeIds;
|
|
@@ -16,7 +17,7 @@ export default class GreenWaveBandController {
|
|
|
16
17
|
addGreenWaveBand(params: IEditSignalControlAreaParams): void;
|
|
17
18
|
stopAddGreenWaveBand(): void;
|
|
18
19
|
/**
|
|
19
|
-
*
|
|
20
|
+
* 显示所有路口，进入待选状态
|
|
20
21
|
* @param nodeAttributes
|
|
21
22
|
*/
|
|
22
23
|
private showAllNodes;
|
|
@@ -31,5 +32,6 @@ export default class GreenWaveBandController {
|
|
|
31
32
|
* @param nodeId
|
|
32
33
|
*/
|
|
33
34
|
private showDownstreamNodes;
|
|
34
|
-
private
|
|
35
|
+
private getLineSymbol;
|
|
36
|
+
private getNodeSymbol;
|
|
35
37
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
class
|
|
1
|
+
import h from "@arcgis/core/Graphic";
|
|
2
|
+
import n from "@arcgis/core/layers/GraphicsLayer";
|
|
3
|
+
import y from "axios";
|
|
4
|
+
class C {
|
|
5
5
|
constructor(e) {
|
|
6
|
-
this.selectedNodeIds = [], this.view = e, this.
|
|
6
|
+
this.selectedNodeIds = [], this.view = e, this.roadsectLayer = new n({
|
|
7
|
+
id: "roadsectLayer"
|
|
8
|
+
}), this.view.map.add(this.roadsectLayer), this.allNodesLayer = new n({
|
|
7
9
|
id: "allNodesLayer"
|
|
8
10
|
}), this.view.map.add(this.allNodesLayer);
|
|
9
11
|
}
|
|
@@ -12,33 +14,33 @@ class u {
|
|
|
12
14
|
* @param params
|
|
13
15
|
*/
|
|
14
16
|
addGreenWaveBand(e) {
|
|
15
|
-
this.addCrossCallback = e.addCrossCallback, this.removeCrossCallback = e.removeCrossCallback, e.removeAllCrossCallback && (this.removeAllCrossCallback = e.removeAllCrossCallback), this.selectedNodeIds = [], this.openDriveServer = e.odrServer, this.showAllNodes(e.crossesInArea), this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", (
|
|
16
|
-
this.handleViewClick(
|
|
17
|
+
this.addCrossCallback = e.addCrossCallback, this.removeCrossCallback = e.removeCrossCallback, e.removeAllCrossCallback && (this.removeAllCrossCallback = e.removeAllCrossCallback), this.selectedNodeIds = [], this.openDriveServer = e.odrServer, this.showAllNodes(e.crossesInArea), this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", (i) => {
|
|
18
|
+
this.handleViewClick(i);
|
|
17
19
|
}));
|
|
18
20
|
}
|
|
19
21
|
stopAddGreenWaveBand() {
|
|
20
22
|
var e;
|
|
21
|
-
(e = this.viewClickWatcher) == null || e.remove(), this.viewClickWatcher = void 0, this.allNodesLayer.removeAll(), this.selectedNodeIds = [];
|
|
23
|
+
(e = this.viewClickWatcher) == null || e.remove(), this.viewClickWatcher = void 0, this.allNodesLayer.removeAll(), this.selectedNodeIds = [], this.roadsectLayer.removeAll();
|
|
22
24
|
}
|
|
23
25
|
/**
|
|
24
|
-
*
|
|
26
|
+
* 显示所有路口，进入待选状态
|
|
25
27
|
* @param nodeAttributes
|
|
26
28
|
*/
|
|
27
29
|
showAllNodes(e) {
|
|
28
|
-
const
|
|
29
|
-
e.forEach((
|
|
30
|
-
|
|
31
|
-
new
|
|
30
|
+
const i = [];
|
|
31
|
+
e.forEach((a) => {
|
|
32
|
+
i.push(
|
|
33
|
+
new h({
|
|
32
34
|
geometry: {
|
|
33
35
|
type: "point",
|
|
34
|
-
x:
|
|
35
|
-
y:
|
|
36
|
+
x: a.longitude,
|
|
37
|
+
y: a.latitude
|
|
36
38
|
},
|
|
37
|
-
symbol: this.
|
|
38
|
-
attributes: { ...
|
|
39
|
+
symbol: this.getNodeSymbol(!1),
|
|
40
|
+
attributes: { ...a, selected: !1 }
|
|
39
41
|
})
|
|
40
42
|
);
|
|
41
|
-
}), this.allNodesLayer.addMany(
|
|
43
|
+
}), this.allNodesLayer.addMany(i);
|
|
42
44
|
}
|
|
43
45
|
/**
|
|
44
46
|
* 点击待选/已选路口
|
|
@@ -46,39 +48,51 @@ class u {
|
|
|
46
48
|
* @returns
|
|
47
49
|
*/
|
|
48
50
|
async handleViewClick(e) {
|
|
49
|
-
var
|
|
50
|
-
const
|
|
51
|
+
var d;
|
|
52
|
+
const a = (d = (await this.view.hitTest(e, {
|
|
51
53
|
include: [this.allNodesLayer]
|
|
52
|
-
})).results) == null ? void 0 :
|
|
53
|
-
(
|
|
54
|
+
})).results) == null ? void 0 : d.filter(
|
|
55
|
+
(s) => s.type === "graphic"
|
|
54
56
|
);
|
|
55
|
-
if (
|
|
57
|
+
if (a.length === 0)
|
|
56
58
|
return;
|
|
57
|
-
const
|
|
58
|
-
if (
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
name: r.getAttribute("name")
|
|
62
|
-
}), r.symbol = this.getSymbol(!0), this.selectedNodeIds.push(s), this.allNodesLayer.graphics.forEach((i) => {
|
|
63
|
-
this.selectedNodeIds.length === 0 ? i !== r && (i.visible = !1) : i.getAttribute("selected") === !1 && (i.visible = !1);
|
|
64
|
-
}), await this.showDownstreamNodes(s);
|
|
65
|
-
else {
|
|
66
|
-
const i = this.selectedNodeIds.indexOf(s) + 1;
|
|
67
|
-
if (i === 1)
|
|
59
|
+
const o = a[0].graphic, r = o.getAttribute("id");
|
|
60
|
+
if (this.selectedNodeIds.includes(r)) {
|
|
61
|
+
const s = this.selectedNodeIds.indexOf(r) + 1;
|
|
62
|
+
if (s === 1)
|
|
68
63
|
this.removeAllCrossCallback && this.removeAllCrossCallback(), this.selectedNodeIds = [], this.allNodesLayer.graphics.forEach((t) => {
|
|
69
|
-
t.setAttribute("selected", !1), t.symbol = this.
|
|
70
|
-
});
|
|
64
|
+
t.setAttribute("selected", !1), t.symbol = this.getNodeSymbol(!1), t.visible = !0;
|
|
65
|
+
}), this.roadsectLayer.removeAll();
|
|
71
66
|
else {
|
|
72
|
-
for (let t =
|
|
67
|
+
for (let t = s; t < this.selectedNodeIds.length; t++) {
|
|
73
68
|
this.removeCrossCallback && this.removeCrossCallback({
|
|
74
69
|
id: this.selectedNodeIds[t]
|
|
75
70
|
});
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
71
|
+
for (let l = 0; l < this.roadsectLayer.graphics.length; l++) {
|
|
72
|
+
const c = this.roadsectLayer.graphics.getItemAt(l);
|
|
73
|
+
(c.getAttribute("id") === this.selectedNodeIds[t] || !c.getAttribute("selected")) && (this.roadsectLayer.remove(c), l--);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
this.selectedNodeIds = this.selectedNodeIds.slice(0, s), this.allNodesLayer.graphics.forEach((t) => {
|
|
77
|
+
const l = this.selectedNodeIds.includes(
|
|
78
|
+
t.getAttribute("id")
|
|
79
|
+
);
|
|
80
|
+
t.setAttribute("selected", l), t.symbol = this.getNodeSymbol(l), t.visible = l;
|
|
81
|
+
}), await this.showDownstreamNodes(r);
|
|
79
82
|
}
|
|
83
|
+
} else {
|
|
84
|
+
o.setAttribute("selected", !0), this.addCrossCallback && this.addCrossCallback({
|
|
85
|
+
id: r,
|
|
86
|
+
name: o.getAttribute("name")
|
|
87
|
+
}), o.symbol = this.getNodeSymbol(!0), this.selectedNodeIds.push(r), this.allNodesLayer.graphics.forEach((s) => {
|
|
88
|
+
s.visible = s.getAttribute("selected");
|
|
89
|
+
});
|
|
90
|
+
for (let s = 0; s < this.roadsectLayer.graphics.length; s++) {
|
|
91
|
+
const t = this.roadsectLayer.graphics.getItemAt(s);
|
|
92
|
+
t.getAttribute("id") === r ? (t.symbol = this.getLineSymbol(!0), t.setAttribute("selected", !0)) : t.getAttribute("selected") || (this.roadsectLayer.remove(t), s--);
|
|
93
|
+
}
|
|
94
|
+
await this.showDownstreamNodes(r);
|
|
80
95
|
}
|
|
81
|
-
console.log(this.selectedNodeIds);
|
|
82
96
|
}
|
|
83
97
|
/**
|
|
84
98
|
* 显示下游节点
|
|
@@ -86,21 +100,101 @@ class u {
|
|
|
86
100
|
*/
|
|
87
101
|
async showDownstreamNodes(e) {
|
|
88
102
|
this.view.container.style.cursor = "progress";
|
|
89
|
-
const
|
|
103
|
+
const i = await y.get(
|
|
90
104
|
`http://${this.openDriveServer}/api/computable/getDownstreamNodes`,
|
|
91
105
|
{ params: { nodeId: e } }
|
|
92
106
|
);
|
|
93
|
-
if (
|
|
107
|
+
if (i.status !== 200 || i.data.status !== 0) {
|
|
94
108
|
this.view.container.style.cursor = "default";
|
|
95
109
|
return;
|
|
96
110
|
}
|
|
97
|
-
|
|
98
|
-
this.allNodesLayer.graphics.forEach((
|
|
99
|
-
|
|
111
|
+
i.data.result.forEach((o) => {
|
|
112
|
+
this.allNodesLayer.graphics.forEach((r) => {
|
|
113
|
+
if (r.getAttribute("nodeId") === o.id && r.getAttribute("selected") === !1 && (r.visible = !0, o.coordinates)) {
|
|
114
|
+
const d = new h({
|
|
115
|
+
geometry: {
|
|
116
|
+
type: "polyline",
|
|
117
|
+
paths: [o.coordinates]
|
|
118
|
+
},
|
|
119
|
+
symbol: this.getLineSymbol(!1),
|
|
120
|
+
attributes: { ...o, selected: !1 }
|
|
121
|
+
});
|
|
122
|
+
this.roadsectLayer.add(d);
|
|
123
|
+
}
|
|
100
124
|
});
|
|
101
125
|
}), this.view.container.style.cursor = "default";
|
|
102
126
|
}
|
|
103
|
-
|
|
127
|
+
getLineSymbol(e) {
|
|
128
|
+
return e ? {
|
|
129
|
+
type: "cim",
|
|
130
|
+
data: {
|
|
131
|
+
type: "CIMSymbolReference",
|
|
132
|
+
symbol: {
|
|
133
|
+
type: "CIMLineSymbol",
|
|
134
|
+
symbolLayers: [
|
|
135
|
+
{
|
|
136
|
+
type: "CIMVectorMarker",
|
|
137
|
+
enable: !0,
|
|
138
|
+
size: 4,
|
|
139
|
+
markerPlacement: {
|
|
140
|
+
type: "CIMMarkerPlacementAlongLineSameSize",
|
|
141
|
+
endings: "WithMarkers",
|
|
142
|
+
placementTemplate: [40],
|
|
143
|
+
angleToLine: !0
|
|
144
|
+
},
|
|
145
|
+
frame: {
|
|
146
|
+
xmin: -5,
|
|
147
|
+
ymin: -5,
|
|
148
|
+
xmax: 5,
|
|
149
|
+
ymax: 5
|
|
150
|
+
},
|
|
151
|
+
markerGraphics: [
|
|
152
|
+
{
|
|
153
|
+
type: "CIMMarkerGraphic",
|
|
154
|
+
geometry: {
|
|
155
|
+
paths: [
|
|
156
|
+
[
|
|
157
|
+
[4, -4],
|
|
158
|
+
[12, 0],
|
|
159
|
+
[4, 4]
|
|
160
|
+
],
|
|
161
|
+
[
|
|
162
|
+
[-4, 4],
|
|
163
|
+
[-12, 0],
|
|
164
|
+
[-4, -4]
|
|
165
|
+
]
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
symbol: {
|
|
169
|
+
type: "CIMLineSymbol",
|
|
170
|
+
symbolLayers: [
|
|
171
|
+
{
|
|
172
|
+
type: "CIMSolidStroke",
|
|
173
|
+
enable: !0,
|
|
174
|
+
width: 1.5,
|
|
175
|
+
color: [255, 255, 255, 255]
|
|
176
|
+
}
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
]
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
type: "CIMSolidStroke",
|
|
184
|
+
enable: !0,
|
|
185
|
+
width: 4,
|
|
186
|
+
color: [55, 125, 34, 255]
|
|
187
|
+
}
|
|
188
|
+
]
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
} : {
|
|
192
|
+
type: "simple-line",
|
|
193
|
+
color: "gray",
|
|
194
|
+
width: 2
|
|
195
|
+
};
|
|
196
|
+
}
|
|
197
|
+
getNodeSymbol(e) {
|
|
104
198
|
return {
|
|
105
199
|
type: "cim",
|
|
106
200
|
data: {
|
|
@@ -190,5 +284,5 @@ class u {
|
|
|
190
284
|
}
|
|
191
285
|
}
|
|
192
286
|
export {
|
|
193
|
-
|
|
287
|
+
C as default
|
|
194
288
|
};
|
package/es/src/types/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { IEditSignalControlAreaParams } from '../../../types';
|
|
|
2
2
|
export default class GreenWaveBandController {
|
|
3
3
|
private view;
|
|
4
4
|
private allNodesLayer;
|
|
5
|
+
private roadsectLayer;
|
|
5
6
|
private viewClickWatcher?;
|
|
6
7
|
private openDriveServer;
|
|
7
8
|
private selectedNodeIds;
|
|
@@ -16,7 +17,7 @@ export default class GreenWaveBandController {
|
|
|
16
17
|
addGreenWaveBand(params: IEditSignalControlAreaParams): void;
|
|
17
18
|
stopAddGreenWaveBand(): void;
|
|
18
19
|
/**
|
|
19
|
-
*
|
|
20
|
+
* 显示所有路口，进入待选状态
|
|
20
21
|
* @param nodeAttributes
|
|
21
22
|
*/
|
|
22
23
|
private showAllNodes;
|
|
@@ -31,5 +32,6 @@ export default class GreenWaveBandController {
|
|
|
31
32
|
* @param nodeId
|
|
32
33
|
*/
|
|
33
34
|
private showDownstreamNodes;
|
|
34
|
-
private
|
|
35
|
+
private getLineSymbol;
|
|
36
|
+
private getNodeSymbol;
|
|
35
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@arcgis/core/Graphic"),h=require("@arcgis/core/layers/GraphicsLayer"),y=require("axios");class m{constructor(e){this.selectedNodeIds=[],this.view=e,this.roadsectLayer=new h({id:"roadsectLayer"}),this.view.map.add(this.roadsectLayer),this.allNodesLayer=new h({id:"allNodesLayer"}),this.view.map.add(this.allNodesLayer)}addGreenWaveBand(e){this.addCrossCallback=e.addCrossCallback,this.removeCrossCallback=e.removeCrossCallback,e.removeAllCrossCallback&&(this.removeAllCrossCallback=e.removeAllCrossCallback),this.selectedNodeIds=[],this.openDriveServer=e.odrServer,this.showAllNodes(e.crossesInArea),this.viewClickWatcher||(this.viewClickWatcher=this.view.on("click",i=>{this.handleViewClick(i)}))}stopAddGreenWaveBand(){var e;(e=this.viewClickWatcher)==null||e.remove(),this.viewClickWatcher=void 0,this.allNodesLayer.removeAll(),this.selectedNodeIds=[],this.roadsectLayer.removeAll()}showAllNodes(e){const i=[];e.forEach(a=>{i.push(new n({geometry:{type:"point",x:a.longitude,y:a.latitude},symbol:this.getNodeSymbol(!1),attributes:{...a,selected:!1}}))}),this.allNodesLayer.addMany(i)}async handleViewClick(e){var d;const a=(d=(await this.view.hitTest(e,{include:[this.allNodesLayer]})).results)==null?void 0:d.filter(s=>s.type==="graphic");if(a.length===0)return;const o=a[0].graphic,r=o.getAttribute("id");if(this.selectedNodeIds.includes(r)){const s=this.selectedNodeIds.indexOf(r)+1;if(s===1)this.removeAllCrossCallback&&this.removeAllCrossCallback(),this.selectedNodeIds=[],this.allNodesLayer.graphics.forEach(t=>{t.setAttribute("selected",!1),t.symbol=this.getNodeSymbol(!1),t.visible=!0}),this.roadsectLayer.removeAll();else{for(let t=s;t<this.selectedNodeIds.length;t++){this.removeCrossCallback&&this.removeCrossCallback({id:this.selectedNodeIds[t]});for(let l=0;l<this.roadsectLayer.graphics.length;l++){const c=this.roadsectLayer.graphics.getItemAt(l);(c.getAttribute("id")===this.selectedNodeIds[t]||!c.getAttribute("selected"))&&(this.roadsectLayer.remove(c),l--)}}this.selectedNodeIds=this.selectedNodeIds.slice(0,s),this.allNodesLayer.graphics.forEach(t=>{const l=this.selectedNodeIds.includes(t.getAttribute("id"));t.setAttribute("selected",l),t.symbol=this.getNodeSymbol(l),t.visible=l}),await this.showDownstreamNodes(r)}}else{o.setAttribute("selected",!0),this.addCrossCallback&&this.addCrossCallback({id:r,name:o.getAttribute("name")}),o.symbol=this.getNodeSymbol(!0),this.selectedNodeIds.push(r),this.allNodesLayer.graphics.forEach(s=>{s.visible=s.getAttribute("selected")});for(let s=0;s<this.roadsectLayer.graphics.length;s++){const t=this.roadsectLayer.graphics.getItemAt(s);t.getAttribute("id")===r?(t.symbol=this.getLineSymbol(!0),t.setAttribute("selected",!0)):t.getAttribute("selected")||(this.roadsectLayer.remove(t),s--)}await this.showDownstreamNodes(r)}}async showDownstreamNodes(e){this.view.container.style.cursor="progress";const i=await y.get(`http://${this.openDriveServer}/api/computable/getDownstreamNodes`,{params:{nodeId:e}});if(i.status!==200||i.data.status!==0){this.view.container.style.cursor="default";return}i.data.result.forEach(o=>{this.allNodesLayer.graphics.forEach(r=>{if(r.getAttribute("nodeId")===o.id&&r.getAttribute("selected")===!1&&(r.visible=!0,o.coordinates)){const d=new n({geometry:{type:"polyline",paths:[o.coordinates]},symbol:this.getLineSymbol(!1),attributes:{...o,selected:!1}});this.roadsectLayer.add(d)}})}),this.view.container.style.cursor="default"}getLineSymbol(e){return e?{type:"cim",data:{type:"CIMSymbolReference",symbol:{type:"CIMLineSymbol",symbolLayers:[{type:"CIMVectorMarker",enable:!0,size:4,markerPlacement:{type:"CIMMarkerPlacementAlongLineSameSize",endings:"WithMarkers",placementTemplate:[40],angleToLine:!0},frame:{xmin:-5,ymin:-5,xmax:5,ymax:5},markerGraphics:[{type:"CIMMarkerGraphic",geometry:{paths:[[[4,-4],[12,0],[4,4]],[[-4,4],[-12,0],[-4,-4]]]},symbol:{type:"CIMLineSymbol",symbolLayers:[{type:"CIMSolidStroke",enable:!0,width:1.5,color:[255,255,255,255]}]}}]},{type:"CIMSolidStroke",enable:!0,width:4,color:[55,125,34,255]}]}}}:{type:"simple-line",color:"gray",width:2}}getNodeSymbol(e){return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:'Replace($feature.name, "与", "/") + " " + $feature.signalId',returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:30,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:20,haloSize:2,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[0,0,0,255]}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:25,rotateClockwise:!0,textureFilter:"Picture",url:`/GisViewerAssets/Images/cross/${e?"gis_xhj_blue":"gis_xhj_gray"}.png`}]}}}}}exports.default=m;
|
package/lib/src/types/index.d.ts
CHANGED