Add ol.source.Cluster
Initial code by @kenny806
This commit is contained in:
Frederic Junod
51
examples/cluster.html
Normal file
51
examples/cluster.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Clustering example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Clustering example</h4>
|
||||
<p id="shortdesc">Example of using <code>ol.Cluster</code>.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="cluster.js" target="_blank">cluster.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">cluster vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=cluster" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
80
examples/cluster.js
Normal file
80
examples/cluster.js
Normal file
@@ -0,0 +1,80 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Cluster');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
goog.require('ol.style.Text');
|
||||
|
||||
|
||||
var count = 20000;
|
||||
var features = new Array(count);
|
||||
var e = 4500000;
|
||||
for (var i = 0; i < count; ++i) {
|
||||
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
|
||||
features[i] = new ol.Feature(new ol.geom.Point(coordinates));
|
||||
}
|
||||
|
||||
var source = new ol.source.Vector({
|
||||
features: features
|
||||
});
|
||||
|
||||
var clusterSource = new ol.source.Cluster({
|
||||
distance: 40,
|
||||
source: source
|
||||
});
|
||||
|
||||
var styleCache = {};
|
||||
var clusters = new ol.layer.Vector({
|
||||
source: clusterSource,
|
||||
style: function(feature, resolution) {
|
||||
var size = feature.get('features').length;
|
||||
var style = styleCache[size];
|
||||
if (!style) {
|
||||
style = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#fff'
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#3399CC'
|
||||
})
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
text: size.toString(),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#fff'
|
||||
})
|
||||
})
|
||||
})];
|
||||
styleCache[size] = style;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var raw = new ol.layer.Vector({
|
||||
source: source
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, clusters],
|
||||
renderer: 'canvas',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -2681,6 +2681,67 @@ olx.source.BingMapsOptions.prototype.imagerySet;
|
||||
*/
|
||||
olx.source.BingMapsOptions.prototype.tileLoadFunction;
|
||||
|
||||
/**
|
||||
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
|
||||
* distance: (number|undefined),
|
||||
* extent: (ol.Extent|undefined),
|
||||
* format: (ol.format.Feature|undefined),
|
||||
* logo: (string|undefined),
|
||||
* projection: ol.proj.ProjectionLike,
|
||||
* source: ol.source.Vector}}
|
||||
* @api
|
||||
*/
|
||||
olx.source.ClusterOptions;
|
||||
|
||||
|
||||
/**
|
||||
* Attributions.
|
||||
* @type {Array.<ol.Attribution>|undefined}
|
||||
*/
|
||||
olx.source.ClusterOptions.prototype.attributions;
|
||||
|
||||
|
||||
/**
|
||||
* Minimum distance in pixels between clusters. Default is `20`.
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
olx.source.ClusterOptions.prototype.distance;
|
||||
|
||||
|
||||
/**
|
||||
* Extent.
|
||||
* @type {ol.Extent|undefined}
|
||||
*/
|
||||
olx.source.ClusterOptions.prototype.extent;
|
||||
|
||||
|
||||
/**
|
||||
* Format.
|
||||
* @type {ol.format.Feature|undefined}
|
||||
*/
|
||||
olx.source.ClusterOptions.prototype.format;
|
||||
|
||||
|
||||
/**
|
||||
* Logo.
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
olx.source.ClusterOptions.prototype.logo;
|
||||
|
||||
|
||||
/**
|
||||
* Projection.
|
||||
* @type {ol.proj.ProjectionLike}
|
||||
*/
|
||||
olx.source.ClusterOptions.prototype.projection;
|
||||
|
||||
|
||||
/**
|
||||
* Source.
|
||||
* @type {ol.source.Vector}
|
||||
*/
|
||||
olx.source.ClusterOptions.prototype.source;
|
||||
|
||||
|
||||
/**
|
||||
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
|
||||
|
||||
150
src/ol/source/clustersource.js
Normal file
150
src/ol/source/clustersource.js
Normal file
@@ -0,0 +1,150 @@
|
||||
// FIXME keep cluster cache by resolution ?
|
||||
// FIXME distance not respected because of the centroid
|
||||
|
||||
goog.provide('ol.source.Cluster');
|
||||
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.object');
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.coordinate');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.source.Vector');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {olx.source.ClusterOptions} options
|
||||
* @extends {ol.source.Vector}
|
||||
* @api
|
||||
*/
|
||||
ol.source.Cluster = function(options) {
|
||||
goog.base(this, {
|
||||
attributions: options.attributions,
|
||||
extent: options.extent,
|
||||
logo: options.logo,
|
||||
projection: options.projection
|
||||
});
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.resolution_ = undefined;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.distance_ = goog.isDef(options.distance) ? options.distance : 20;
|
||||
|
||||
/**
|
||||
* @type {Array.<ol.Feature>}
|
||||
* @private
|
||||
*/
|
||||
this.features_ = [];
|
||||
|
||||
/**
|
||||
* @type {ol.source.Vector}
|
||||
* @private
|
||||
*/
|
||||
this.source_ = options.source;
|
||||
|
||||
this.source_.on(goog.events.EventType.CHANGE,
|
||||
ol.source.Cluster.prototype.onSourceChange_, this);
|
||||
};
|
||||
goog.inherits(ol.source.Cluster, ol.source.Vector);
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.Extent} extent
|
||||
* @param {number} resolution
|
||||
*/
|
||||
ol.source.Cluster.prototype.loadFeatures = function(extent, resolution) {
|
||||
if (resolution !== this.resolution_) {
|
||||
this.clear();
|
||||
this.resolution_ = resolution;
|
||||
this.cluster_();
|
||||
this.addFeatures(this.features_);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* handle the source changing
|
||||
* @private
|
||||
*/
|
||||
ol.source.Cluster.prototype.onSourceChange_ = function() {
|
||||
this.clear();
|
||||
this.cluster_();
|
||||
this.addFeatures(this.features_);
|
||||
this.dispatchChangeEvent();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ol.source.Cluster.prototype.cluster_ = function() {
|
||||
goog.array.clear(this.features_);
|
||||
var extent = ol.extent.createEmpty();
|
||||
goog.asserts.assert(goog.isDef(this.resolution_));
|
||||
var mapDistance = this.distance_ * this.resolution_;
|
||||
var features = this.source_.getFeatures();
|
||||
|
||||
/**
|
||||
* @type {Object.<string, boolean>}
|
||||
*/
|
||||
var clustered = {};
|
||||
|
||||
for (var i = 0, ii = features.length; i < ii; i++) {
|
||||
var feature = features[i];
|
||||
if (!goog.object.containsKey(clustered, goog.getUid(feature).toString())) {
|
||||
var geometry = feature.getGeometry();
|
||||
goog.asserts.assert(geometry instanceof ol.geom.Point);
|
||||
var coordinates = geometry.getCoordinates();
|
||||
ol.extent.createOrUpdateFromCoordinate(coordinates, extent);
|
||||
ol.extent.buffer(extent, mapDistance, extent);
|
||||
|
||||
var neighbors = this.source_.getFeaturesInExtent(extent);
|
||||
goog.asserts.assert(neighbors.length >= 1);
|
||||
neighbors = goog.array.filter(neighbors, function(neighbor) {
|
||||
var uid = goog.getUid(neighbor).toString();
|
||||
if (!goog.object.containsKey(clustered, uid)) {
|
||||
goog.object.set(clustered, uid, true);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
this.features_.push(this.createCluster_(neighbors));
|
||||
}
|
||||
}
|
||||
goog.asserts.assert(
|
||||
goog.object.getCount(clustered) == this.source_.getFeatures().length);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array.<ol.Feature>} features Features
|
||||
* @return {ol.Feature}
|
||||
* @private
|
||||
*/
|
||||
ol.source.Cluster.prototype.createCluster_ = function(features) {
|
||||
var length = features.length;
|
||||
var centroid = [0, 0];
|
||||
for (var i = 0; i < length; i++) {
|
||||
var geometry = features[i].getGeometry();
|
||||
goog.asserts.assert(geometry instanceof ol.geom.Point);
|
||||
var coordinates = geometry.getCoordinates();
|
||||
ol.coordinate.add(centroid, coordinates);
|
||||
}
|
||||
ol.coordinate.scale(centroid, 1 / length);
|
||||
|
||||
var cluster = new ol.Feature(new ol.geom.Point(centroid));
|
||||
cluster.set('features', features);
|
||||
return cluster;
|
||||
};
|
||||
21
test/spec/ol/source/clustersource.test.js
Normal file
21
test/spec/ol/source/clustersource.test.js
Normal file
@@ -0,0 +1,21 @@
|
||||
goog.provide('ol.test.source.ClusterSource');
|
||||
|
||||
goog.require('ol.source.Vector');
|
||||
|
||||
describe('ol.source.Cluster', function() {
|
||||
|
||||
describe('constructor', function() {
|
||||
it('returns a cluster source', function() {
|
||||
var source = new ol.source.Cluster({
|
||||
projection: ol.proj.get('EPSG:4326'),
|
||||
source: new ol.source.Vector()
|
||||
});
|
||||
expect(source).to.be.a(ol.source.Source);
|
||||
expect(source).to.be.a(ol.source.Cluster);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.Cluster');
|
||||
goog.require('ol.source.Source');
|
||||
Reference in New Issue
Block a user