Adding a threshold property to the cluster strategy. If a threshold set, clusters will only be created if the number of features in a group meets or exceeds the threshold number. r=elemoine,crschmidt (closes #1815)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9119 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
145
examples/strategy-cluster-threshold.html
Normal file
145
examples/strategy-cluster-threshold.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Cluster Strategy Threshold</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 2em;
|
||||
}
|
||||
#reset {
|
||||
margin-left: 2em;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// create a semi-random grid of features to be clustered
|
||||
var dx = 3;
|
||||
var dy = 3;
|
||||
var px, py;
|
||||
var features = [];
|
||||
for(var x=-45; x<=45; x+=dx) {
|
||||
for(var y=-22.5; y<=22.5; y+=dy) {
|
||||
px = x + (2 * dx * (Math.random() - 0.5));
|
||||
py = y + (2 * dy * (Math.random() - 0.5));
|
||||
features.push(new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Point(px, py), {x: px, y: py}
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
var map, strategy, clusters;
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map');
|
||||
var base = new OpenLayers.Layer.WMS("OpenLayers WMS",
|
||||
["http://t3.labs.metacarta.com/wms-c/Basic.py",
|
||||
"http://t2.labs.metacarta.com/wms-c/Basic.py",
|
||||
"http://t1.labs.metacarta.com/wms-c/Basic.py"],
|
||||
{layers: 'satellite'}
|
||||
);
|
||||
|
||||
var style = new OpenLayers.Style({
|
||||
pointRadius: "${radius}",
|
||||
fillColor: "#ffcc66",
|
||||
fillOpacity: 0.8,
|
||||
strokeColor: "#cc6633",
|
||||
strokeWidth: "${width}",
|
||||
strokeOpacity: 0.8
|
||||
}, {
|
||||
context: {
|
||||
width: function(feature) {
|
||||
return (feature.cluster) ? 2 : 1;
|
||||
},
|
||||
radius: function(feature) {
|
||||
var pix = 2;
|
||||
if(feature.cluster) {
|
||||
pix = Math.min(feature.attributes.count, 7) + 2;
|
||||
}
|
||||
return pix;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
strategy = new OpenLayers.Strategy.Cluster();
|
||||
|
||||
clusters = new OpenLayers.Layer.Vector("Clusters", {
|
||||
strategies: [strategy],
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
"default": style,
|
||||
"select": {
|
||||
fillColor: "#8aeeef",
|
||||
strokeColor: "#32a8a9"
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
var select = new OpenLayers.Control.SelectFeature(
|
||||
clusters, {hover: true}
|
||||
);
|
||||
map.addControl(select);
|
||||
select.activate();
|
||||
clusters.events.on({"featureselected": display});
|
||||
|
||||
map.addLayers([base, clusters]);
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
|
||||
|
||||
reset();
|
||||
$("reset").onclick = reset;
|
||||
|
||||
}
|
||||
|
||||
function reset() {
|
||||
var distance = parseInt($("distance").value);
|
||||
var threshold = parseInt($("threshold").value);
|
||||
strategy.distance = distance || strategy.distance;
|
||||
strategy.threshold = threshold || strategy.threshold;
|
||||
$("distance").value = strategy.distance;
|
||||
$("threshold").value = strategy.threshold || "null";
|
||||
clusters.removeFeatures(clusters.features);
|
||||
clusters.addFeatures(features);
|
||||
}
|
||||
|
||||
function display(event) {
|
||||
var f = event.feature;
|
||||
var el = $("output");
|
||||
if(f.cluster) {
|
||||
el.innerHTML = "cluster of " + f.attributes.count;
|
||||
} else {
|
||||
el.innerHTML = "unclustered " + f.geometry;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Cluster Strategy Threshold</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrates the use of the cluster strategy threshold property.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>The Cluster strategy lets you display points representing clusters
|
||||
of features within some pixel distance. You can control the behavior
|
||||
of the cluster strategy by setting its distance and threshold properties.
|
||||
The distance determines the search radius (in pixels) for features to
|
||||
cluster. The threshold determines the minimum number of features to
|
||||
be considered a cluster.</p>
|
||||
</div>
|
||||
<br />
|
||||
<p>Cluster details: <span id="output">hover over a feature to see details.</span></p>
|
||||
<ul>
|
||||
<li>
|
||||
<input id="distance" name="distance" type="text" value="" size="3" />
|
||||
<label for="distance">distance</label>
|
||||
</li>
|
||||
<li>
|
||||
<input id="threshold" name="threshold" type="text" value="" size="3" />
|
||||
<label for="threshold">threshold</label>
|
||||
</li>
|
||||
</ul>
|
||||
<button id="reset">recluster</button>
|
||||
</body>
|
||||
</html>
|
||||
@@ -22,6 +22,17 @@ OpenLayers.Strategy.Cluster = OpenLayers.Class(OpenLayers.Strategy, {
|
||||
*/
|
||||
distance: 20,
|
||||
|
||||
/**
|
||||
* APIProperty: threshold
|
||||
* {Integer} Optional threshold below which original features will be
|
||||
* added to the layer instead of clusters. For example, a threshold
|
||||
* of 3 would mean that any time there are 2 or fewer features in
|
||||
* a cluster, those features will be added directly to the layer instead
|
||||
* of a cluster representing those features. Default is null (which is
|
||||
* equivalent to 1 - meaning that clusters may contain just one feature).
|
||||
*/
|
||||
threshold: null,
|
||||
|
||||
/**
|
||||
* Property: features
|
||||
* {Array(<OpenLayers.Feature.Vector>)} Cached features.
|
||||
@@ -122,15 +133,9 @@ OpenLayers.Strategy.Cluster = OpenLayers.Class(OpenLayers.Strategy, {
|
||||
|
||||
/**
|
||||
* Method: clearCache
|
||||
* Clear out the cached features. This destroys features, assuming
|
||||
* nothing else has a reference.
|
||||
* Clear out the cached features.
|
||||
*/
|
||||
clearCache: function() {
|
||||
if(this.features) {
|
||||
for(var i=0; i<this.features.length; ++i) {
|
||||
this.features[i].destroy();
|
||||
}
|
||||
}
|
||||
this.features = null;
|
||||
},
|
||||
|
||||
@@ -168,6 +173,19 @@ OpenLayers.Strategy.Cluster = OpenLayers.Class(OpenLayers.Strategy, {
|
||||
}
|
||||
this.layer.destroyFeatures();
|
||||
if(clusters.length > 0) {
|
||||
if(this.threshold > 1) {
|
||||
var clone = clusters.slice();
|
||||
clusters = [];
|
||||
var candidate;
|
||||
for(var i=0, len=clone.length; i<len; ++i) {
|
||||
candidate = clone[i];
|
||||
if(candidate.attributes.count < this.threshold) {
|
||||
Array.prototype.push.apply(clusters, candidate.cluster);
|
||||
} else {
|
||||
clusters.push(candidate);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.clustering = true;
|
||||
// A legitimate feature addition could occur during this
|
||||
// addFeatures call. For clustering to behave well, features
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
function test_clusters(t) {
|
||||
t.plan(10);
|
||||
t.plan(17);
|
||||
|
||||
function featuresEq(got, exp) {
|
||||
var eq = false;
|
||||
@@ -82,9 +82,28 @@
|
||||
map.zoomIn();
|
||||
t.eq(layer.features.length, 4, "[1] layer has four clusters");
|
||||
t.ok(featuresEq(layer.features[0].cluster, features.slice(0, 21)), "[1] first cluster includes first 21 features");
|
||||
t.ok(featuresEq(layer.features[1].cluster, features.slice(21, 42)), "[2] second cluster includes second 21 features");
|
||||
t.ok(featuresEq(layer.features[2].cluster, features.slice(42, 63)), "[2] third cluster includes third 21 features");
|
||||
t.ok(featuresEq(layer.features[3].cluster, features.slice(63, 80)), "[2] fourth cluster includes last 17 features");
|
||||
t.ok(featuresEq(layer.features[1].cluster, features.slice(21, 42)), "[1] second cluster includes second 21 features");
|
||||
t.ok(featuresEq(layer.features[2].cluster, features.slice(42, 63)), "[1] third cluster includes third 21 features");
|
||||
t.ok(featuresEq(layer.features[3].cluster, features.slice(63, 80)), "[1] fourth cluster includes last 17 features");
|
||||
|
||||
// zoom out and back in to test threshold property (21)
|
||||
map.zoomOut();
|
||||
strategy.threshold = 21;
|
||||
map.zoomIn();
|
||||
t.eq(layer.features.length, 20, "[1-threshold 21] layer has 20 clusters");
|
||||
t.ok(featuresEq(layer.features[0].cluster, features.slice(0, 21)), "[1-threshold 21] first cluster includes first 21 features");
|
||||
t.ok(featuresEq(layer.features[1].cluster, features.slice(21, 42)), "[1-threshold 21] second cluster includes second 21 features");
|
||||
t.ok(featuresEq(layer.features[2].cluster, features.slice(42, 63)), "[1-threshold 21] third cluster includes third 21 features");
|
||||
t.ok(featuresEq(layer.features.slice(3, 20), features.slice(63, 80)), "[1-threshold 21] last 17 features are not clustered");
|
||||
|
||||
// zoom out and back in to test high threshold
|
||||
map.zoomOut();
|
||||
strategy.threshold = 100; // clusters must contain 100 features or more
|
||||
map.zoomIn();
|
||||
// the one feature with no geometry is not added to the layer
|
||||
t.eq(layer.features.length, features.length-1, "[1-threshold 100] layer has " + (features.length-1) + " clusters");
|
||||
t.ok(featuresEq(layer.features, features.slice(0, 80)), "[1-threshold 100] layer has all features with geometry");
|
||||
|
||||
}
|
||||
|
||||
function test_deactivate(t) {
|
||||
|
||||
Reference in New Issue
Block a user