gisviewer-vue3-arcgis 1.0.276 → 1.0.278
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 +2 -0
- package/es/src/gis-map/utils/dbscan-cluster/index.mjs +59 -59
- package/es/src/gis-map/utils/edpass-device-controller.d.ts +1 -0
- package/es/src/gis-map/utils/edpass-device-controller.mjs +36 -85
- package/es/src/types/index.d.ts +2 -0
- package/lib/src/gis-map/utils/dbscan-cluster/index.d.ts +2 -0
- package/lib/src/gis-map/utils/dbscan-cluster/index.js +1 -1
- package/lib/src/gis-map/utils/edpass-device-controller.d.ts +1 -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
|
@@ -9,6 +9,8 @@ export default class DbscanCluster {
|
|
|
9
9
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
10
10
|
private zoomWatchHandle;
|
|
11
11
|
private scaleThreshold?;
|
|
12
|
+
private countBackgroundColor;
|
|
13
|
+
private countFontColor;
|
|
12
14
|
private locations;
|
|
13
15
|
private clusteredLocations;
|
|
14
16
|
private clusterMarkUrl;
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { Point as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { Point as c } from "@arcgis/core/geometry";
|
|
2
|
+
import y from "@arcgis/core/Graphic";
|
|
3
|
+
import C from "@arcgis/core/layers/GraphicsLayer";
|
|
4
4
|
class S {
|
|
5
|
-
constructor(
|
|
6
|
-
this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.clusterRadius = 120, this.minClusterPoints = 2, this.zoomWatchHandle = null, this.locations = [], this.clusteredLocations = [], this.clusterMarkUrl = "", this.currentStyle = "cluster", this.view =
|
|
5
|
+
constructor(e) {
|
|
6
|
+
this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.clusterRadius = 120, this.minClusterPoints = 2, this.zoomWatchHandle = null, this.countBackgroundColor = [2, 72, 200], this.countFontColor = [255, 255, 255], this.locations = [], this.clusteredLocations = [], this.clusterMarkUrl = "", this.currentStyle = "cluster", this.view = e, this.clusterLayer = new C(), this.view.map.add(this.clusterLayer);
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* 将地理位置转换为屏幕坐标
|
|
10
10
|
*/
|
|
11
11
|
locationToScreen() {
|
|
12
|
-
this.clusteredLocations = [], this.locations.forEach((
|
|
12
|
+
this.clusteredLocations = [], this.locations.forEach((e) => {
|
|
13
13
|
const s = this.view.toScreen(
|
|
14
|
-
new
|
|
14
|
+
new c({ x: e.x, y: e.y })
|
|
15
15
|
);
|
|
16
|
-
s.x > 0 && s.y > 0 && (
|
|
16
|
+
s.x > 0 && s.y > 0 && (e.properties.screenX = s.x, e.properties.screenY = s.y, e.visited = !1, e.clusterId = void 0, this.clusteredLocations.push(e));
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
20
|
* 添加聚类点到视图
|
|
21
21
|
* @param params
|
|
22
22
|
*/
|
|
23
|
-
addClusterPoints(
|
|
23
|
+
addClusterPoints(e) {
|
|
24
24
|
var r;
|
|
25
|
-
this.locations =
|
|
26
|
-
|
|
25
|
+
this.locations = e.points, e.countBackgroundColor && (this.countBackgroundColor = e.countBackgroundColor), e.countFontColor && (this.countFontColor = e.countFontColor), this.scaleThreshold = e.scaleThreshold, this.clusterMarkUrl = ((r = e.clusterSymbol) == null ? void 0 : r.url) || "/GisViewerAssets/Images/cross/gis_xhj_blue.png", this.locations = this.locations.filter((t) => t.x !== null && t.y !== null && !isNaN(t.x) && !isNaN(t.y)), this.locations.forEach((t) => {
|
|
26
|
+
t.x = Number(t.x), t.y = Number(t.y), t.symbol || (t.symbol = e.pointSymbol || {
|
|
27
27
|
type: "simple-marker",
|
|
28
28
|
style: "circle",
|
|
29
29
|
color: "#3388ff",
|
|
@@ -37,34 +37,34 @@ class S {
|
|
|
37
37
|
if (this.view.stationary)
|
|
38
38
|
if (this.scaleThreshold) {
|
|
39
39
|
if (this.view.scale < this.scaleThreshold && this.currentStyle === "cluster")
|
|
40
|
-
this.currentStyle = "normal", this.clusterLayer.removeAll(), this.locations.forEach((
|
|
41
|
-
const i = new
|
|
42
|
-
geometry: new
|
|
40
|
+
this.currentStyle = "normal", this.clusterLayer.removeAll(), this.locations.forEach((t) => {
|
|
41
|
+
const i = new y({
|
|
42
|
+
geometry: new c({ x: t.x, y: t.y }),
|
|
43
43
|
attributes: {
|
|
44
|
-
...
|
|
45
|
-
...
|
|
44
|
+
...t,
|
|
45
|
+
...t.properties,
|
|
46
46
|
type: "clusterPoint",
|
|
47
|
-
id:
|
|
47
|
+
id: t.id
|
|
48
48
|
},
|
|
49
|
-
symbol:
|
|
49
|
+
symbol: t.symbol
|
|
50
50
|
});
|
|
51
51
|
this.clusterLayer.add(i);
|
|
52
52
|
});
|
|
53
53
|
else if (this.view.scale > this.scaleThreshold) {
|
|
54
54
|
this.currentStyle = "cluster", this.locationToScreen();
|
|
55
|
-
const
|
|
55
|
+
const t = this.doPixelCluster(
|
|
56
56
|
this.clusterRadius,
|
|
57
57
|
this.minClusterPoints
|
|
58
58
|
);
|
|
59
|
-
this.showClusters(
|
|
59
|
+
this.showClusters(t);
|
|
60
60
|
}
|
|
61
61
|
} else {
|
|
62
62
|
this.locationToScreen();
|
|
63
|
-
const
|
|
63
|
+
const t = this.doPixelCluster(
|
|
64
64
|
this.clusterRadius,
|
|
65
65
|
this.minClusterPoints
|
|
66
66
|
);
|
|
67
|
-
this.showClusters(
|
|
67
|
+
this.showClusters(t);
|
|
68
68
|
}
|
|
69
69
|
})), this.locationToScreen();
|
|
70
70
|
const s = this.doPixelCluster(
|
|
@@ -74,22 +74,22 @@ class S {
|
|
|
74
74
|
this.showClusters(s);
|
|
75
75
|
}
|
|
76
76
|
removeAllClusterPoints() {
|
|
77
|
-
var
|
|
78
|
-
(
|
|
77
|
+
var e;
|
|
78
|
+
(e = this.zoomWatchHandle) == null || e.remove(), this.zoomWatchHandle = null, this.clusterLayer.removeAll();
|
|
79
79
|
}
|
|
80
|
-
showClusters(
|
|
80
|
+
showClusters(e) {
|
|
81
81
|
this.clusterLayer.removeAll();
|
|
82
82
|
let s = Number.MIN_VALUE, r = Number.MAX_VALUE;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}),
|
|
86
|
-
if (
|
|
87
|
-
let i = r === s ? (this.maxClusterSymbolSize + this.minClusterSymbolSize) / 2 : this.minClusterSymbolSize + (
|
|
83
|
+
e.forEach((t) => {
|
|
84
|
+
t.count > 1 && (r = Math.min(r, t.count), s = Math.max(s, t.count));
|
|
85
|
+
}), e.forEach((t) => {
|
|
86
|
+
if (t.id !== -1) {
|
|
87
|
+
let i = r === s ? (this.maxClusterSymbolSize + this.minClusterSymbolSize) / 2 : this.minClusterSymbolSize + (t.count - r) / (s - r) * (this.maxClusterSymbolSize - this.minClusterSymbolSize);
|
|
88
88
|
i *= 0.75;
|
|
89
|
-
const
|
|
90
|
-
geometry: new
|
|
89
|
+
const n = (t.count.toString().length * 8 + 6) / 2, u = new y({
|
|
90
|
+
geometry: new c({ x: t.center.x, y: t.center.y }),
|
|
91
91
|
attributes: {
|
|
92
|
-
count:
|
|
92
|
+
count: t.count
|
|
93
93
|
},
|
|
94
94
|
symbol: {
|
|
95
95
|
type: "cim",
|
|
@@ -126,11 +126,11 @@ class S {
|
|
|
126
126
|
geometry: {
|
|
127
127
|
rings: [
|
|
128
128
|
[
|
|
129
|
-
[-
|
|
130
|
-
[
|
|
131
|
-
[
|
|
132
|
-
[-
|
|
133
|
-
[-
|
|
129
|
+
[-n, 40],
|
|
130
|
+
[n, 40],
|
|
131
|
+
[n, 20],
|
|
132
|
+
[-n, 20],
|
|
133
|
+
[-n, 40]
|
|
134
134
|
]
|
|
135
135
|
]
|
|
136
136
|
},
|
|
@@ -140,13 +140,13 @@ class S {
|
|
|
140
140
|
{
|
|
141
141
|
type: "CIMSolidFill",
|
|
142
142
|
enable: !0,
|
|
143
|
-
color: [
|
|
143
|
+
color: [...this.countBackgroundColor, 255]
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
146
|
type: "CIMSolidStroke",
|
|
147
147
|
enable: !0,
|
|
148
148
|
width: 5,
|
|
149
|
-
color: [
|
|
149
|
+
color: [...this.countBackgroundColor, 128]
|
|
150
150
|
}
|
|
151
151
|
]
|
|
152
152
|
}
|
|
@@ -168,7 +168,7 @@ class S {
|
|
|
168
168
|
{
|
|
169
169
|
type: "CIMSolidFill",
|
|
170
170
|
enable: !0,
|
|
171
|
-
color: [
|
|
171
|
+
color: [...this.countFontColor, 255]
|
|
172
172
|
}
|
|
173
173
|
]
|
|
174
174
|
},
|
|
@@ -201,9 +201,9 @@ class S {
|
|
|
201
201
|
});
|
|
202
202
|
this.clusterLayer.add(u);
|
|
203
203
|
} else
|
|
204
|
-
|
|
205
|
-
const o = new
|
|
206
|
-
geometry: new
|
|
204
|
+
t.items.forEach((i) => {
|
|
205
|
+
const o = new y({
|
|
206
|
+
geometry: new c({ x: i.x, y: i.y }),
|
|
207
207
|
attributes: {
|
|
208
208
|
...i,
|
|
209
209
|
...i.properties,
|
|
@@ -223,8 +223,8 @@ class S {
|
|
|
223
223
|
* @param eps
|
|
224
224
|
* @returns
|
|
225
225
|
*/
|
|
226
|
-
getNeighbors(
|
|
227
|
-
return this.clusteredLocations.filter((r) => r.id ===
|
|
226
|
+
getNeighbors(e, s) {
|
|
227
|
+
return this.clusteredLocations.filter((r) => r.id === e.id || r.visited ? !1 : this.getDistance(e, r) <= s);
|
|
228
228
|
}
|
|
229
229
|
/**
|
|
230
230
|
* 两点间的像素距离
|
|
@@ -232,9 +232,9 @@ class S {
|
|
|
232
232
|
* @param point2
|
|
233
233
|
* @returns
|
|
234
234
|
*/
|
|
235
|
-
getDistance(
|
|
235
|
+
getDistance(e, s) {
|
|
236
236
|
return Math.sqrt(
|
|
237
|
-
Math.pow(
|
|
237
|
+
Math.pow(e.properties.screenX - s.properties.screenX, 2) + Math.pow(e.properties.screenY - s.properties.screenY, 2)
|
|
238
238
|
);
|
|
239
239
|
}
|
|
240
240
|
/**
|
|
@@ -243,17 +243,17 @@ class S {
|
|
|
243
243
|
* @returns
|
|
244
244
|
*/
|
|
245
245
|
createClusters() {
|
|
246
|
-
const
|
|
247
|
-
for (const
|
|
248
|
-
|
|
249
|
-
const r = Object.keys(
|
|
250
|
-
const o =
|
|
246
|
+
const e = {}, s = [];
|
|
247
|
+
for (const t of this.clusteredLocations)
|
|
248
|
+
t.clusterId === void 0 || t.clusterId === -1 ? s.push(t) : (e[t.clusterId] || (e[t.clusterId] = []), e[t.clusterId].push(t));
|
|
249
|
+
const r = Object.keys(e).map((t, i) => {
|
|
250
|
+
const o = e[Number(t)], 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;
|
|
251
251
|
return {
|
|
252
|
-
id: Number(
|
|
252
|
+
id: Number(t),
|
|
253
253
|
items: o,
|
|
254
254
|
count: l,
|
|
255
255
|
center: {
|
|
256
|
-
x:
|
|
256
|
+
x: m,
|
|
257
257
|
y: d
|
|
258
258
|
}
|
|
259
259
|
};
|
|
@@ -272,14 +272,14 @@ class S {
|
|
|
272
272
|
* @param minPoints
|
|
273
273
|
* @returns
|
|
274
274
|
*/
|
|
275
|
-
doPixelCluster(
|
|
275
|
+
doPixelCluster(e, s) {
|
|
276
276
|
let r = 0;
|
|
277
|
-
for (let
|
|
278
|
-
const i = this.clusteredLocations[
|
|
277
|
+
for (let t = 0; t < this.clusteredLocations.length; t++) {
|
|
278
|
+
const i = this.clusteredLocations[t];
|
|
279
279
|
if (i.visited)
|
|
280
280
|
continue;
|
|
281
281
|
i.visited = !0;
|
|
282
|
-
const o = this.getNeighbors(i,
|
|
282
|
+
const o = this.getNeighbors(i, e);
|
|
283
283
|
o.length < s ? i.clusterId = -1 : (o.forEach((l) => {
|
|
284
284
|
l.visited = !0, l.clusterId = r;
|
|
285
285
|
}), i.clusterId = r, r++);
|
|
@@ -11,6 +11,7 @@ export default class EdpassDeviceController {
|
|
|
11
11
|
private currentShowParams;
|
|
12
12
|
private isCameraVisible;
|
|
13
13
|
private isKkVisible;
|
|
14
|
+
private esServer;
|
|
14
15
|
private clusterEnabled;
|
|
15
16
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
16
17
|
setEdpassLayerVisibility(params: IShowEdpassDeviceParams): Promise<IResult>;
|
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
import * as b from "@arcgis/core/core/reactiveUtils.js";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { toRaw as
|
|
5
|
-
import
|
|
6
|
-
class
|
|
2
|
+
import u from "@arcgis/core/Graphic";
|
|
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.clusterScaleThreshold =
|
|
8
|
+
this.clusterScaleThreshold = 1, this.watchHandle = null, this.currentShowParams = null, this.isCameraVisible = !1, this.isKkVisible = !1, this.esServer = "", this.clusterEnabled = {
|
|
9
9
|
cameraNormal: !1,
|
|
10
10
|
cameraAbnormal: !1,
|
|
11
11
|
kkNormal: !1,
|
|
12
12
|
kkAbnormal: !1
|
|
13
13
|
}, this.view = e;
|
|
14
|
-
const t =
|
|
15
|
-
this.mapInitializer =
|
|
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({
|
|
16
18
|
id: "cameraNormalLayer",
|
|
17
19
|
visible: !1
|
|
18
|
-
}), this.cameraAbnormalLayer = new
|
|
20
|
+
}), this.cameraAbnormalLayer = new n({
|
|
19
21
|
id: "cameraAbnormalLayer",
|
|
20
22
|
visible: !1
|
|
21
|
-
}), this.kkNormalLayer = new
|
|
23
|
+
}), this.kkNormalLayer = new n({
|
|
22
24
|
id: "kkNormalLayer",
|
|
23
25
|
visible: !1
|
|
24
|
-
}), this.kkAbnormalLayer = new
|
|
26
|
+
}), this.kkAbnormalLayer = new n({
|
|
25
27
|
id: "kkAbnormalLayer",
|
|
26
28
|
visible: !1
|
|
27
29
|
}), this.view.map.addMany([
|
|
@@ -32,24 +34,10 @@ class w {
|
|
|
32
34
|
]);
|
|
33
35
|
}
|
|
34
36
|
async setEdpassLayerVisibility(e) {
|
|
35
|
-
|
|
37
|
+
return this.currentShowParams = {
|
|
36
38
|
...this.currentShowParams ?? {},
|
|
37
39
|
...e
|
|
38
|
-
}, e.deviceType !== "camera" && e.deviceType !== "kk")
|
|
39
|
-
return { status: -1, message: "不支持的设备类型" };
|
|
40
|
-
e.deviceType === "camera" && (this.isCameraVisible = e.visible), e.deviceType === "kk" && (this.isKkVisible = e.visible), this.updateClusterEnabled(e);
|
|
41
|
-
const t = e.style ?? this.getAutoStyleByScale();
|
|
42
|
-
switch (t === "cluster" || e.style == null ? this.ensureStationaryWatch() : this.tryRemoveWatchIfNoVisible(), t) {
|
|
43
|
-
case "scatter": {
|
|
44
|
-
this.applyScatterMode(), this.tryRemoveWatchIfNoVisible();
|
|
45
|
-
break;
|
|
46
|
-
}
|
|
47
|
-
case "cluster": {
|
|
48
|
-
await this.applyClusterMode();
|
|
49
|
-
break;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
return { status: 0, message: "Success" };
|
|
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" });
|
|
53
41
|
}
|
|
54
42
|
/**
|
|
55
43
|
* 控制散点图层显示隐藏
|
|
@@ -112,9 +100,9 @@ class w {
|
|
|
112
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();
|
|
113
101
|
}
|
|
114
102
|
async applyClusterMode() {
|
|
115
|
-
var
|
|
103
|
+
var r, l;
|
|
116
104
|
this.showScatter(!1);
|
|
117
|
-
const e = ((
|
|
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 = [];
|
|
118
106
|
this.cameraNormalLayer.visible = this.clusterEnabled.cameraNormal, this.clusterEnabled.cameraNormal ? a.push(
|
|
119
107
|
this.showClusterInExtent(
|
|
120
108
|
{
|
|
@@ -127,19 +115,7 @@ class w {
|
|
|
127
115
|
},
|
|
128
116
|
i
|
|
129
117
|
)
|
|
130
|
-
) : this.cameraNormalLayer.removeAll(), this.
|
|
131
|
-
this.showClusterInExtent(
|
|
132
|
-
{
|
|
133
|
-
deviceType: "camera",
|
|
134
|
-
deviceState: "abnormal",
|
|
135
|
-
style: "cluster",
|
|
136
|
-
ddCode: e,
|
|
137
|
-
zdCode: t,
|
|
138
|
-
visible: !0
|
|
139
|
-
},
|
|
140
|
-
i
|
|
141
|
-
)
|
|
142
|
-
) : this.cameraAbnormalLayer.removeAll(), this.kkNormalLayer.visible = this.clusterEnabled.kkNormal, this.clusterEnabled.kkNormal ? a.push(
|
|
118
|
+
) : this.cameraNormalLayer.removeAll(), this.kkNormalLayer.visible = this.clusterEnabled.kkNormal, this.clusterEnabled.kkNormal ? a.push(
|
|
143
119
|
this.showClusterInExtent(
|
|
144
120
|
{
|
|
145
121
|
deviceType: "kk",
|
|
@@ -151,22 +127,10 @@ class w {
|
|
|
151
127
|
},
|
|
152
128
|
i
|
|
153
129
|
)
|
|
154
|
-
) : this.kkNormalLayer.removeAll(),
|
|
155
|
-
this.showClusterInExtent(
|
|
156
|
-
{
|
|
157
|
-
deviceType: "kk",
|
|
158
|
-
deviceState: "abnormal",
|
|
159
|
-
style: "cluster",
|
|
160
|
-
ddCode: e,
|
|
161
|
-
zdCode: t,
|
|
162
|
-
visible: !0
|
|
163
|
-
},
|
|
164
|
-
i
|
|
165
|
-
)
|
|
166
|
-
) : this.kkAbnormalLayer.removeAll(), await Promise.all(a), this.tryRemoveWatchIfNoVisible();
|
|
130
|
+
) : this.kkNormalLayer.removeAll(), await Promise.all(a), this.tryRemoveWatchIfNoVisible();
|
|
167
131
|
}
|
|
168
132
|
async showClusterInExtent(e, t) {
|
|
169
|
-
const i = await fetch(
|
|
133
|
+
const i = await fetch(`${this.esServer}/queryGeoAggregation`, {
|
|
170
134
|
method: "POST",
|
|
171
135
|
headers: {
|
|
172
136
|
"Content-Type": "application/json"
|
|
@@ -180,7 +144,7 @@ class w {
|
|
|
180
144
|
devStateSet: e.deviceState ? [e.deviceState === "normal" ? "1" : "2"] : ["1", "2"],
|
|
181
145
|
zdCode: e.zdCode || "",
|
|
182
146
|
ddCode: e.ddCode || "",
|
|
183
|
-
mapLevel: this.view.zoom +
|
|
147
|
+
mapLevel: this.view.zoom + 8
|
|
184
148
|
})
|
|
185
149
|
});
|
|
186
150
|
if (i.status !== 200) {
|
|
@@ -190,18 +154,18 @@ class w {
|
|
|
190
154
|
const a = await i.json();
|
|
191
155
|
if (a.code !== 200)
|
|
192
156
|
return;
|
|
193
|
-
const { icon:
|
|
194
|
-
|
|
195
|
-
const
|
|
196
|
-
var
|
|
197
|
-
const o = (s.count.toString().length * 6 + 6) / 2,
|
|
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({
|
|
198
162
|
geometry: {
|
|
199
163
|
type: "point",
|
|
200
164
|
x: s.lon,
|
|
201
165
|
y: s.lat
|
|
202
166
|
},
|
|
203
167
|
attributes: {
|
|
204
|
-
id: ((
|
|
168
|
+
id: ((m = s.devInfo) == null ? void 0 : m.deviceId) || s.key,
|
|
205
169
|
type: e.deviceType,
|
|
206
170
|
count: s.count,
|
|
207
171
|
typeName: e.deviceType === "camera" ? "视频" : "卡口",
|
|
@@ -209,7 +173,7 @@ class w {
|
|
|
209
173
|
...s.devInfo
|
|
210
174
|
}
|
|
211
175
|
});
|
|
212
|
-
return s.count > 1 ?
|
|
176
|
+
return s.count > 1 ? c.symbol = {
|
|
213
177
|
type: "cim",
|
|
214
178
|
data: {
|
|
215
179
|
type: "CIMSymbolReference",
|
|
@@ -242,13 +206,13 @@ class w {
|
|
|
242
206
|
{
|
|
243
207
|
type: "CIMSolidFill",
|
|
244
208
|
enable: !0,
|
|
245
|
-
color:
|
|
209
|
+
color: l.concat([255])
|
|
246
210
|
},
|
|
247
211
|
{
|
|
248
212
|
type: "CIMSolidStroke",
|
|
249
213
|
enable: !0,
|
|
250
214
|
width: 3,
|
|
251
|
-
color:
|
|
215
|
+
color: l.concat([128])
|
|
252
216
|
}
|
|
253
217
|
]
|
|
254
218
|
}
|
|
@@ -293,34 +257,21 @@ class w {
|
|
|
293
257
|
size: 24,
|
|
294
258
|
rotateClockwise: !0,
|
|
295
259
|
textureFilter: "Picture",
|
|
296
|
-
url:
|
|
260
|
+
url: r
|
|
297
261
|
}
|
|
298
262
|
]
|
|
299
263
|
}
|
|
300
264
|
}
|
|
301
|
-
} :
|
|
265
|
+
} : c.symbol = {
|
|
302
266
|
type: "picture-marker",
|
|
303
|
-
url:
|
|
267
|
+
url: r,
|
|
304
268
|
width: 18,
|
|
305
269
|
height: 18
|
|
306
|
-
},
|
|
307
|
-
title: "视频信息",
|
|
308
|
-
content: [
|
|
309
|
-
{
|
|
310
|
-
type: "fields",
|
|
311
|
-
fieldInfos: [
|
|
312
|
-
{ fieldName: "deviceId", label: "设备编号" },
|
|
313
|
-
{ fieldName: "deviceName", label: "设备名称" },
|
|
314
|
-
{ fieldName: "typeName", label: "设备类型" },
|
|
315
|
-
{ fieldName: "stateName", label: "设备状态" }
|
|
316
|
-
]
|
|
317
|
-
}
|
|
318
|
-
]
|
|
319
|
-
}), n;
|
|
270
|
+
}, c;
|
|
320
271
|
});
|
|
321
|
-
|
|
272
|
+
h.addMany(d);
|
|
322
273
|
}
|
|
323
274
|
}
|
|
324
275
|
export {
|
|
325
|
-
|
|
276
|
+
C as default
|
|
326
277
|
};
|
package/es/src/types/index.d.ts
CHANGED
|
@@ -150,6 +150,8 @@ export interface IClusterPointParams {
|
|
|
150
150
|
pointSymbol?: any;
|
|
151
151
|
points: IClusterLocation[];
|
|
152
152
|
scaleThreshold?: number;
|
|
153
|
+
countBackgroundColor?: number[];
|
|
154
|
+
countFontColor?: number[];
|
|
153
155
|
}
|
|
154
156
|
export interface IClusterLocation {
|
|
155
157
|
id: string;
|
|
@@ -9,6 +9,8 @@ export default class DbscanCluster {
|
|
|
9
9
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
10
10
|
private zoomWatchHandle;
|
|
11
11
|
private scaleThreshold?;
|
|
12
|
+
private countBackgroundColor;
|
|
13
|
+
private countFontColor;
|
|
12
14
|
private locations;
|
|
13
15
|
private clusteredLocations;
|
|
14
16
|
private clusterMarkUrl;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@arcgis/core/geometry"),y=require("@arcgis/core/Graphic"),
|
|
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 f{constructor(t){this.maxClusterSymbolSize=50,this.minClusterSymbolSize=25,this.clusterRadius=120,this.minClusterPoints=2,this.zoomWatchHandle=null,this.countBackgroundColor=[2,72,200],this.countFontColor=[255,255,255],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.countBackgroundColor=t.countBackgroundColor),t.countFontColor&&(this.countFontColor=t.countFontColor),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.countBackgroundColor,255]},{type:"CIMSolidStroke",enable:!0,width:5,color:[...this.countBackgroundColor,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:[...this.countFontColor,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),d=n/l,m=u/l;return{id:Number(e),items:o,count:l,center:{x:d,y:m}}});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=f;
|
|
@@ -11,6 +11,7 @@ export default class EdpassDeviceController {
|
|
|
11
11
|
private currentShowParams;
|
|
12
12
|
private isCameraVisible;
|
|
13
13
|
private isKkVisible;
|
|
14
|
+
private esServer;
|
|
14
15
|
private clusterEnabled;
|
|
15
16
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
16
17
|
setEdpassLayerVisibility(params: IShowEdpassDeviceParams): Promise<IResult>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@arcgis/core/core/reactiveUtils.js"),
|
|
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
|
@@ -150,6 +150,8 @@ export interface IClusterPointParams {
|
|
|
150
150
|
pointSymbol?: any;
|
|
151
151
|
points: IClusterLocation[];
|
|
152
152
|
scaleThreshold?: number;
|
|
153
|
+
countBackgroundColor?: number[];
|
|
154
|
+
countFontColor?: number[];
|
|
153
155
|
}
|
|
154
156
|
export interface IClusterLocation {
|
|
155
157
|
id: string;
|