ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9119 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2009-03-23 17:34:28 +00:00
parent 85dc3a9880
commit 3e55ef6aa3
3 changed files with 193 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
examples/strategy-cluster-threshold.html Normal file
View 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>

32
lib/OpenLayers/Strategy/Cluster.js
View File

@@ -22,6 +22,17 @@ OpenLayers.Strategy.Cluster = OpenLayers.Class(OpenLayers.Strategy, {
*/ */
distance: 20, 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 * Property: features
* {Array(<OpenLayers.Feature.Vector>)} Cached features. * {Array(<OpenLayers.Feature.Vector>)} Cached features.
@@ -122,15 +133,9 @@ OpenLayers.Strategy.Cluster = OpenLayers.Class(OpenLayers.Strategy, {
/** /**
* Method: clearCache * Method: clearCache
* Clear out the cached features. This destroys features, assuming * Clear out the cached features.
* nothing else has a reference.
*/ */
clearCache: function() { clearCache: function() {
if(this.features) {
for(var i=0; i<this.features.length; ++i) {
this.features[i].destroy();
}
}
this.features = null; this.features = null;
}, },
@@ -168,6 +173,19 @@ OpenLayers.Strategy.Cluster = OpenLayers.Class(OpenLayers.Strategy, {
} }
this.layer.destroyFeatures(); this.layer.destroyFeatures();
if(clusters.length > 0) { 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; this.clustering = true;
// A legitimate feature addition could occur during this // A legitimate feature addition could occur during this
// addFeatures call. For clustering to behave well, features // addFeatures call. For clustering to behave well, features

27
tests/Strategy/Cluster.html
View File

@@ -19,7 +19,7 @@
} }
function test_clusters(t) { function test_clusters(t) {
t.plan(10); t.plan(17);
function featuresEq(got, exp) { function featuresEq(got, exp) {
var eq = false; var eq = false;
@@ -82,9 +82,28 @@
map.zoomIn(); map.zoomIn();
t.eq(layer.features.length, 4, "[1] layer has four clusters"); 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[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[1].cluster, features.slice(21, 42)), "[1] 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[2].cluster, features.slice(42, 63)), "[1] 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[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) { function test_deactivate(t) {