283 lines
7.5 KiB
HTML
283 lines
7.5 KiB
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/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>
|