gisviewer-vue3-arcgis 1.0.277 → 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 -1
- package/es/src/gis-map/utils/dbscan-cluster/index.mjs +55 -55
- package/es/src/types/index.d.ts +1 -0
- package/lib/src/gis-map/utils/dbscan-cluster/index.d.ts +2 -1
- package/lib/src/gis-map/utils/dbscan-cluster/index.js +1 -1
- package/lib/src/types/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -9,7 +9,8 @@ export default class DbscanCluster {
|
|
|
9
9
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
10
10
|
private zoomWatchHandle;
|
|
11
11
|
private scaleThreshold?;
|
|
12
|
-
private
|
|
12
|
+
private countBackgroundColor;
|
|
13
|
+
private countFontColor;
|
|
13
14
|
private locations;
|
|
14
15
|
private clusteredLocations;
|
|
15
16
|
private clusterMarkUrl;
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { Point as
|
|
1
|
+
import { Point as c } from "@arcgis/core/geometry";
|
|
2
2
|
import y from "@arcgis/core/Graphic";
|
|
3
|
-
import
|
|
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.
|
|
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((
|
|
40
|
+
this.currentStyle = "normal", this.clusterLayer.removeAll(), this.locations.forEach((t) => {
|
|
41
41
|
const i = new y({
|
|
42
|
-
geometry: new
|
|
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: [...this.
|
|
143
|
+
color: [...this.countBackgroundColor, 255]
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
146
|
type: "CIMSolidStroke",
|
|
147
147
|
enable: !0,
|
|
148
148
|
width: 5,
|
|
149
|
-
color: [...this.
|
|
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
|
-
|
|
204
|
+
t.items.forEach((i) => {
|
|
205
205
|
const o = new y({
|
|
206
|
-
geometry: new
|
|
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,13 +243,13 @@ 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: {
|
|
@@ -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++);
|
package/es/src/types/index.d.ts
CHANGED
|
@@ -9,7 +9,8 @@ export default class DbscanCluster {
|
|
|
9
9
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
10
10
|
private zoomWatchHandle;
|
|
11
11
|
private scaleThreshold?;
|
|
12
|
-
private
|
|
12
|
+
private countBackgroundColor;
|
|
13
|
+
private countFontColor;
|
|
13
14
|
private locations;
|
|
14
15
|
private clusteredLocations;
|
|
15
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"),C=require("@arcgis/core/layers/GraphicsLayer");class
|
|
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;
|
package/lib/src/types/index.d.ts
CHANGED