|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <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> |