patch for #831 - simplify the notion of untiled (now an option on grid layers called 'singleTile') and implementing loading events for gridded/untiled layers. thanks tim and chris for reviewing this beast.
git-svn-id: http://svn.openlayers.org/trunk/openlayers@3725 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
248
examples/layerLoadMonitoring.html
Normal file
248
examples/layerLoadMonitoring.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 500px;
|
||||
height: 475px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#eventsLogID {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 510px;
|
||||
width: 300px;
|
||||
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()">
|
||||
<div id="map"></div>
|
||||
<div id="controls">
|
||||
<div id="eventsLogID">
|
||||
<b>Events Log:</b>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute; top: 500px; width: 700px">
|
||||
<input type="button" value="Clear" style="float:right" onclick="clearLog()"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 500px;
|
||||
height: 475px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#eventsLogID {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 510px;
|
||||
width: 300px;
|
||||
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()">
|
||||
<div id="map"></div>
|
||||
<div id="controls">
|
||||
<div id="eventsLogID">
|
||||
<b>Events Log:</b>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute; top: 500px; width: 700px">
|
||||
<input type="button" value="Clear" style="float:right" onclick="clearLog()"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user