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>
|
||||
Reference in New Issue
Block a user