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>
|
||||
@@ -1,9 +1,9 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 512px;
|
||||
height: 512px;
|
||||
#mapDiv {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
@@ -11,20 +11,30 @@
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
function init(){
|
||||
var map = new OpenLayers.Map('map', {maxResolution: 'auto'});
|
||||
map = new OpenLayers.Map('mapDiv', {maxResolution: 'auto'});
|
||||
|
||||
var ol_wms = new OpenLayers.Layer.WMS.Untiled( "OpenLayers WMS",
|
||||
var old_ol_wms = new OpenLayers.Layer.WMS.Untiled( "WMS.Untiled",
|
||||
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
|
||||
ol_wms.addOptions({isBaseLayer: true});
|
||||
map.addLayers([ol_wms]);
|
||||
old_ol_wms.addOptions({isBaseLayer: true});
|
||||
|
||||
var new_ol_wms = new OpenLayers.Layer.WMS.Untiled( "WMS w/singleTile",
|
||||
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},
|
||||
{ singleTile: true, ratio: 1 } );
|
||||
new_ol_wms.addOptions({isBaseLayer: true});
|
||||
|
||||
map.addLayers([old_ol_wms, new_ol_wms]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
|
||||
map.setCenter(new OpenLayers.LonLat(6.5, 40.5), 4);
|
||||
}
|
||||
// -->
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>OpenLayers Example</h1>
|
||||
<div id="map"></div>
|
||||
<div id="mapDiv"></div>
|
||||
<p> The first layer is an old OpenLayers.Layer.WMS.Untiled layer, using
|
||||
a default ratio value of 1.5.
|
||||
<p> The second layer is an OpenLayers.Layer.WMS layer with singleTile set
|
||||
to true, and with a ratio of 1.
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user