dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
283 lines (249 loc) • 7.42 kB
HTML
<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>