OpenLayers OpenLayers

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

Revision 7930, 5.3 kB (checked in by ahocevar, 4 months ago)

New vector rendering for better performance and less renderer specific limitations. r=elemoine (closes #1675, closes #1656, closes #1631, closes #1431, closes #1709)

  • Property svn:eol-style set to native
  • Property svn:keywords set to Id Author Date Revision
Line 
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>
Note: See TracBrowser for help on using the browser.