e8960054a9
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12082 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
153 lines
5.9 KiB
HTML
153 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<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.tilecache.osgeo.org/wms-c/Basic.py",
|
|
"http://t2.tilecache.osgeo.org/wms-c/Basic.py",
|
|
"http://t1.tilecache.osgeo.org/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>
|
|
<div id="tags">
|
|
vector, feature, stylemap, wfs, cluster, strategy, cleanup
|
|
</div>
|
|
<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>
|