openlayers/tests/manual/vector-features-performance.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Vector Features Performance Test</title>
   4     <style type="text/css">
   5         body {
   6             font-size: 0.8em;
   7         }
   8         p {
   9             padding-top: 1em;
  10         }
  11         #map {
  12             width: 512px;
  13             height: 512px;
  14             border: 1px solid black;
  15         }
  16     </style>
  17
  18     <script src="../../lib/Firebug/firebug.js"></script>
  19     <script src="../../lib/OpenLayers.js"></script>
  20     <script type="text/javascript">
  21         var map, vectorLayer, drawFeature, features
  22
  23         var run = 0;
  24
  25         function nextRun() {
  26             window.setTimeout(function() {
  27                 if (run < 5) {
  28                     vectorLayer.removeFeatures(features);
  29                 }
  30             }, 900);
  31
  32             window.setTimeout(function(){
  33                 run++;
  34
  35                 switch(run) {
  36                     case 1:
  37                         console.log("First run - feature bboxes will be cached");
  38                         map.setCenter(new OpenLayers.LonLat(-22.5, -22.5), 3);
  39                         vectorTestNew()
  40                         break;
  41                     case 2:
  42                         console.log("Test with all features inside extent");
  43                         vectorTestOld();
  44                         break;
  45                     case 3:
  46                         vectorTestNew();
  47                         break;
  48                     case 4:
  49                         console.log("Test with some features outside extent");
  50                         map.setCenter(new OpenLayers.LonLat(-22.5, -22.5), 5);
  51                         vectorTestOld();
  52                         break;
  53                     case 5:
  54                         vectorTestNew();
  55                         break;
  56                 }
  57             }, 1000);
  58         }
  59
  60         function vectorTestOld(){
  61             vectorLayer.renderer.drawFeature = function(feature, style) {
  62                 if(style == null) {
  63                     style = feature.style;
  64                 }
  65                 if (feature.geometry) {
  66                     this.drawGeometry(feature.geometry, style, feature.id);
  67                 }
  68             };
  69
  70             console.time("addFeaturesOld");
  71             vectorLayer.addFeatures(features);
  72             console.timeEnd("addFeaturesOld");
  73         }
  74
  75         function vectorTestNew() {
  76             vectorLayer.renderer.drawFeature = OpenLayers.Renderer[vectorLayer.renderer.CLASS_NAME.split(".")[2]].prototype.drawFeature;
  77
  78             console.time("addFeatures");
  79             vectorLayer.addFeatures(features);
  80             console.timeEnd("addFeatures");
  81         }
  82
  83         function init(){
  84             map = new OpenLayers.Map('map');
  85
  86             vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {isBaseLayer: true});
  87
  88             map.addLayers([vectorLayer]);
  89             map.addControl(new OpenLayers.Control.MousePosition());
  90             map.setCenter(new OpenLayers.LonLat(-22.5, -22.5), 3);
  91
  92             vectorLayer.events.register("featuresadded", this, nextRun);
  93
  94             features = new Array(200);
  95             var x, y
  96             for (var i = 0; i < 200; i++) {
  97                 x = -Math.random()*45;
  98                 y = -Math.random()*45;
  99                 features[i] = new OpenLayers.Feature.Vector(
 100                     new OpenLayers.Geometry.LinearRing([
 101                         new OpenLayers.Geometry.Point(
 102                             -Math.random()*5+x, -Math.random()*5+y),
 103                         new OpenLayers.Geometry.Point(
 104                             -Math.random()*5+x, -Math.random()*5+y),
 105                         new OpenLayers.Geometry.Point(
 106                             -Math.random()*5+x, -Math.random()*5+y),
 107                         new OpenLayers.Geometry.Point(
 108                             -Math.random()*5+x, -Math.random()*5+y),
 109                         new OpenLayers.Geometry.Point(
 110                             -Math.random()*5+x, -Math.random()*5+y),
 111                         new OpenLayers.Geometry.Point(
 112                             -Math.random()*5+x, -Math.random()*5+y),
 113                         new OpenLayers.Geometry.Point(
 114                             -Math.random()*5+x, -Math.random()*5+y),
 115                         new OpenLayers.Geometry.Point(
 116                             -Math.random()*5+x, -Math.random()*5+y),
 117                         new OpenLayers.Geometry.Point(
 118                             -Math.random()*5+x, -Math.random()*5+y),
 119                         new OpenLayers.Geometry.Point(
 120                             -Math.random()*5+x, -Math.random()*5+y)
 121                     ]));
 122
 123             }
 124
 125             nextRun();
 126         }
 127     </script>
 128   </head>
 129   <body onload="init()">
 130     <h1 id="title">New Rendering - Vector Features Performance Test</h1>
 131     <div id="map"></div>
 132     <p>
 133     This test examines if checking for a feature being inside the visible
 134     extent before rendering it has an impact on performance. Open the Firebug
 135     console after running this test (hit F12) to see the results.
 136     <br/>
 137     After the performance test, you can drag around the map to see how the new
 138     vector rendering feels where features get rendered only when they are visible
 139     inside the map extent.
 140     </p>
 141   </body>
 142 </html>