You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 lines
7.3 KiB
282 lines
7.3 KiB
<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/2/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>
|
|
|