Files
openlayers/examples/layerLoadMonitoring.html
crschmidt 7da6a3540e Merge the excellent documentation work done during foss4g into trunk. Many
thanks to all the contributors who helped put this together. 
I'm not exactly sure of what's going to happen with this, but for now,
at http://openlayers.org/dev/doc/examples.html you can see links to all the
examples *with descriptions*. Hooray!


git-svn-id: http://svn.openlayers.org/trunk/openlayers@5362 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2007-12-08 14:21:53 +00:00

133 lines
3.7 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Layer Load Monitoring Example</title>
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
#controls {
float: left;
text-align: right;
}
#eventsLogID {
text-align: left;
width: 350px;
height: 475px;
overflow: auto;
border: 1px solid black;
}
</style>
<script src="../lib/Firebug/firebug.js"></script>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
eventsLog = OpenLayers.Util.getElement("eventsLogID");
map = new OpenLayers.Map( 'map' );
map.addControl(new OpenLayers.Control.LayerSwitcher());
buffer0 = new OpenLayers.Layer.WMS( "WMS Buffer 0",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} ,
{ singleTile: false, buffer:0}
);
registerEvents(buffer0);
buffer1 = new OpenLayers.Layer.WMS( "WMS Buffer 1",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} ,
{ singleTile: false, buffer:1}
);
registerEvents(buffer1);
buffer2 = new OpenLayers.Layer.WMS( "WMS Buffer 2",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} ,
{ singleTile: false, buffer:2 }
);
registerEvents(buffer2);
singleTileLayer = new OpenLayers.Layer.WMS( "Single Tile Layer",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} ,
{ singleTile: true}
);
registerEvents(singleTileLayer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
function registerEvents(layer) {
layer.logEvent = function(event) {
eventsLog.innerHTML += "<br>(" + getTimeStamp() + ") " +
this.name + ": " + event;
}
layer.events.register("loadstart", layer, function() {
this.logEvent("Load Start");
});
layer.events.register("tileloaded", layer, function() {
this.logEvent("Tile loaded. " + this.numLoadingTiles + " left.");
});
layer.events.register("loadend", layer, function() {
this.logEvent("Load End. Grid:" + this.grid.length + "x" + this.grid[0].length);
});
map.addLayer(layer);
}
function getTimeStamp() {
var date = new Date();
var timeParts = [
date.getHours(),
date.getMinutes(),
date.getSeconds()
];
var timeStamp = timeParts.join(":");
return timeStamp;
}
function clearLog() {
eventsLog.innerHTML = "<b>Events Log:</b>";
}
</script>
</head>
<body onload="init()">
<h1 id="title">Layer Load Monitoring Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate a method for monitoring tile loading performance.
</p>
<div id="map" style="float:left;"></div>
<div id="controls">
<div id="eventsLogID">
<b>Events Log:</b>
</div>
<input type="button" value="Clear" onclick="clearLog()"/>
</div>
<div id="docs">
</div>
</body>
</html>