ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

deferred tile loading, i.e. the Google Maps way, p=pgiraud,ahocevar,me, r=ahocevar,me (closes #2998)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11159 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2011-02-21 09:45:22 +00:00
parent 7f34868fe2
commit 08acb65e0e
4 changed files with 99 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/fullScreen.html
+9 -30
View File
@@ -1,4 +1,5 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html>
<html>
<head> <head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -6,10 +7,8 @@
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
body { html, body, #map {
margin: 0; margin: 0;
}
#map {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@@ -25,30 +24,7 @@
} }
</style> </style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script src="fullScreen.js"></script>
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"});
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 6);
//map.zoomToMaxExtent();
}
</script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <div id="map"></div>
@@ -65,8 +41,11 @@
</p> </p>
<div id="docs"> <div id="docs">
This example uses CSS to define the dimensions of the map element in order to fill the screen. <p>This example uses CSS to define the dimensions of the map element in order to fill the screen.
When the user resizes the window, the map size changes correspondingly. No scroll bars! When the user resizes the window, the map size changes correspondingly. No scroll bars!</p>
<p>See the
<a href="fullScreen.js" target="_blank">fullScreen.js source</a>
to see how this is done.</p>
</div> </div>
</div> </div>
</body> </body>
examples/fullScreen.js
+30
View File
@@ -0,0 +1,30 @@
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
var ol_wms_nobuffer = new OpenLayers.Layer.WMS( "OpenLayers WMS (no tile buffer)",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}, {buffer: 0});
map.addLayers([ol_wms, ol_wms_nobuffer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 6);
}
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
var ol_wms_nobuffer = new OpenLayers.Layer.WMS( "OpenLayers WMS (no tile buffer)",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}, {buffer: 0});
map.addLayers([ol_wms, ol_wms_nobuffer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 6);
}
lib/OpenLayers/Layer/Grid.js
+50 -22
View File
@@ -87,6 +87,19 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/ */
numLoadingTiles: 0, numLoadingTiles: 0,
/**
* APIProperty: tileLoadingDelay
* {Integer} - Number of milliseconds before we shift and load
* tiles. Default is 100.
*/
tileLoadingDelay: 100,
/**
* Property: timerId
* {Number} - The id of the tileLoadingDelay timer.
*/
timerId: null,
/** /**
* Constructor: OpenLayers.Layer.Grid * Constructor: OpenLayers.Layer.Grid
* Create a new grid layer * Create a new grid layer
@@ -109,6 +122,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
this.events.addEventType("tileloaded"); this.events.addEventType("tileloaded");
this.grid = []; this.grid = [];
this._moveGriddedTiles = OpenLayers.Function.bind(
this.moveGriddedTiles, this
);
}, },
/** /**
@@ -217,8 +234,16 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
if (forceReTile || !tilesBounds.containsBounds(bounds, true)) { if (forceReTile || !tilesBounds.containsBounds(bounds, true)) {
this.initGriddedTiles(bounds); this.initGriddedTiles(bounds);
} else { } else {
//we might have to shift our buffer tiles // we might have to shift our buffer tiles, schedule
this.moveGriddedTiles(bounds); // that
if (this.timerId != null) {
window.clearTimeout(this.timerId);
}
this._bounds = bounds;
this.timerId = window.setTimeout(
this._moveGriddedTiles,
this.tileLoadingDelay
);
} }
} }
} }
@@ -636,28 +661,31 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
/** /**
* Method: moveGriddedTiles * Method: moveGriddedTiles
*
* Parameters:
* bounds - {<OpenLayers.Bounds>}
*/ */
moveGriddedTiles: function(bounds) { moveGriddedTiles: function() {
var bounds = this._bounds;
var shifted = true;
var buffer = this.buffer || 1; var buffer = this.buffer || 1;
while (true) { var tlLayer = this.grid[0][0].position;
var tlLayer = this.grid[0][0].position; var tlViewPort = this.map.getViewPortPxFromLayerPx(tlLayer);
var tlViewPort = if (tlViewPort.x > -this.tileSize.w * (buffer - 1)) {
this.map.getViewPortPxFromLayerPx(tlLayer); this.shiftColumn(true);
if (tlViewPort.x > -this.tileSize.w * (buffer - 1)) { } else if (tlViewPort.x < -this.tileSize.w * buffer) {
this.shiftColumn(true); this.shiftColumn(false);
} else if (tlViewPort.x < -this.tileSize.w * buffer) { } else if (tlViewPort.y > -this.tileSize.h * (buffer - 1)) {
this.shiftColumn(false); this.shiftRow(true);
} else if (tlViewPort.y > -this.tileSize.h * (buffer - 1)) { } else if (tlViewPort.y < -this.tileSize.h * buffer) {
this.shiftRow(true); this.shiftRow(false);
} else if (tlViewPort.y < -this.tileSize.h * buffer) { } else {
this.shiftRow(false); shifted = false;
} else { delete this._bounds;
break; }
} if (shifted) {
}; // we may have other row or columns to shift, schedule it
// with a setTimeout, to give the user a chance to sneak
// in moveTo's
this.timerId = window.setTimeout(this._moveGriddedTiles, 0);
}
}, },
/** /**
tests/Layer/Grid.html
+9 -11
View File
@@ -169,7 +169,7 @@
function test_Layer_Grid_moveTo(t) { function test_Layer_Grid_moveTo(t) {
t.plan(13); t.plan(14);
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(name, url, params); layer = new OpenLayers.Layer.WMS(name, url, params);
@@ -193,9 +193,9 @@
g_WhichFunc = "InitGridded"; g_WhichFunc = "InitGridded";
g_Bounds = bounds; g_Bounds = bounds;
}; };
layer.moveGriddedTiles = function(bounds) { layer._moveGriddedTiles = function() {
g_WhichFunc = "MoveGridded"; g_WhichFunc = "MoveGridded";
g_Bounds = bounds; g_Bounds = layer._bounds;
}; };
var clearTestBounds = function() { var clearTestBounds = function() {
g_WhichFunc = null; g_WhichFunc = null;
@@ -246,12 +246,6 @@
t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called"); t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called");
layer.getTilesBounds = function() {
return tilesBounds;
}
//NO FORCE //NO FORCE
zoomChanged = false; zoomChanged = false;
layer.grid = [ [ {} ] ]; layer.grid = [ [ {} ] ];
@@ -305,9 +299,13 @@
//regular move //regular move
clearTestBounds(); clearTestBounds();
tilesBounds = new OpenLayers.Bounds(10,10,120,120); tilesBounds = new OpenLayers.Bounds(10,10,120,120);
g_WhichFunc = null;
layer.moveTo(null, zoomChanged); layer.moveTo(null, zoomChanged);
t.ok(g_WhichFunc == "MoveGridded", "if tiles not drastically out of bounds, we call moveGriddedTile()"); t.eq(g_WhichFunc, null, "moveGriddedTiles is delayed - not called yet");
t.ok(g_Bounds.equals(b), "if tiles not drastically out of bounds, we call moveGriddedTile() with correct bounds"); t.delay_call(0.2, function() {
t.ok(g_WhichFunc == "MoveGridded", "if tiles not drastically out of bounds, we call moveGriddedTile()");
t.ok(g_Bounds.equals(b), "if tiles not drastically out of bounds, we call moveGriddedTile() with correct bounds");
});
} }
/** THIS WOULD BE WHERE THE TESTS WOULD GO FOR /** THIS WOULD BE WHERE THE TESTS WOULD GO FOR