gisviewer-vue3-arcgis 1.0.275 → 1.0.277
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/dbscan-cluster/index.d.ts +3 -0
- package/es/src/gis-map/utils/dbscan-cluster/index.mjs +51 -27
- package/es/src/gis-map/utils/edpass-device-controller.d.ts +10 -0
- package/es/src/gis-map/utils/edpass-device-controller.mjs +116 -136
- package/es/src/types/index.d.ts +2 -0
- package/lib/src/gis-map/utils/dbscan-cluster/index.d.ts +3 -0
- package/lib/src/gis-map/utils/dbscan-cluster/index.js +1 -1
- package/lib/src/gis-map/utils/edpass-device-controller.d.ts +10 -0
- package/lib/src/gis-map/utils/edpass-device-controller.js +1 -1
- package/lib/src/types/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -8,6 +8,8 @@ export default class DbscanCluster {
|
|
|
8
8
|
private readonly minClusterPoints;
|
|
9
9
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
10
10
|
private zoomWatchHandle;
|
|
11
|
+
private scaleThreshold?;
|
|
12
|
+
private clusterCountBackgroundColor;
|
|
11
13
|
private locations;
|
|
12
14
|
private clusteredLocations;
|
|
13
15
|
private clusterMarkUrl;
|
|
@@ -15,6 +17,7 @@ export default class DbscanCluster {
|
|
|
15
17
|
* 将地理位置转换为屏幕坐标
|
|
16
18
|
*/
|
|
17
19
|
private locationToScreen;
|
|
20
|
+
private currentStyle;
|
|
18
21
|
/**
|
|
19
22
|
* 添加聚类点到视图
|
|
20
23
|
* @param params
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Point as
|
|
2
|
-
import
|
|
1
|
+
import { Point as n } from "@arcgis/core/geometry";
|
|
2
|
+
import y from "@arcgis/core/Graphic";
|
|
3
3
|
import p from "@arcgis/core/layers/GraphicsLayer";
|
|
4
4
|
class S {
|
|
5
5
|
constructor(t) {
|
|
6
|
-
this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.clusterRadius = 120, this.minClusterPoints = 2, this.zoomWatchHandle = null, this.locations = [], this.clusteredLocations = [], this.clusterMarkUrl = "", this.view = t, this.clusterLayer = new p(), this.view.map.add(this.clusterLayer);
|
|
6
|
+
this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.clusterRadius = 120, this.minClusterPoints = 2, this.zoomWatchHandle = null, this.clusterCountBackgroundColor = [2, 72, 200], this.locations = [], this.clusteredLocations = [], this.clusterMarkUrl = "", this.currentStyle = "cluster", this.view = t, this.clusterLayer = new p(), this.view.map.add(this.clusterLayer);
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* 将地理位置转换为屏幕坐标
|
|
@@ -11,7 +11,7 @@ class S {
|
|
|
11
11
|
locationToScreen() {
|
|
12
12
|
this.clusteredLocations = [], this.locations.forEach((t) => {
|
|
13
13
|
const s = this.view.toScreen(
|
|
14
|
-
new
|
|
14
|
+
new n({ x: t.x, y: t.y })
|
|
15
15
|
);
|
|
16
16
|
s.x > 0 && s.y > 0 && (t.properties.screenX = s.x, t.properties.screenY = s.y, t.visited = !1, t.clusterId = void 0, this.clusteredLocations.push(t));
|
|
17
17
|
});
|
|
@@ -22,7 +22,7 @@ class S {
|
|
|
22
22
|
*/
|
|
23
23
|
addClusterPoints(t) {
|
|
24
24
|
var r;
|
|
25
|
-
this.locations = t.points, this.clusterMarkUrl = ((r = t.clusterSymbol) == null ? void 0 : r.url) || "/GisViewerAssets/Images/cross/gis_xhj_blue.png", this.locations = this.locations.filter((e) => e.x !== null && e.y !== null && !isNaN(e.x) && !isNaN(e.y)), this.locations.forEach((e) => {
|
|
25
|
+
this.locations = t.points, t.countBackgroundColor && (this.clusterCountBackgroundColor = t.countBackgroundColor), this.scaleThreshold = t.scaleThreshold, this.clusterMarkUrl = ((r = t.clusterSymbol) == null ? void 0 : r.url) || "/GisViewerAssets/Images/cross/gis_xhj_blue.png", this.locations = this.locations.filter((e) => e.x !== null && e.y !== null && !isNaN(e.x) && !isNaN(e.y)), this.locations.forEach((e) => {
|
|
26
26
|
e.x = Number(e.x), e.y = Number(e.y), e.symbol || (e.symbol = t.pointSymbol || {
|
|
27
27
|
type: "simple-marker",
|
|
28
28
|
style: "circle",
|
|
@@ -34,14 +34,38 @@ class S {
|
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
36
|
}), this.zoomWatchHandle || (this.zoomWatchHandle = this.view.watch("stationary", () => {
|
|
37
|
-
if (this.view.stationary)
|
|
38
|
-
this.
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
37
|
+
if (this.view.stationary)
|
|
38
|
+
if (this.scaleThreshold) {
|
|
39
|
+
if (this.view.scale < this.scaleThreshold && this.currentStyle === "cluster")
|
|
40
|
+
this.currentStyle = "normal", this.clusterLayer.removeAll(), this.locations.forEach((e) => {
|
|
41
|
+
const i = new y({
|
|
42
|
+
geometry: new n({ x: e.x, y: e.y }),
|
|
43
|
+
attributes: {
|
|
44
|
+
...e,
|
|
45
|
+
...e.properties,
|
|
46
|
+
type: "clusterPoint",
|
|
47
|
+
id: e.id
|
|
48
|
+
},
|
|
49
|
+
symbol: e.symbol
|
|
50
|
+
});
|
|
51
|
+
this.clusterLayer.add(i);
|
|
52
|
+
});
|
|
53
|
+
else if (this.view.scale > this.scaleThreshold) {
|
|
54
|
+
this.currentStyle = "cluster", this.locationToScreen();
|
|
55
|
+
const e = this.doPixelCluster(
|
|
56
|
+
this.clusterRadius,
|
|
57
|
+
this.minClusterPoints
|
|
58
|
+
);
|
|
59
|
+
this.showClusters(e);
|
|
60
|
+
}
|
|
61
|
+
} else {
|
|
62
|
+
this.locationToScreen();
|
|
63
|
+
const e = this.doPixelCluster(
|
|
64
|
+
this.clusterRadius,
|
|
65
|
+
this.minClusterPoints
|
|
66
|
+
);
|
|
67
|
+
this.showClusters(e);
|
|
68
|
+
}
|
|
45
69
|
})), this.locationToScreen();
|
|
46
70
|
const s = this.doPixelCluster(
|
|
47
71
|
this.clusterRadius,
|
|
@@ -62,8 +86,8 @@ class S {
|
|
|
62
86
|
if (e.id !== -1) {
|
|
63
87
|
let i = r === s ? (this.maxClusterSymbolSize + this.minClusterSymbolSize) / 2 : this.minClusterSymbolSize + (e.count - r) / (s - r) * (this.maxClusterSymbolSize - this.minClusterSymbolSize);
|
|
64
88
|
i *= 0.75;
|
|
65
|
-
const
|
|
66
|
-
geometry: new
|
|
89
|
+
const c = (e.count.toString().length * 8 + 6) / 2, u = new y({
|
|
90
|
+
geometry: new n({ x: e.center.x, y: e.center.y }),
|
|
67
91
|
attributes: {
|
|
68
92
|
count: e.count
|
|
69
93
|
},
|
|
@@ -102,11 +126,11 @@ class S {
|
|
|
102
126
|
geometry: {
|
|
103
127
|
rings: [
|
|
104
128
|
[
|
|
105
|
-
[-
|
|
106
|
-
[
|
|
107
|
-
[
|
|
108
|
-
[-
|
|
109
|
-
[-
|
|
129
|
+
[-c, 40],
|
|
130
|
+
[c, 40],
|
|
131
|
+
[c, 20],
|
|
132
|
+
[-c, 20],
|
|
133
|
+
[-c, 40]
|
|
110
134
|
]
|
|
111
135
|
]
|
|
112
136
|
},
|
|
@@ -116,13 +140,13 @@ class S {
|
|
|
116
140
|
{
|
|
117
141
|
type: "CIMSolidFill",
|
|
118
142
|
enable: !0,
|
|
119
|
-
color: [
|
|
143
|
+
color: [...this.clusterCountBackgroundColor, 255]
|
|
120
144
|
},
|
|
121
145
|
{
|
|
122
146
|
type: "CIMSolidStroke",
|
|
123
147
|
enable: !0,
|
|
124
148
|
width: 5,
|
|
125
|
-
color: [
|
|
149
|
+
color: [...this.clusterCountBackgroundColor, 128]
|
|
126
150
|
}
|
|
127
151
|
]
|
|
128
152
|
}
|
|
@@ -175,11 +199,11 @@ class S {
|
|
|
175
199
|
}
|
|
176
200
|
}
|
|
177
201
|
});
|
|
178
|
-
this.clusterLayer.add(
|
|
202
|
+
this.clusterLayer.add(u);
|
|
179
203
|
} else
|
|
180
204
|
e.items.forEach((i) => {
|
|
181
|
-
const o = new
|
|
182
|
-
geometry: new
|
|
205
|
+
const o = new y({
|
|
206
|
+
geometry: new n({ x: i.x, y: i.y }),
|
|
183
207
|
attributes: {
|
|
184
208
|
...i,
|
|
185
209
|
...i.properties,
|
|
@@ -223,13 +247,13 @@ class S {
|
|
|
223
247
|
for (const e of this.clusteredLocations)
|
|
224
248
|
e.clusterId === void 0 || e.clusterId === -1 ? s.push(e) : (t[e.clusterId] || (t[e.clusterId] = []), t[e.clusterId].push(e));
|
|
225
249
|
const r = Object.keys(t).map((e, i) => {
|
|
226
|
-
const o = t[Number(e)], l = o.length,
|
|
250
|
+
const o = t[Number(e)], l = o.length, c = o.reduce((h, a) => h + a.x, 0), u = o.reduce((h, a) => h + a.y, 0), m = c / l, d = u / l;
|
|
227
251
|
return {
|
|
228
252
|
id: Number(e),
|
|
229
253
|
items: o,
|
|
230
254
|
count: l,
|
|
231
255
|
center: {
|
|
232
|
-
x:
|
|
256
|
+
x: m,
|
|
233
257
|
y: d
|
|
234
258
|
}
|
|
235
259
|
};
|
|
@@ -6,10 +6,13 @@ export default class EdpassDeviceController {
|
|
|
6
6
|
private kkNormalLayer;
|
|
7
7
|
private kkAbnormalLayer;
|
|
8
8
|
private mapInitializer;
|
|
9
|
+
private readonly clusterScaleThreshold;
|
|
9
10
|
private watchHandle;
|
|
10
11
|
private currentShowParams;
|
|
11
12
|
private isCameraVisible;
|
|
12
13
|
private isKkVisible;
|
|
14
|
+
private esServer;
|
|
15
|
+
private clusterEnabled;
|
|
13
16
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
14
17
|
setEdpassLayerVisibility(params: IShowEdpassDeviceParams): Promise<IResult>;
|
|
15
18
|
/**
|
|
@@ -18,5 +21,12 @@ export default class EdpassDeviceController {
|
|
|
18
21
|
*/
|
|
19
22
|
private showScatter;
|
|
20
23
|
private getLayerConfig;
|
|
24
|
+
private getAutoStyleByScale;
|
|
25
|
+
private updateClusterEnabled;
|
|
26
|
+
private ensureStationaryWatch;
|
|
27
|
+
private hasAnyClusterEnabled;
|
|
28
|
+
private tryRemoveWatchIfNoVisible;
|
|
29
|
+
private applyScatterMode;
|
|
30
|
+
private applyClusterMode;
|
|
21
31
|
private showClusterInExtent;
|
|
22
32
|
}
|
|
@@ -1,22 +1,29 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as b from "@arcgis/core/core/reactiveUtils.js";
|
|
2
2
|
import u from "@arcgis/core/Graphic";
|
|
3
|
-
import
|
|
4
|
-
import { toRaw as
|
|
5
|
-
import
|
|
6
|
-
class
|
|
3
|
+
import n from "@arcgis/core/layers/GraphicsLayer";
|
|
4
|
+
import { toRaw as y } from "vue";
|
|
5
|
+
import v from "../stores/index.mjs";
|
|
6
|
+
class C {
|
|
7
7
|
constructor(e) {
|
|
8
|
-
this.watchHandle = null, this.currentShowParams = null, this.isCameraVisible = !1, this.isKkVisible = !1, this.
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
this.clusterScaleThreshold = 1, this.watchHandle = null, this.currentShowParams = null, this.isCameraVisible = !1, this.isKkVisible = !1, this.esServer = "", this.clusterEnabled = {
|
|
9
|
+
cameraNormal: !1,
|
|
10
|
+
cameraAbnormal: !1,
|
|
11
|
+
kkNormal: !1,
|
|
12
|
+
kkAbnormal: !1
|
|
13
|
+
}, this.view = e;
|
|
14
|
+
const t = v.useAppDataStore;
|
|
15
|
+
this.mapInitializer = y(t.mapInitializer);
|
|
16
|
+
const i = y(t.mapConfig);
|
|
17
|
+
this.esServer = (i == null ? void 0 : i.esServer) || "", this.cameraNormalLayer = new n({
|
|
11
18
|
id: "cameraNormalLayer",
|
|
12
19
|
visible: !1
|
|
13
|
-
}), this.cameraAbnormalLayer = new
|
|
20
|
+
}), this.cameraAbnormalLayer = new n({
|
|
14
21
|
id: "cameraAbnormalLayer",
|
|
15
22
|
visible: !1
|
|
16
|
-
}), this.kkNormalLayer = new
|
|
23
|
+
}), this.kkNormalLayer = new n({
|
|
17
24
|
id: "kkNormalLayer",
|
|
18
25
|
visible: !1
|
|
19
|
-
}), this.kkAbnormalLayer = new
|
|
26
|
+
}), this.kkAbnormalLayer = new n({
|
|
20
27
|
id: "kkAbnormalLayer",
|
|
21
28
|
visible: !1
|
|
22
29
|
}), this.view.map.addMany([
|
|
@@ -27,70 +34,10 @@ class S {
|
|
|
27
34
|
]);
|
|
28
35
|
}
|
|
29
36
|
async setEdpassLayerVisibility(e) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
case "scatter": {
|
|
35
|
-
this.showScatter();
|
|
36
|
-
break;
|
|
37
|
-
}
|
|
38
|
-
case "cluster": {
|
|
39
|
-
const { deviceLayer: i } = this.getLayerConfig(e);
|
|
40
|
-
i.visible = e.visible, e.visible ? (await this.showClusterInExtent(e, this.view.extent), this.watchHandle || (this.watchHandle = v.when(
|
|
41
|
-
() => this.view.stationary,
|
|
42
|
-
async () => {
|
|
43
|
-
var r, s, o, l, c, a, y, h;
|
|
44
|
-
this.cameraNormalLayer.visible && await this.showClusterInExtent(
|
|
45
|
-
{
|
|
46
|
-
deviceType: "camera",
|
|
47
|
-
deviceState: "normal",
|
|
48
|
-
style: "cluster",
|
|
49
|
-
ddCode: ((r = this.currentShowParams) == null ? void 0 : r.ddCode) || "",
|
|
50
|
-
zdCode: ((s = this.currentShowParams) == null ? void 0 : s.zdCode) || "",
|
|
51
|
-
visible: !0
|
|
52
|
-
},
|
|
53
|
-
this.view.extent
|
|
54
|
-
), this.cameraAbnormalLayer.visible && await this.showClusterInExtent(
|
|
55
|
-
{
|
|
56
|
-
deviceType: "camera",
|
|
57
|
-
deviceState: "abnormal",
|
|
58
|
-
style: "cluster",
|
|
59
|
-
ddCode: ((o = this.currentShowParams) == null ? void 0 : o.ddCode) || "",
|
|
60
|
-
zdCode: ((l = this.currentShowParams) == null ? void 0 : l.zdCode) || "",
|
|
61
|
-
visible: !0
|
|
62
|
-
},
|
|
63
|
-
this.view.extent
|
|
64
|
-
), this.kkNormalLayer.visible && await this.showClusterInExtent(
|
|
65
|
-
{
|
|
66
|
-
deviceType: "kk",
|
|
67
|
-
deviceState: "normal",
|
|
68
|
-
style: "cluster",
|
|
69
|
-
ddCode: ((c = this.currentShowParams) == null ? void 0 : c.ddCode) || "",
|
|
70
|
-
zdCode: ((a = this.currentShowParams) == null ? void 0 : a.zdCode) || "",
|
|
71
|
-
visible: !0
|
|
72
|
-
},
|
|
73
|
-
this.view.extent
|
|
74
|
-
), this.kkAbnormalLayer.visible && await this.showClusterInExtent(
|
|
75
|
-
{
|
|
76
|
-
deviceType: "kk",
|
|
77
|
-
deviceState: "abnormal",
|
|
78
|
-
style: "cluster",
|
|
79
|
-
ddCode: ((y = this.currentShowParams) == null ? void 0 : y.ddCode) || "",
|
|
80
|
-
zdCode: ((h = this.currentShowParams) == null ? void 0 : h.zdCode) || "",
|
|
81
|
-
visible: !0
|
|
82
|
-
},
|
|
83
|
-
this.view.extent
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
))) : (i.removeAll(), !this.cameraNormalLayer.visible && !this.cameraAbnormalLayer.visible && !this.kkNormalLayer.visible && !this.kkAbnormalLayer.visible && ((t = this.watchHandle) == null || t.remove(), this.watchHandle = null));
|
|
87
|
-
break;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
return {
|
|
91
|
-
status: 0,
|
|
92
|
-
message: "Success"
|
|
93
|
-
};
|
|
37
|
+
return this.currentShowParams = {
|
|
38
|
+
...this.currentShowParams ?? {},
|
|
39
|
+
...e
|
|
40
|
+
}, e.deviceType !== "camera" && e.deviceType !== "kk" ? { status: -1, message: "不支持的设备类型" } : (e.deviceType === "camera" && (this.isCameraVisible = e.visible), e.deviceType === "kk" && (this.isKkVisible = e.visible), this.updateClusterEnabled(e), (e.style ?? this.getAutoStyleByScale()) === "cluster" || e.style == null ? this.ensureStationaryWatch() : this.tryRemoveWatchIfNoVisible(), this.applyClusterMode(), { status: 0, message: "Success" });
|
|
94
41
|
}
|
|
95
42
|
/**
|
|
96
43
|
* 控制散点图层显示隐藏
|
|
@@ -113,15 +60,77 @@ class S {
|
|
|
113
60
|
});
|
|
114
61
|
}
|
|
115
62
|
getLayerConfig(e) {
|
|
116
|
-
let t, i,
|
|
117
|
-
return e.deviceType === "camera" ? e.deviceState === "normal" ? (t = "/GisViewerAssets/Images/gis/gis_sxj_map.png", i = [45, 108, 196],
|
|
63
|
+
let t, i, a;
|
|
64
|
+
return e.deviceType === "camera" ? e.deviceState === "normal" ? (t = "/GisViewerAssets/Images/gis/gis_sxj_map.png", i = [45, 108, 196], a = this.cameraNormalLayer) : (t = "/GisViewerAssets/Images/gis/gis_sxj_yc.png", i = [189, 49, 50], a = this.cameraAbnormalLayer) : e.deviceState === "normal" ? (t = "/GisViewerAssets/Images/gis/gis_kk_map.png", i = [45, 108, 196], a = this.kkNormalLayer) : (t = "/GisViewerAssets/Images/gis/gis_kk_yc.png", i = [189, 49, 50], a = this.kkAbnormalLayer), {
|
|
118
65
|
icon: t,
|
|
119
66
|
color: i,
|
|
120
|
-
deviceLayer:
|
|
67
|
+
deviceLayer: a
|
|
121
68
|
};
|
|
122
69
|
}
|
|
70
|
+
getAutoStyleByScale() {
|
|
71
|
+
return this.view.scale > this.clusterScaleThreshold ? "cluster" : "scatter";
|
|
72
|
+
}
|
|
73
|
+
updateClusterEnabled(e) {
|
|
74
|
+
const t = e.deviceState;
|
|
75
|
+
e.deviceType === "camera" ? t ? t === "normal" ? this.clusterEnabled.cameraNormal = e.visible : this.clusterEnabled.cameraAbnormal = e.visible : (this.clusterEnabled.cameraNormal = e.visible, this.clusterEnabled.cameraAbnormal = e.visible) : t ? t === "normal" ? this.clusterEnabled.kkNormal = e.visible : this.clusterEnabled.kkAbnormal = e.visible : (this.clusterEnabled.kkNormal = e.visible, this.clusterEnabled.kkAbnormal = e.visible);
|
|
76
|
+
}
|
|
77
|
+
ensureStationaryWatch() {
|
|
78
|
+
this.watchHandle || (this.watchHandle = b.when(
|
|
79
|
+
() => this.view.stationary,
|
|
80
|
+
async () => {
|
|
81
|
+
if (!this.currentShowParams)
|
|
82
|
+
return;
|
|
83
|
+
if ((this.currentShowParams.style ?? this.getAutoStyleByScale()) === "scatter") {
|
|
84
|
+
this.applyScatterMode();
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
await this.applyClusterMode();
|
|
88
|
+
}
|
|
89
|
+
));
|
|
90
|
+
}
|
|
91
|
+
hasAnyClusterEnabled() {
|
|
92
|
+
return this.clusterEnabled.cameraNormal || this.clusterEnabled.cameraAbnormal || this.clusterEnabled.kkNormal || this.clusterEnabled.kkAbnormal;
|
|
93
|
+
}
|
|
94
|
+
tryRemoveWatchIfNoVisible() {
|
|
95
|
+
var i;
|
|
96
|
+
const e = this.isCameraVisible || this.isKkVisible, t = this.hasAnyClusterEnabled();
|
|
97
|
+
!e && !t && ((i = this.watchHandle) == null || i.remove(), this.watchHandle = null);
|
|
98
|
+
}
|
|
99
|
+
applyScatterMode() {
|
|
100
|
+
this.showScatter(), this.cameraNormalLayer.visible = !1, this.cameraAbnormalLayer.visible = !1, this.kkNormalLayer.visible = !1, this.kkAbnormalLayer.visible = !1, this.cameraNormalLayer.removeAll(), this.cameraAbnormalLayer.removeAll(), this.kkNormalLayer.removeAll(), this.kkAbnormalLayer.removeAll();
|
|
101
|
+
}
|
|
102
|
+
async applyClusterMode() {
|
|
103
|
+
var r, l;
|
|
104
|
+
this.showScatter(!1);
|
|
105
|
+
const e = ((r = this.currentShowParams) == null ? void 0 : r.ddCode) || "", t = ((l = this.currentShowParams) == null ? void 0 : l.zdCode) || "", i = this.view.extent, a = [];
|
|
106
|
+
this.cameraNormalLayer.visible = this.clusterEnabled.cameraNormal, this.clusterEnabled.cameraNormal ? a.push(
|
|
107
|
+
this.showClusterInExtent(
|
|
108
|
+
{
|
|
109
|
+
deviceType: "camera",
|
|
110
|
+
deviceState: "normal",
|
|
111
|
+
style: "cluster",
|
|
112
|
+
ddCode: e,
|
|
113
|
+
zdCode: t,
|
|
114
|
+
visible: !0
|
|
115
|
+
},
|
|
116
|
+
i
|
|
117
|
+
)
|
|
118
|
+
) : this.cameraNormalLayer.removeAll(), this.kkNormalLayer.visible = this.clusterEnabled.kkNormal, this.clusterEnabled.kkNormal ? a.push(
|
|
119
|
+
this.showClusterInExtent(
|
|
120
|
+
{
|
|
121
|
+
deviceType: "kk",
|
|
122
|
+
deviceState: "normal",
|
|
123
|
+
style: "cluster",
|
|
124
|
+
ddCode: e,
|
|
125
|
+
zdCode: t,
|
|
126
|
+
visible: !0
|
|
127
|
+
},
|
|
128
|
+
i
|
|
129
|
+
)
|
|
130
|
+
) : this.kkNormalLayer.removeAll(), await Promise.all(a), this.tryRemoveWatchIfNoVisible();
|
|
131
|
+
}
|
|
123
132
|
async showClusterInExtent(e, t) {
|
|
124
|
-
const i = await fetch(
|
|
133
|
+
const i = await fetch(`${this.esServer}/queryGeoAggregation`, {
|
|
125
134
|
method: "POST",
|
|
126
135
|
headers: {
|
|
127
136
|
"Content-Type": "application/json"
|
|
@@ -135,43 +144,42 @@ class S {
|
|
|
135
144
|
devStateSet: e.deviceState ? [e.deviceState === "normal" ? "1" : "2"] : ["1", "2"],
|
|
136
145
|
zdCode: e.zdCode || "",
|
|
137
146
|
ddCode: e.ddCode || "",
|
|
138
|
-
mapLevel: this.view.zoom +
|
|
147
|
+
mapLevel: this.view.zoom + 8
|
|
139
148
|
})
|
|
140
149
|
});
|
|
141
150
|
if (i.status !== 200) {
|
|
142
151
|
console.error(i.statusText);
|
|
143
152
|
return;
|
|
144
153
|
}
|
|
145
|
-
const
|
|
146
|
-
if (
|
|
154
|
+
const a = await i.json();
|
|
155
|
+
if (a.code !== 200)
|
|
147
156
|
return;
|
|
148
|
-
const { icon:
|
|
149
|
-
|
|
150
|
-
const
|
|
151
|
-
var
|
|
152
|
-
const
|
|
157
|
+
const { icon: r, color: l, deviceLayer: h } = this.getLayerConfig(e);
|
|
158
|
+
h.removeAll();
|
|
159
|
+
const d = a.data.map((s) => {
|
|
160
|
+
var m;
|
|
161
|
+
const o = (s.count.toString().length * 6 + 6) / 2, c = new u({
|
|
153
162
|
geometry: {
|
|
154
163
|
type: "point",
|
|
155
|
-
x:
|
|
156
|
-
y:
|
|
164
|
+
x: s.lon,
|
|
165
|
+
y: s.lat
|
|
157
166
|
},
|
|
158
167
|
attributes: {
|
|
159
|
-
id: ((
|
|
168
|
+
id: ((m = s.devInfo) == null ? void 0 : m.deviceId) || s.key,
|
|
160
169
|
type: e.deviceType,
|
|
161
|
-
count:
|
|
170
|
+
count: s.count,
|
|
162
171
|
typeName: e.deviceType === "camera" ? "视频" : "卡口",
|
|
163
172
|
stateName: e.deviceState === "normal" ? "正常" : "异常",
|
|
164
|
-
...
|
|
173
|
+
...s.devInfo
|
|
165
174
|
}
|
|
166
175
|
});
|
|
167
|
-
return
|
|
176
|
+
return s.count > 1 ? c.symbol = {
|
|
168
177
|
type: "cim",
|
|
169
178
|
data: {
|
|
170
179
|
type: "CIMSymbolReference",
|
|
171
180
|
symbol: {
|
|
172
181
|
type: "CIMPointSymbol",
|
|
173
182
|
symbolLayers: [
|
|
174
|
-
// 聚合数量
|
|
175
183
|
{
|
|
176
184
|
type: "CIMVectorMarker",
|
|
177
185
|
size: 32,
|
|
@@ -179,17 +187,16 @@ class S {
|
|
|
179
187
|
anchorPointUnits: "Relative",
|
|
180
188
|
frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
|
|
181
189
|
markerGraphics: [
|
|
182
|
-
// 数量文本框
|
|
183
190
|
{
|
|
184
191
|
type: "CIMMarkerGraphic",
|
|
185
192
|
geometry: {
|
|
186
193
|
rings: [
|
|
187
194
|
[
|
|
188
|
-
[-
|
|
189
|
-
[
|
|
190
|
-
[
|
|
191
|
-
[-
|
|
192
|
-
[-
|
|
195
|
+
[-o, 30],
|
|
196
|
+
[o, 30],
|
|
197
|
+
[o, 15],
|
|
198
|
+
[-o, 15],
|
|
199
|
+
[-o, 30]
|
|
193
200
|
]
|
|
194
201
|
]
|
|
195
202
|
},
|
|
@@ -199,18 +206,17 @@ class S {
|
|
|
199
206
|
{
|
|
200
207
|
type: "CIMSolidFill",
|
|
201
208
|
enable: !0,
|
|
202
|
-
color:
|
|
209
|
+
color: l.concat([255])
|
|
203
210
|
},
|
|
204
211
|
{
|
|
205
212
|
type: "CIMSolidStroke",
|
|
206
213
|
enable: !0,
|
|
207
214
|
width: 3,
|
|
208
|
-
color:
|
|
215
|
+
color: l.concat([128])
|
|
209
216
|
}
|
|
210
217
|
]
|
|
211
218
|
}
|
|
212
219
|
},
|
|
213
|
-
// 数量文字
|
|
214
220
|
{
|
|
215
221
|
type: "CIMMarkerGraphic",
|
|
216
222
|
primitiveName: "textGraphic",
|
|
@@ -234,13 +240,12 @@ class S {
|
|
|
234
240
|
},
|
|
235
241
|
verticalAlignment: "Center"
|
|
236
242
|
},
|
|
237
|
-
textString:
|
|
243
|
+
textString: s.count.toString()
|
|
238
244
|
}
|
|
239
245
|
],
|
|
240
246
|
scaleSymbolsProportionally: !0,
|
|
241
247
|
respectFrame: !0
|
|
242
248
|
},
|
|
243
|
-
// 聚合图标
|
|
244
249
|
{
|
|
245
250
|
type: "CIMPictureMarker",
|
|
246
251
|
enable: !0,
|
|
@@ -252,46 +257,21 @@ class S {
|
|
|
252
257
|
size: 24,
|
|
253
258
|
rotateClockwise: !0,
|
|
254
259
|
textureFilter: "Picture",
|
|
255
|
-
url:
|
|
260
|
+
url: r
|
|
256
261
|
}
|
|
257
262
|
]
|
|
258
263
|
}
|
|
259
264
|
}
|
|
260
|
-
} :
|
|
265
|
+
} : c.symbol = {
|
|
261
266
|
type: "picture-marker",
|
|
262
|
-
url:
|
|
267
|
+
url: r,
|
|
263
268
|
width: 18,
|
|
264
269
|
height: 18
|
|
265
|
-
},
|
|
266
|
-
title: "视频信息",
|
|
267
|
-
content: [
|
|
268
|
-
{
|
|
269
|
-
type: "fields",
|
|
270
|
-
fieldInfos: [
|
|
271
|
-
{
|
|
272
|
-
fieldName: "deviceId",
|
|
273
|
-
label: "设备编号"
|
|
274
|
-
},
|
|
275
|
-
{
|
|
276
|
-
fieldName: "deviceName",
|
|
277
|
-
label: "设备名称"
|
|
278
|
-
},
|
|
279
|
-
{
|
|
280
|
-
fieldName: "typeName",
|
|
281
|
-
label: "设备类型"
|
|
282
|
-
},
|
|
283
|
-
{
|
|
284
|
-
fieldName: "stateName",
|
|
285
|
-
label: "设备状态"
|
|
286
|
-
}
|
|
287
|
-
]
|
|
288
|
-
}
|
|
289
|
-
]
|
|
290
|
-
}), d;
|
|
270
|
+
}, c;
|
|
291
271
|
});
|
|
292
|
-
|
|
272
|
+
h.addMany(d);
|
|
293
273
|
}
|
|
294
274
|
}
|
|
295
275
|
export {
|
|
296
|
-
|
|
276
|
+
C as default
|
|
297
277
|
};
|
package/es/src/types/index.d.ts
CHANGED
|
@@ -8,6 +8,8 @@ export default class DbscanCluster {
|
|
|
8
8
|
private readonly minClusterPoints;
|
|
9
9
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
10
10
|
private zoomWatchHandle;
|
|
11
|
+
private scaleThreshold?;
|
|
12
|
+
private clusterCountBackgroundColor;
|
|
11
13
|
private locations;
|
|
12
14
|
private clusteredLocations;
|
|
13
15
|
private clusterMarkUrl;
|
|
@@ -15,6 +17,7 @@ export default class DbscanCluster {
|
|
|
15
17
|
* 将地理位置转换为屏幕坐标
|
|
16
18
|
*/
|
|
17
19
|
private locationToScreen;
|
|
20
|
+
private currentStyle;
|
|
18
21
|
/**
|
|
19
22
|
* 添加聚类点到视图
|
|
20
23
|
* @param params
|
|
@@ -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 c=require("@arcgis/core/geometry"),y=require("@arcgis/core/Graphic"),C=require("@arcgis/core/layers/GraphicsLayer");class p{constructor(t){this.maxClusterSymbolSize=50,this.minClusterSymbolSize=25,this.clusterRadius=120,this.minClusterPoints=2,this.zoomWatchHandle=null,this.clusterCountBackgroundColor=[2,72,200],this.locations=[],this.clusteredLocations=[],this.clusterMarkUrl="",this.currentStyle="cluster",this.view=t,this.clusterLayer=new C,this.view.map.add(this.clusterLayer)}locationToScreen(){this.clusteredLocations=[],this.locations.forEach(t=>{const s=this.view.toScreen(new c.Point({x:t.x,y:t.y}));s.x>0&&s.y>0&&(t.properties.screenX=s.x,t.properties.screenY=s.y,t.visited=!1,t.clusterId=void 0,this.clusteredLocations.push(t))})}addClusterPoints(t){var r;this.locations=t.points,t.countBackgroundColor&&(this.clusterCountBackgroundColor=t.countBackgroundColor),this.scaleThreshold=t.scaleThreshold,this.clusterMarkUrl=((r=t.clusterSymbol)==null?void 0:r.url)||"/GisViewerAssets/Images/cross/gis_xhj_blue.png",this.locations=this.locations.filter(e=>e.x!==null&&e.y!==null&&!isNaN(e.x)&&!isNaN(e.y)),this.locations.forEach(e=>{e.x=Number(e.x),e.y=Number(e.y),e.symbol||(e.symbol=t.pointSymbol||{type:"simple-marker",style:"circle",color:"#3388ff",size:8,outline:{color:"#ffffff",width:1}})}),this.zoomWatchHandle||(this.zoomWatchHandle=this.view.watch("stationary",()=>{if(this.view.stationary)if(this.scaleThreshold){if(this.view.scale<this.scaleThreshold&&this.currentStyle==="cluster")this.currentStyle="normal",this.clusterLayer.removeAll(),this.locations.forEach(e=>{const i=new y({geometry:new c.Point({x:e.x,y:e.y}),attributes:{...e,...e.properties,type:"clusterPoint",id:e.id},symbol:e.symbol});this.clusterLayer.add(i)});else if(this.view.scale>this.scaleThreshold){this.currentStyle="cluster",this.locationToScreen();const e=this.doPixelCluster(this.clusterRadius,this.minClusterPoints);this.showClusters(e)}}else{this.locationToScreen();const e=this.doPixelCluster(this.clusterRadius,this.minClusterPoints);this.showClusters(e)}})),this.locationToScreen();const s=this.doPixelCluster(this.clusterRadius,this.minClusterPoints);this.showClusters(s)}removeAllClusterPoints(){var t;(t=this.zoomWatchHandle)==null||t.remove(),this.zoomWatchHandle=null,this.clusterLayer.removeAll()}showClusters(t){this.clusterLayer.removeAll();let s=Number.MIN_VALUE,r=Number.MAX_VALUE;t.forEach(e=>{e.count>1&&(r=Math.min(r,e.count),s=Math.max(s,e.count))}),t.forEach(e=>{if(e.id!==-1){let i=r===s?(this.maxClusterSymbolSize+this.minClusterSymbolSize)/2:this.minClusterSymbolSize+(e.count-r)/(s-r)*(this.maxClusterSymbolSize-this.minClusterSymbolSize);i*=.75;const n=(e.count.toString().length*8+6)/2,u=new y({geometry:new c.Point({x:e.center.x,y:e.center.y}),attributes:{count:e.count},symbol:{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.count",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:i,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",geometry:{rings:[[[-n,40],[n,40],[n,20],[-n,20],[-n,40]]]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[...this.clusterCountBackgroundColor,255]},{type:"CIMSolidStroke",enable:!0,width:5,color:[...this.clusterCountBackgroundColor,128]}]}},{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:16,horizontalAlignment:"Center",offsetX:0,offsetY:30,symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:i,rotateClockwise:!0,textureFilter:"Picture",url:this.clusterMarkUrl}]}}}});this.clusterLayer.add(u)}else e.items.forEach(i=>{const o=new y({geometry:new c.Point({x:i.x,y:i.y}),attributes:{...i,...i.properties,type:"clusterPoint",id:i.id},symbol:i.symbol});this.clusterLayer.add(o)})})}getNeighbors(t,s){return this.clusteredLocations.filter(r=>r.id===t.id||r.visited?!1:this.getDistance(t,r)<=s)}getDistance(t,s){return Math.sqrt(Math.pow(t.properties.screenX-s.properties.screenX,2)+Math.pow(t.properties.screenY-s.properties.screenY,2))}createClusters(){const t={},s=[];for(const e of this.clusteredLocations)e.clusterId===void 0||e.clusterId===-1?s.push(e):(t[e.clusterId]||(t[e.clusterId]=[]),t[e.clusterId].push(e));const r=Object.keys(t).map((e,i)=>{const o=t[Number(e)],l=o.length,n=o.reduce((h,a)=>h+a.x,0),u=o.reduce((h,a)=>h+a.y,0),m=n/l,d=u/l;return{id:Number(e),items:o,count:l,center:{x:m,y:d}}});return s.length>0&&r.push({id:-1,items:s,count:s.length,center:null}),r}doPixelCluster(t,s){let r=0;for(let e=0;e<this.clusteredLocations.length;e++){const i=this.clusteredLocations[e];if(i.visited)continue;i.visited=!0;const o=this.getNeighbors(i,t);o.length<s?i.clusterId=-1:(o.forEach(l=>{l.visited=!0,l.clusterId=r}),i.clusterId=r,r++)}return this.createClusters()}}exports.default=p;
|
|
@@ -6,10 +6,13 @@ export default class EdpassDeviceController {
|
|
|
6
6
|
private kkNormalLayer;
|
|
7
7
|
private kkAbnormalLayer;
|
|
8
8
|
private mapInitializer;
|
|
9
|
+
private readonly clusterScaleThreshold;
|
|
9
10
|
private watchHandle;
|
|
10
11
|
private currentShowParams;
|
|
11
12
|
private isCameraVisible;
|
|
12
13
|
private isKkVisible;
|
|
14
|
+
private esServer;
|
|
15
|
+
private clusterEnabled;
|
|
13
16
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
14
17
|
setEdpassLayerVisibility(params: IShowEdpassDeviceParams): Promise<IResult>;
|
|
15
18
|
/**
|
|
@@ -18,5 +21,12 @@ export default class EdpassDeviceController {
|
|
|
18
21
|
*/
|
|
19
22
|
private showScatter;
|
|
20
23
|
private getLayerConfig;
|
|
24
|
+
private getAutoStyleByScale;
|
|
25
|
+
private updateClusterEnabled;
|
|
26
|
+
private ensureStationaryWatch;
|
|
27
|
+
private hasAnyClusterEnabled;
|
|
28
|
+
private tryRemoveWatchIfNoVisible;
|
|
29
|
+
private applyScatterMode;
|
|
30
|
+
private applyClusterMode;
|
|
21
31
|
private showClusterInExtent;
|
|
22
32
|
}
|
|
@@ -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 b=require("@arcgis/core/core/reactiveUtils.js"),v=require("@arcgis/core/Graphic"),c=require("@arcgis/core/layers/GraphicsLayer"),d=require("vue"),k=require("../stores/index.js");function f(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const S=f(b);class p{constructor(e){this.clusterScaleThreshold=1,this.watchHandle=null,this.currentShowParams=null,this.isCameraVisible=!1,this.isKkVisible=!1,this.esServer="",this.clusterEnabled={cameraNormal:!1,cameraAbnormal:!1,kkNormal:!1,kkAbnormal:!1},this.view=e;const t=k.default.useAppDataStore;this.mapInitializer=d.toRaw(t.mapInitializer);const i=d.toRaw(t.mapConfig);this.esServer=(i==null?void 0:i.esServer)||"",this.cameraNormalLayer=new c({id:"cameraNormalLayer",visible:!1}),this.cameraAbnormalLayer=new c({id:"cameraAbnormalLayer",visible:!1}),this.kkNormalLayer=new c({id:"kkNormalLayer",visible:!1}),this.kkAbnormalLayer=new c({id:"kkAbnormalLayer",visible:!1}),this.view.map.addMany([this.cameraNormalLayer,this.cameraAbnormalLayer,this.kkNormalLayer,this.kkAbnormalLayer])}async setEdpassLayerVisibility(e){return this.currentShowParams={...this.currentShowParams??{},...e},e.deviceType!=="camera"&&e.deviceType!=="kk"?{status:-1,message:"不支持的设备类型"}:(e.deviceType==="camera"&&(this.isCameraVisible=e.visible),e.deviceType==="kk"&&(this.isKkVisible=e.visible),this.updateClusterEnabled(e),(e.style??this.getAutoStyleByScale())==="cluster"||e.style==null?this.ensureStationaryWatch():this.tryRemoveWatchIfNoVisible(),this.applyClusterMode(),{status:0,message:"Success"})}showScatter(e){const t=e??this.isCameraVisible,i=e??this.isKkVisible;this.mapInitializer.setLayerVisibility({id:"camera-normal",visible:t}),this.mapInitializer.setLayerVisibility({id:"camera-abnormal",visible:t}),this.mapInitializer.setLayerVisibility({id:"kk-normal",visible:i}),this.mapInitializer.setLayerVisibility({id:"kk-abnormal",visible:i})}getLayerConfig(e){let t,i,a;return e.deviceType==="camera"?e.deviceState==="normal"?(t="/GisViewerAssets/Images/gis/gis_sxj_map.png",i=[45,108,196],a=this.cameraNormalLayer):(t="/GisViewerAssets/Images/gis/gis_sxj_yc.png",i=[189,49,50],a=this.cameraAbnormalLayer):e.deviceState==="normal"?(t="/GisViewerAssets/Images/gis/gis_kk_map.png",i=[45,108,196],a=this.kkNormalLayer):(t="/GisViewerAssets/Images/gis/gis_kk_yc.png",i=[189,49,50],a=this.kkAbnormalLayer),{icon:t,color:i,deviceLayer:a}}getAutoStyleByScale(){return this.view.scale>this.clusterScaleThreshold?"cluster":"scatter"}updateClusterEnabled(e){const t=e.deviceState;e.deviceType==="camera"?t?t==="normal"?this.clusterEnabled.cameraNormal=e.visible:this.clusterEnabled.cameraAbnormal=e.visible:(this.clusterEnabled.cameraNormal=e.visible,this.clusterEnabled.cameraAbnormal=e.visible):t?t==="normal"?this.clusterEnabled.kkNormal=e.visible:this.clusterEnabled.kkAbnormal=e.visible:(this.clusterEnabled.kkNormal=e.visible,this.clusterEnabled.kkAbnormal=e.visible)}ensureStationaryWatch(){this.watchHandle||(this.watchHandle=S.when(()=>this.view.stationary,async()=>{if(!this.currentShowParams)return;if((this.currentShowParams.style??this.getAutoStyleByScale())==="scatter"){this.applyScatterMode();return}await this.applyClusterMode()}))}hasAnyClusterEnabled(){return this.clusterEnabled.cameraNormal||this.clusterEnabled.cameraAbnormal||this.clusterEnabled.kkNormal||this.clusterEnabled.kkAbnormal}tryRemoveWatchIfNoVisible(){var i;const e=this.isCameraVisible||this.isKkVisible,t=this.hasAnyClusterEnabled();!e&&!t&&((i=this.watchHandle)==null||i.remove(),this.watchHandle=null)}applyScatterMode(){this.showScatter(),this.cameraNormalLayer.visible=!1,this.cameraAbnormalLayer.visible=!1,this.kkNormalLayer.visible=!1,this.kkAbnormalLayer.visible=!1,this.cameraNormalLayer.removeAll(),this.cameraAbnormalLayer.removeAll(),this.kkNormalLayer.removeAll(),this.kkAbnormalLayer.removeAll()}async applyClusterMode(){var l,o;this.showScatter(!1);const e=((l=this.currentShowParams)==null?void 0:l.ddCode)||"",t=((o=this.currentShowParams)==null?void 0:o.zdCode)||"",i=this.view.extent,a=[];this.cameraNormalLayer.visible=this.clusterEnabled.cameraNormal,this.clusterEnabled.cameraNormal?a.push(this.showClusterInExtent({deviceType:"camera",deviceState:"normal",style:"cluster",ddCode:e,zdCode:t,visible:!0},i)):this.cameraNormalLayer.removeAll(),this.kkNormalLayer.visible=this.clusterEnabled.kkNormal,this.clusterEnabled.kkNormal?a.push(this.showClusterInExtent({deviceType:"kk",deviceState:"normal",style:"cluster",ddCode:e,zdCode:t,visible:!0},i)):this.kkNormalLayer.removeAll(),await Promise.all(a),this.tryRemoveWatchIfNoVisible()}async showClusterInExtent(e,t){const i=await fetch(`${this.esServer}/queryGeoAggregation`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({deviceType:e.deviceType,topLeftLat:t.ymax,topLeftLon:t.xmin,bottomRightLat:t.ymin,bottomRightLon:t.xmax,devStateSet:e.deviceState?[e.deviceState==="normal"?"1":"2"]:["1","2"],zdCode:e.zdCode||"",ddCode:e.ddCode||"",mapLevel:this.view.zoom+8})});if(i.status!==200){console.error(i.statusText);return}const a=await i.json();if(a.code!==200)return;const{icon:l,color:o,deviceLayer:y}=this.getLayerConfig(e);y.removeAll();const u=a.data.map(s=>{var m;const n=(s.count.toString().length*6+6)/2,h=new v({geometry:{type:"point",x:s.lon,y:s.lat},attributes:{id:((m=s.devInfo)==null?void 0:m.deviceId)||s.key,type:e.deviceType,count:s.count,typeName:e.deviceType==="camera"?"视频":"卡口",stateName:e.deviceState==="normal"?"正常":"异常",...s.devInfo}});return s.count>1?h.symbol={type:"cim",data:{type:"CIMSymbolReference",symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",geometry:{rings:[[[-n,30],[n,30],[n,15],[-n,15],[-n,30]]]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:o.concat([255])},{type:"CIMSolidStroke",enable:!0,width:3,color:o.concat([128])}]}},{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",fontFamilyName:"msyh",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:22,symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},verticalAlignment:"Center"},textString:s.count.toString()}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:24,rotateClockwise:!0,textureFilter:"Picture",url:l}]}}}:h.symbol={type:"picture-marker",url:l,width:18,height:18},h});y.addMany(u)}}exports.default=p;
|
package/lib/src/types/index.d.ts
CHANGED