Updated
This commit is contained in:
Éric Lemoine
282
master/examples/test_bench.html
Normal file
282
master/examples/test_bench.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<html>
|
||||
<head profile="http://www.w3.org/2002/12/namespace">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/dijit.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/tundra/tundra.css">
|
||||
<title>Dojo OpenLayers Benchmarks</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
|
||||
<!-- hosted version -->
|
||||
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var djConfig = {
|
||||
parseOnLoad : true
|
||||
};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../../../../dojo/dojo.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
require(["dojo/ready",
|
||||
"dojo/dom",
|
||||
"dojo/_base/array",
|
||||
"dojo/_base/html",
|
||||
"dojox/geo/openlayers/Map",
|
||||
"dojox/geo/openlayers/Layer",
|
||||
"dojox/geo/openlayers/GfxLayer",
|
||||
"dojox/geo/openlayers/Point",
|
||||
"dojox/geo/openlayers/LineString",
|
||||
"dojox/geo/openlayers/GeometryFeature",
|
||||
"dojo/parser"],
|
||||
function(ready, dom, arr, html, Map, Layer, GfxLayer, Point, LineString, GeometryFeature, parser) {
|
||||
|
||||
var map;
|
||||
// var messageDiv;
|
||||
var Cookies = {
|
||||
init : function(){
|
||||
var allCookies = document.cookie.split('; ');
|
||||
for ( var i = 0; i < allCookies.length; i++) {
|
||||
var cookiePair = allCookies[i].split('=');
|
||||
this[cookiePair[0]] = cookiePair[1];
|
||||
}
|
||||
},
|
||||
|
||||
create : function(name, value, days){
|
||||
var expires = "";
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
expires = "; expires=" + date.toGMTString();
|
||||
}
|
||||
document.cookie = name + "=" + value + expires + "; path=/";
|
||||
this[name] = value;
|
||||
},
|
||||
|
||||
erase : function(name){
|
||||
this.create(name, '', -1);
|
||||
this[name] = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
Cookies.init();
|
||||
var numLoad = 4;
|
||||
var numLoadString = "numLoad";
|
||||
var cumulativeTimeString = "cumulativeTime";
|
||||
|
||||
ready(function(){
|
||||
var options = {
|
||||
baseLayerName : "TheLayer",
|
||||
baseLayerType : dojox.geo.openlayers.BaseLayerType.OSM,
|
||||
touchHandler : true
|
||||
};
|
||||
|
||||
if (!Cookies[numLoadString])
|
||||
Cookies.create(numLoadString, numLoad);
|
||||
if (!Cookies[cumulativeTimeString])
|
||||
Cookies.create(cumulativeTimeString, "0");
|
||||
var div = dom.byId("map");
|
||||
map = new Map(div, options);
|
||||
var la = map.getLayer("name", "TheLayer");
|
||||
arr.forEach(la, function(l){
|
||||
var ol = l.olLayer;
|
||||
ol.events.register("loadstart", this, loadStart);
|
||||
ol.events.register("tileloaded", this, tileLoaded);
|
||||
ol.events.register("loadend", this, loadEnd);
|
||||
}, this);
|
||||
map.fitTo([ -160, 70, 160, -70 ]);
|
||||
|
||||
});
|
||||
|
||||
var startDate = null;
|
||||
var numTiles = undefined;
|
||||
|
||||
function loadStart(event){
|
||||
startDate = new Date();
|
||||
numTiles = event.object.numLoadingTiles;
|
||||
}
|
||||
|
||||
function tileLoaded(event){
|
||||
if (!startDate)
|
||||
startDate = new Date();
|
||||
if (!numTiles)
|
||||
numTiles = event.object.numLoadingTiles;
|
||||
}
|
||||
|
||||
function loadEnd(event){
|
||||
var endDate = new Date();
|
||||
var time = endDate.getTime() - startDate.getTime();
|
||||
// console.log("loading " + numTiles + " tiles took " + time + " ms");
|
||||
if (Cookies[cumulativeTimeString]) {
|
||||
var ct = Cookies[cumulativeTimeString];
|
||||
var ict = parseInt(ct) + time;
|
||||
Cookies.create(cumulativeTimeString, ict.toString());
|
||||
}
|
||||
if (Cookies[numLoadString]) {
|
||||
var nl = Cookies[numLoadString];
|
||||
var i = parseInt(nl) - 1;
|
||||
Cookies.create(numLoadString, i.toString());
|
||||
if (i > 0) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
ct = Cookies[cumulativeTimeString];
|
||||
log(numLoad + " load(s) took " + ct + " ms");
|
||||
log(ct / numLoad + " ms for each load");
|
||||
Cookies.erase(numLoadString);
|
||||
Cookies.erase(cumulativeTimeString);
|
||||
benchPoints();
|
||||
benchLines();
|
||||
showLayers();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var pointLayer = null;
|
||||
var numPoints = dojo.isIE ? 10 : 1000;
|
||||
function benchPoints(){
|
||||
var layer = new GfxLayer();
|
||||
map.addLayer(layer);
|
||||
var startDate = new Date();
|
||||
for ( var i = 0; i < numPoints; i++) {
|
||||
var x = Math.random() * 360 - 180;
|
||||
var y = Math.random() * 180 - 90;
|
||||
var g = new Point({
|
||||
x : x,
|
||||
y : y
|
||||
});
|
||||
var pf = new GeometryFeature(g).setStroke([ 0, 0, 0 ]).setShapeProperties({
|
||||
r : 10
|
||||
});
|
||||
layer.addFeature(pf);
|
||||
}
|
||||
var endDate = new Date();
|
||||
var time = endDate.getTime() - startDate.getTime();
|
||||
log("creating " + numPoints + " points took " + time + " ms");
|
||||
|
||||
startDate = new Date();
|
||||
layer.redraw();
|
||||
endDate = new Date();
|
||||
time = endDate.getTime() - startDate.getTime();
|
||||
log("redrawing " + numPoints + " points took " + time + " ms");
|
||||
|
||||
var olm = map.getOLMap();
|
||||
var center = olm.getCenter();
|
||||
var zoom = olm.getZoom();
|
||||
startDate = new Date();
|
||||
olm.setCenter(center, zoom + 1);
|
||||
endDate = new Date();
|
||||
time = endDate.getTime() - startDate.getTime();
|
||||
log("zooming " + numPoints + " points took " + time + " ms");
|
||||
olm.setCenter(center, zoom);
|
||||
pointLayer = layer;
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
|
||||
var lineLayer = null;
|
||||
var numLines = 100;
|
||||
var numPointsPerLine = 20;
|
||||
function benchLines(){
|
||||
var layer = new GfxLayer();
|
||||
map.addLayer(layer);
|
||||
var startDate = new Date();
|
||||
|
||||
for ( var i = 0; i < numLines; i++) {
|
||||
var x = Math.random() * 360 - 180;
|
||||
var y = Math.random() * 180 - 90;
|
||||
var start = {
|
||||
x : x,
|
||||
y : y
|
||||
};
|
||||
var a = [];
|
||||
a.push(start);
|
||||
for ( var j = 0; j < numPointsPerLine; j++) {
|
||||
var dx = Math.random() * 3 - 1.5;
|
||||
var dy = Math.random() * 3 - 1.5;
|
||||
if(x + dx > -180 && x + dx < 180 && y + dy > -90 && y + dy < 90) {
|
||||
x = x + dx;
|
||||
y = y + dy;
|
||||
var p = {x:x, y:y};
|
||||
a.push(p);
|
||||
}
|
||||
}
|
||||
var g = new LineString(a);
|
||||
var lf = new GeometryFeature(g).setStroke([ 0, 0, 0 ]);
|
||||
layer.addFeature(lf);
|
||||
}
|
||||
|
||||
var endDate = new Date();
|
||||
var time = endDate.getTime() - startDate.getTime();
|
||||
log("creating " + numLines + " lines took " + time + " ms");
|
||||
|
||||
startDate = new Date();
|
||||
layer.redraw();
|
||||
endDate = new Date();
|
||||
time = endDate.getTime() - startDate.getTime();
|
||||
log("redrawing " + numLines + " lines took " + time + " ms");
|
||||
|
||||
var olm = map.getOLMap();
|
||||
var center = olm.getCenter();
|
||||
var zoom = olm.getZoom();
|
||||
startDate = new Date();
|
||||
olm.setCenter(center, zoom + 1);
|
||||
endDate = new Date();
|
||||
time = endDate.getTime() - startDate.getTime();
|
||||
log("zooming " + numLines + " lines took " + time + " ms");
|
||||
olm.setCenter(center, zoom);
|
||||
lineLayer = layer;
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
|
||||
function showLayers() {
|
||||
map.addLayer(pointLayer);
|
||||
map.addLayer(lineLayer);
|
||||
}
|
||||
|
||||
var msgDiv = null;
|
||||
function log(msg) {
|
||||
console.log(msg);
|
||||
if(msgDiv == null) {
|
||||
var layer = new Layer();
|
||||
map.addLayer(layer);
|
||||
|
||||
var s = layer.olLayer.map.getSize();
|
||||
|
||||
html.style(layer.olLayer.div, {
|
||||
width : s.w.toFixed(),
|
||||
left : "0px",
|
||||
top : "0px",
|
||||
height : s.h.toFixed()
|
||||
});
|
||||
msgDiv = dojo.create("div", {
|
||||
style : {
|
||||
width : "100%",
|
||||
left : "0px",
|
||||
top : "0px",
|
||||
height : "100%",
|
||||
position : "absolute"
|
||||
}
|
||||
}, layer.olLayer.div);
|
||||
}
|
||||
var d = dojo.create("div", {
|
||||
}, msgDiv);
|
||||
d.textContent = msg;
|
||||
d.innerText = msg;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.olLayerGoogleCopyright {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body class="tundra">
|
||||
</head>
|
||||
|
||||
<div id="map" style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user