-
-
Notifications
You must be signed in to change notification settings - Fork 3k
/
Cluster.js
334 lines (305 loc) · 9.34 KB
/
Cluster.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
/**
* @module ol/source/Cluster
*/
import EventType from '../events/EventType.js';
import Feature from '../Feature.js';
import Point from '../geom/Point.js';
import VectorSource from './Vector.js';
import {add as addCoordinate, scale as scaleCoordinate} from '../coordinate.js';
import {assert} from '../asserts.js';
import {
buffer,
createEmpty,
createOrUpdateFromCoordinate,
getCenter,
} from '../extent.js';
import {getUid} from '../util.js';
/**
* @template {import("../Feature.js").FeatureLike} FeatureType
* @typedef {Object} Options
* @property {import("./Source.js").AttributionLike} [attributions] Attributions.
* @property {number} [distance=20] Distance in pixels within which features will
* be clustered together.
* @property {number} [minDistance=0] Minimum distance in pixels between clusters.
* Will be capped at the configured distance.
* By default no minimum distance is guaranteed. This config can be used to avoid
* overlapping icons. As a tradoff, the cluster feature's position will no longer be
* the center of all its features.
* @property {function(FeatureType):(Point)} [geometryFunction]
* Function that takes an {@link module:ol/Feature~Feature} as argument and returns an
* {@link module:ol/geom/Point~Point} as cluster calculation point for the feature. When a
* feature should not be considered for clustering, the function should return
* `null`. The default, which works when the underlying source contains point
* features only, is
* ```js
* function(feature) {
* return feature.getGeometry();
* }
* ```
* See {@link module:ol/geom/Polygon~Polygon#getInteriorPoint} for a way to get a cluster
* calculation point for polygons.
* @property {function(Point, Array<FeatureType>):Feature} [createCluster]
* Function that takes the cluster's center {@link module:ol/geom/Point~Point} and an array
* of {@link module:ol/Feature~Feature} included in this cluster. Must return a
* {@link module:ol/Feature~Feature} that will be used to render. Default implementation is:
* ```js
* function(point, features) {
* return new Feature({
* geometry: point,
* features: features
* });
* }
* ```
* @property {VectorSource<FeatureType>} [source=null] Source.
* @property {boolean} [wrapX=true] Whether to wrap the world horizontally.
*/
/**
* @classdesc
* Layer source to cluster vector data. Works out of the box with point
* geometries. For other geometry types, or if not all geometries should be
* considered for clustering, a custom `geometryFunction` can be defined.
*
* If the instance is disposed without also disposing the underlying
* source `setSource(null)` has to be called to remove the listener reference
* from the wrapped source.
* @api
* @template {import('../Feature.js').FeatureLike} FeatureType
* @extends {VectorSource<Feature<import("../geom/Geometry.js").default>>}
*/
class Cluster extends VectorSource {
/**
* @param {Options<FeatureType>} [options] Cluster options.
*/
constructor(options) {
options = options || {};
super({
attributions: options.attributions,
wrapX: options.wrapX,
});
/**
* @type {number|undefined}
* @protected
*/
this.resolution = undefined;
/**
* @type {number}
* @protected
*/
this.distance = options.distance !== undefined ? options.distance : 20;
/**
* @type {number}
* @protected
*/
this.minDistance = options.minDistance || 0;
/**
* @type {number}
* @protected
*/
this.interpolationRatio = 0;
/**
* @type {Array<Feature>}
* @protected
*/
this.features = [];
/**
* @param {FeatureType} feature Feature.
* @return {Point} Cluster calculation point.
* @protected
*/
this.geometryFunction =
options.geometryFunction ||
function (feature) {
const geometry = /** @type {Point} */ (feature.getGeometry());
assert(
!geometry || geometry.getType() === 'Point',
'The default `geometryFunction` can only handle `Point` or null geometries',
);
return geometry;
};
/**
* @type {function(Point, Array<FeatureType>):Feature}
* @private
*/
this.createCustomCluster_ = options.createCluster;
/**
* @type {VectorSource<FeatureType>|null}
* @protected
*/
this.source = null;
/**
* @private
*/
this.boundRefresh_ = this.refresh.bind(this);
this.updateDistance(this.distance, this.minDistance);
this.setSource(options.source || null);
}
/**
* Remove all features from the source.
* @param {boolean} [fast] Skip dispatching of {@link module:ol/source/VectorEventType~VectorEventType#removefeature} events.
* @api
*/
clear(fast) {
this.features.length = 0;
super.clear(fast);
}
/**
* Get the distance in pixels between clusters.
* @return {number} Distance.
* @api
*/
getDistance() {
return this.distance;
}
/**
* Get a reference to the wrapped source.
* @return {VectorSource<FeatureType>|null} Source.
* @api
*/
getSource() {
return this.source;
}
/**
* @param {import("../extent.js").Extent} extent Extent.
* @param {number} resolution Resolution.
* @param {import("../proj/Projection.js").default} projection Projection.
*/
loadFeatures(extent, resolution, projection) {
this.source?.loadFeatures(extent, resolution, projection);
if (resolution !== this.resolution) {
this.resolution = resolution;
this.refresh();
}
}
/**
* Set the distance within which features will be clusterd together.
* @param {number} distance The distance in pixels.
* @api
*/
setDistance(distance) {
this.updateDistance(distance, this.minDistance);
}
/**
* Set the minimum distance between clusters. Will be capped at the
* configured distance.
* @param {number} minDistance The minimum distance in pixels.
* @api
*/
setMinDistance(minDistance) {
this.updateDistance(this.distance, minDistance);
}
/**
* The configured minimum distance between clusters.
* @return {number} The minimum distance in pixels.
* @api
*/
getMinDistance() {
return this.minDistance;
}
/**
* Replace the wrapped source.
* @param {VectorSource<FeatureType>|null} source The new source for this instance.
* @api
*/
setSource(source) {
if (this.source) {
this.source.removeEventListener(EventType.CHANGE, this.boundRefresh_);
}
this.source = source;
if (source) {
source.addEventListener(EventType.CHANGE, this.boundRefresh_);
}
this.refresh();
}
/**
* Handle the source changing.
*/
refresh() {
this.clear();
this.cluster();
this.addFeatures(this.features);
}
/**
* Update the distances and refresh the source if necessary.
* @param {number} distance The new distance.
* @param {number} minDistance The new minimum distance.
*/
updateDistance(distance, minDistance) {
const ratio =
distance === 0 ? 0 : Math.min(minDistance, distance) / distance;
const changed =
distance !== this.distance || this.interpolationRatio !== ratio;
this.distance = distance;
this.minDistance = minDistance;
this.interpolationRatio = ratio;
if (changed) {
this.refresh();
}
}
/**
* @protected
*/
cluster() {
if (this.resolution === undefined || !this.source) {
return;
}
const extent = createEmpty();
const mapDistance = this.distance * this.resolution;
const features = this.source.getFeatures();
/** @type {Object<string, true>} */
const clustered = {};
for (let i = 0, ii = features.length; i < ii; i++) {
const feature = features[i];
if (!(getUid(feature) in clustered)) {
const geometry = this.geometryFunction(feature);
if (geometry) {
const coordinates = geometry.getCoordinates();
createOrUpdateFromCoordinate(coordinates, extent);
buffer(extent, mapDistance, extent);
const neighbors = this.source
.getFeaturesInExtent(extent)
.filter(function (neighbor) {
const uid = getUid(neighbor);
if (uid in clustered) {
return false;
}
clustered[uid] = true;
return true;
});
this.features.push(this.createCluster(neighbors, extent));
}
}
}
}
/**
* @param {Array<FeatureType>} features Features
* @param {import("../extent.js").Extent} extent The searched extent for these features.
* @return {Feature} The cluster feature.
* @protected
*/
createCluster(features, extent) {
const centroid = [0, 0];
for (let i = features.length - 1; i >= 0; --i) {
const geometry = this.geometryFunction(features[i]);
if (geometry) {
addCoordinate(centroid, geometry.getCoordinates());
} else {
features.splice(i, 1);
}
}
scaleCoordinate(centroid, 1 / features.length);
const searchCenter = getCenter(extent);
const ratio = this.interpolationRatio;
const geometry = new Point([
centroid[0] * (1 - ratio) + searchCenter[0] * ratio,
centroid[1] * (1 - ratio) + searchCenter[1] * ratio,
]);
if (this.createCustomCluster_) {
return this.createCustomCluster_(geometry, features);
}
return new Feature({
geometry,
features,
});
}
}
export default Cluster;