source: Dev/trunk/src/client/dojox/geo/openlayers/tests/test_bench.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 7.2 KB
Line 
1<html>
2<head profile="http://www.w3.org/2002/12/namespace">
3<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/dijit.css">
4<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/tundra/tundra.css">
5<title>Dojo OpenLayers Benchmarks</title>
6<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
7
8<!-- hosted version -->
9<script type="text/javascript" src="http://openlayers.org/api/2/OpenLayers.js"></script>
10
11<script type="text/javascript">
12        var djConfig = {
13                parseOnLoad : true
14        };
15</script>
16
17<script type="text/javascript" src="../../../../dojo/dojo.js"></script>
18
19<script type="text/javascript">
20
21        require(["dojo/ready",
22                                        "dojo/dom",
23                                        "dojo/_base/array",
24                                        "dojo/_base/html",
25                                        "dojox/geo/openlayers/Map",
26                                        "dojox/geo/openlayers/Layer",
27                                        "dojox/geo/openlayers/GfxLayer",
28                                        "dojox/geo/openlayers/Point",
29                                        "dojox/geo/openlayers/LineString",
30                                        "dojox/geo/openlayers/GeometryFeature",
31                                        "dojo/parser"],
32        function(ready, dom, arr, html, Map, Layer, GfxLayer, Point, LineString, GeometryFeature, parser) {
33
34        var map;
35        //      var messageDiv;
36        var Cookies = {
37                init : function(){
38                        var allCookies = document.cookie.split('; ');
39                        for ( var i = 0; i < allCookies.length; i++) {
40                                var cookiePair = allCookies[i].split('=');
41                                this[cookiePair[0]] = cookiePair[1];
42                        }
43                },
44
45                create : function(name, value, days){
46                        var expires = "";
47                        if (days) {
48                                var date = new Date();
49                                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
50                                expires = "; expires=" + date.toGMTString();
51                        }
52                        document.cookie = name + "=" + value + expires + "; path=/";
53                        this[name] = value;
54                },
55
56                erase : function(name){
57                        this.create(name, '', -1);
58                        this[name] = undefined;
59                }
60        };
61
62        Cookies.init();
63        var numLoad = 4;
64        var numLoadString = "numLoad";
65        var cumulativeTimeString = "cumulativeTime";
66
67        ready(function(){
68                var options = {
69                        baseLayerName : "TheLayer",
70                        baseLayerType : dojox.geo.openlayers.BaseLayerType.OSM,
71                        touchHandler : true
72                };
73
74                if (!Cookies[numLoadString])
75                        Cookies.create(numLoadString, numLoad);
76                if (!Cookies[cumulativeTimeString])
77                        Cookies.create(cumulativeTimeString, "0");
78                var div = dom.byId("map");
79                map = new Map(div, options);
80                var la = map.getLayer("name", "TheLayer");
81                arr.forEach(la, function(l){
82                        var ol = l.olLayer;
83                        ol.events.register("loadstart", this, loadStart);
84                        ol.events.register("tileloaded", this, tileLoaded);
85                        ol.events.register("loadend", this, loadEnd);
86                }, this);
87                map.fitTo([ -160, 70, 160, -70 ]);
88
89        });
90
91        var startDate = null;
92        var numTiles = undefined;
93
94        function loadStart(event){
95                startDate = new Date();
96                numTiles = event.object.numLoadingTiles;
97        }
98
99        function tileLoaded(event){
100                if (!startDate)
101                        startDate = new Date();
102                if (!numTiles)
103                        numTiles = event.object.numLoadingTiles;
104        }
105
106        function loadEnd(event){
107                var endDate = new Date();
108                var time = endDate.getTime() - startDate.getTime();
109//              console.log("loading " + numTiles + " tiles took " + time + " ms");
110                if (Cookies[cumulativeTimeString]) {
111                        var ct = Cookies[cumulativeTimeString];
112                        var ict = parseInt(ct) + time;
113                        Cookies.create(cumulativeTimeString, ict.toString());
114                }
115                if (Cookies[numLoadString]) {
116                        var nl = Cookies[numLoadString];
117                        var i = parseInt(nl) - 1;
118                        Cookies.create(numLoadString, i.toString());
119                        if (i > 0) {
120                                window.location.reload();
121                        } else {
122                                ct = Cookies[cumulativeTimeString];
123                                log(numLoad + " load(s) took " + ct + " ms");
124                                log(ct / numLoad + " ms for each load");
125                                Cookies.erase(numLoadString);
126                                Cookies.erase(cumulativeTimeString);
127                                benchPoints();
128        benchLines();
129        showLayers();
130                        }
131                }
132        }
133 
134  var pointLayer = null;
135        var numPoints = dojo.isIE ? 10 : 1000;
136        function benchPoints(){
137                var layer = new GfxLayer();
138                map.addLayer(layer);
139                var startDate = new Date();
140                for ( var i = 0; i < numPoints; i++) {
141                        var x = Math.random() * 360 - 180;
142                        var y = Math.random() * 180 - 90;
143                        var g = new Point({
144                                x : x,
145                                y : y
146                        });
147                        var pf = new GeometryFeature(g).setStroke([ 0, 0, 0 ]).setShapeProperties({
148                                r : 10
149                        });
150                        layer.addFeature(pf);
151                }
152                var endDate = new Date();
153                var time = endDate.getTime() - startDate.getTime();
154                log("creating " + numPoints + " points took " + time + " ms");
155
156                startDate = new Date();
157                layer.redraw();
158                endDate = new Date();
159                time = endDate.getTime() - startDate.getTime();
160                log("redrawing " + numPoints + " points took " + time + " ms");
161
162                var olm = map.getOLMap();
163                var center = olm.getCenter();
164                var zoom = olm.getZoom();
165                startDate = new Date();
166                olm.setCenter(center, zoom + 1);
167                endDate = new Date();
168                time = endDate.getTime() - startDate.getTime();
169                log("zooming " + numPoints + " points took " + time + " ms");
170    olm.setCenter(center, zoom);
171    pointLayer = layer;
172    map.removeLayer(layer);
173        }
174
175var lineLayer = null;
176        var numLines = 100;
177        var numPointsPerLine = 20;
178        function benchLines(){
179                var layer = new GfxLayer();
180                map.addLayer(layer);
181                var startDate = new Date();
182
183                for ( var i = 0; i < numLines; i++) {
184                        var x = Math.random() * 360 - 180;
185                        var y = Math.random() * 180 - 90;
186                        var start = {
187                                x : x,
188                                y : y
189                        };
190                        var a = [];
191                        a.push(start);
192                        for ( var j = 0; j < numPointsPerLine; j++) {
193                                var dx = Math.random() * 3 - 1.5;
194                                var dy = Math.random() * 3 - 1.5;
195        if(x + dx > -180 && x + dx < 180 && y + dy > -90 && y + dy < 90) {
196          x = x + dx;
197          y = y + dy;
198          var p = {x:x, y:y};
199          a.push(p);
200        }
201      }
202      var g = new LineString(a);
203                        var lf = new GeometryFeature(g).setStroke([ 0, 0, 0 ]);
204                        layer.addFeature(lf);
205          }
206
207                var endDate = new Date();
208                var time = endDate.getTime() - startDate.getTime();
209                log("creating " + numLines + " lines took " + time + " ms");
210
211                startDate = new Date();
212                layer.redraw();
213                endDate = new Date();
214                time = endDate.getTime() - startDate.getTime();
215                log("redrawing " + numLines + " lines took " + time + " ms");
216
217                var olm = map.getOLMap();
218                var center = olm.getCenter();
219                var zoom = olm.getZoom();
220                startDate = new Date();
221                olm.setCenter(center, zoom + 1);
222                endDate = new Date();
223                time = endDate.getTime() - startDate.getTime();
224                log("zooming " + numLines + " lines took " + time + " ms");
225    olm.setCenter(center, zoom);
226    lineLayer = layer;
227    map.removeLayer(layer);
228        }
229 
230  function showLayers() {
231    map.addLayer(pointLayer);
232    map.addLayer(lineLayer);
233  }
234 
235  var msgDiv = null;
236  function log(msg) {
237    console.log(msg);
238    if(msgDiv == null) {
239      var layer = new Layer();
240      map.addLayer(layer);
241     
242      var s = layer.olLayer.map.getSize();
243
244      html.style(layer.olLayer.div, {
245          width : s.w.toFixed(),
246          left : "0px",
247          top : "0px",
248          height : s.h.toFixed()
249      });
250      msgDiv = dojo.create("div", {
251        style : {
252          width : "100%",
253          left : "0px",
254          top : "0px",
255          height : "100%",
256          position : "absolute"
257        }
258      }, layer.olLayer.div);
259    }
260    var d = dojo.create("div", {
261    }, msgDiv);
262    d.textContent = msg;
263    d.innerText = msg;
264  }
265  });
266 
267</script>
268
269<style type="text/css">
270.olLayerGoogleCopyright {
271        visibility: hidden;
272}
273</style>
274
275</head>
276<body class="tundra">
277</head>
278
279<div id="map" style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>
280
281</body>
282</html>
Note: See TracBrowser for help on using the repository browser.