openlayers/tests/Strategy/Cluster.html

   1 <html>
   2 <head>
   3   <script src="../../lib/OpenLayers.js"></script>
   4   <script type="text/javascript">
   5
   6     function test_activate(t) {
   7         t.plan(2);
   8
   9         var strategy = new OpenLayers.Strategy.Cluster();
  10         t.eq(strategy.active, false, "not active after construction");
  11
  12         var layer = new OpenLayers.Layer.Vector("Vector Layer", {
  13             strategies: [strategy]
  14         });
  15         var map = new OpenLayers.Map('map');
  16         map.addLayer(layer);
  17
  18         t.eq(strategy.active, true, "active after adding to map");
  19     }
  20
  21     function test_clusters(t) {
  22         t.plan(17);
  23
  24         function featuresEq(got, exp) {
  25             var eq = false;
  26             if(got instanceof Array && exp instanceof Array) {
  27                 if(got.length === exp.length) {
  28                     for(var i=0; i<got.length; ++i) {
  29                         if(got[i] !== exp[i]) {
  30                             console.log(got[i], exp[i]);
  31                             break;
  32                         }
  33                     }
  34                     eq = (i == got.length);
  35                 }
  36             }
  37             return eq;
  38         }
  39
  40         var strategy = new OpenLayers.Strategy.Cluster();
  41         var layer = new OpenLayers.Layer.Vector("Vector Layer", {
  42             strategies: [strategy],
  43             isBaseLayer: true
  44         });
  45         var map = new OpenLayers.Map('map', {
  46             resolutions: [4, 2, 1],
  47             maxExtent: new OpenLayers.Bounds(-40, -40, 40, 40)
  48         });
  49         map.addLayer(layer);
  50
  51         // create features in a line, 1 unit apart
  52         var features = new Array(80);
  53         for(var i=0; i<80; ++i) {
  54             features[i] = new OpenLayers.Feature.Vector(
  55                 new OpenLayers.Geometry.Point(-40 + i, 0)
  56             );
  57         }
  58
  59         // add one additional feature, with no geometry - just to confirm it doesn't break things
  60         features.push(new OpenLayers.Feature.Vector());
  61
  62         layer.addFeatures(features);
  63         map.setCenter(new OpenLayers.LonLat(0, 0), 0);
  64
  65         // resolution 4
  66         // threshold: 4 * 20 = 80 units
  67         // one cluster
  68         t.eq(layer.features.length, 1, "[4] layer has one cluster");
  69         t.ok(featuresEq(layer.features[0].cluster, features.slice(0, 80)), "[4] cluster includes all features with geometries");
  70
  71         // resolution 2
  72         // threshold: 2 * 20 = 40 units
  73         // two clusters (41 and 39) - first cluster includes all features within 40 units of the first (0-40 or 41 features)
  74         map.zoomIn();
  75         t.eq(layer.features.length, 2, "[2] layer has two clusters");
  76         t.ok(featuresEq(layer.features[0].cluster, features.slice(0, 41)), "[2] first cluster includes first 41 features");
  77         t.ok(featuresEq(layer.features[1].cluster, features.slice(41, 80)), "[2] second cluster includes last 39 features");
  78
  79         // resolution 1
  80         // threshold: 1 * 20 = 20 units
  81         // four clusters (21, 21, 21, and 17)
  82         map.zoomIn();
  83         t.eq(layer.features.length, 4, "[1] layer has four clusters");
  84         t.ok(featuresEq(layer.features[0].cluster, features.slice(0, 21)), "[1] first cluster includes first 21 features");
  85         t.ok(featuresEq(layer.features[1].cluster, features.slice(21, 42)), "[1] second cluster includes second 21 features");
  86         t.ok(featuresEq(layer.features[2].cluster, features.slice(42, 63)), "[1] third cluster includes third 21 features");
  87         t.ok(featuresEq(layer.features[3].cluster, features.slice(63, 80)), "[1] fourth cluster includes last 17 features");
  88
  89         // zoom out and back in to test threshold property (21)
  90         map.zoomOut();
  91         strategy.threshold = 21;
  92         map.zoomIn();
  93         t.eq(layer.features.length, 20, "[1-threshold 21] layer has 20 clusters");
  94         t.ok(featuresEq(layer.features[0].cluster, features.slice(0, 21)), "[1-threshold 21] first cluster includes first 21 features");
  95         t.ok(featuresEq(layer.features[1].cluster, features.slice(21, 42)), "[1-threshold 21] second cluster includes second 21 features");
  96         t.ok(featuresEq(layer.features[2].cluster, features.slice(42, 63)), "[1-threshold 21] third cluster includes third 21 features");
  97         t.ok(featuresEq(layer.features.slice(3, 20), features.slice(63, 80)), "[1-threshold 21] last 17 features are not clustered");
  98
  99         // zoom out and back in to test high threshold
 100         map.zoomOut();
 101         strategy.threshold = 100; // clusters must contain 100 features or more
 102         map.zoomIn();
 103         // the one feature with no geometry is not added to the layer
 104         t.eq(layer.features.length, features.length-1, "[1-threshold 100] layer has " + (features.length-1) + " clusters");
 105         t.ok(featuresEq(layer.features, features.slice(0, 80)), "[1-threshold 100] layer has all features with geometry");
 106
 107     }
 108
 109     function test_deactivate(t) {
 110         t.plan(2);
 111
 112         var strategy = new OpenLayers.Strategy.Cluster();
 113         var layer = new OpenLayers.Layer.Vector("Vector Layer", {
 114             strategies: [strategy]
 115         });
 116         var map = new OpenLayers.Map('map');
 117         map.addLayer(layer);
 118
 119         t.eq(strategy.active, true, "active after adding to map");
 120
 121         map.removeLayer(layer);
 122         t.eq(strategy.active, false, "not active after removing from map");
 123     }
 124
 125   </script>
 126 </head>
 127 <body>
 128     <div id="map" style="width: 400px; height: 200px" />
 129 </body>
 130 </html>