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

39
examples/fullScreen.html
View File

@@ -1,4 +1,5 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
<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" />
@@ -6,10 +7,8 @@
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
body {
html, body, #map {
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
@@ -25,30 +24,7 @@
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
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>
<script src="fullScreen.js"></script>
</head>
<body onload="init()">
<div id="map"></div>
@@ -65,8 +41,11 @@
</p>
<div id="docs">
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!
<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!</p>
<p>See the
<a href="fullScreen.js" target="_blank">fullScreen.js source</a>
to see how this is done.</p>
</div>
</div>
</body>

30
examples/fullScreen.js Normal file
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);
}

72
lib/OpenLayers/Layer/Grid.js
View File

@@ -87,6 +87,19 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/
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
* Create a new grid layer
@@ -109,6 +122,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
this.events.addEventType("tileloaded");
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)) {
this.initGriddedTiles(bounds);
} else {
//we might have to shift our buffer tiles
this.moveGriddedTiles(bounds);
// we might have to shift our buffer tiles, schedule
// 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
*
* Parameters:
* bounds - {<OpenLayers.Bounds>}
*/
moveGriddedTiles: function(bounds) {
moveGriddedTiles: function() {
var bounds = this._bounds;
var shifted = true;
var buffer = this.buffer || 1;
while (true) {
var tlLayer = this.grid[0][0].position;
var tlViewPort =
this.map.getViewPortPxFromLayerPx(tlLayer);
if (tlViewPort.x > -this.tileSize.w * (buffer - 1)) {
this.shiftColumn(true);
} else if (tlViewPort.x < -this.tileSize.w * buffer) {
this.shiftColumn(false);
} else if (tlViewPort.y > -this.tileSize.h * (buffer - 1)) {
this.shiftRow(true);
} else if (tlViewPort.y < -this.tileSize.h * buffer) {
this.shiftRow(false);
} else {
break;
}
};
var tlLayer = this.grid[0][0].position;
var tlViewPort = this.map.getViewPortPxFromLayerPx(tlLayer);
if (tlViewPort.x > -this.tileSize.w * (buffer - 1)) {
this.shiftColumn(true);
} else if (tlViewPort.x < -this.tileSize.w * buffer) {
this.shiftColumn(false);
} else if (tlViewPort.y > -this.tileSize.h * (buffer - 1)) {
this.shiftRow(true);
} else if (tlViewPort.y < -this.tileSize.h * buffer) {
this.shiftRow(false);
} else {
shifted = false;
delete this._bounds;
}
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);
}
},
/**

22
tests/Layer/Grid.html
View File

@@ -169,7 +169,7 @@
function test_Layer_Grid_moveTo(t) {
t.plan(13);
t.plan(14);
var map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(name, url, params);
@@ -193,9 +193,9 @@
g_WhichFunc = "InitGridded";
g_Bounds = bounds;
};
layer.moveGriddedTiles = function(bounds) {
layer._moveGriddedTiles = function() {
g_WhichFunc = "MoveGridded";
g_Bounds = bounds;
g_Bounds = layer._bounds;
};
var clearTestBounds = function() {
g_WhichFunc = null;
@@ -243,13 +243,7 @@
clearTestBounds();
layer.singleTile = true;
layer.moveTo(null, zoomChanged);
t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called");
layer.getTilesBounds = function() {
return tilesBounds;
}
t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called");
//NO FORCE
@@ -305,9 +299,13 @@
//regular move
clearTestBounds();
tilesBounds = new OpenLayers.Bounds(10,10,120,120);
g_WhichFunc = null;
layer.moveTo(null, zoomChanged);
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");
t.eq(g_WhichFunc, null, "moveGriddedTiles is delayed - not called yet");
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