[OpenLayers-Commits] r11159 - in trunk/openlayers: examples
lib/OpenLayers/Layer tests/Layer
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon Feb 21 04:45:23 EST 2011
Author: erilem
Date: 2011-02-21 01:45:22 -0800 (Mon, 21 Feb 2011)
New Revision: 11159
Added:
trunk/openlayers/examples/fullScreen.js
Modified:
trunk/openlayers/examples/fullScreen.html
trunk/openlayers/lib/OpenLayers/Layer/Grid.js
trunk/openlayers/tests/Layer/Grid.html
Log:
deferred tile loading, i.e. the Google Maps way, p=pgiraud,ahocevar,me, r=ahocevar,me (closes #2998)
Modified: trunk/openlayers/examples/fullScreen.html
===================================================================
--- trunk/openlayers/examples/fullScreen.html 2011-02-21 06:48:33 UTC (rev 11158)
+++ trunk/openlayers/examples/fullScreen.html 2011-02-21 09:45:22 UTC (rev 11159)
@@ -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>
Added: trunk/openlayers/examples/fullScreen.js
===================================================================
--- trunk/openlayers/examples/fullScreen.js (rev 0)
+++ trunk/openlayers/examples/fullScreen.js 2011-02-21 09:45:22 UTC (rev 11159)
@@ -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);
+}
Modified: trunk/openlayers/lib/OpenLayers/Layer/Grid.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Layer/Grid.js 2011-02-21 06:48:33 UTC (rev 11158)
+++ trunk/openlayers/lib/OpenLayers/Layer/Grid.js 2011-02-21 09:45:22 UTC (rev 11159)
@@ -88,6 +88,19 @@
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 @@
this.events.addEventType("tileloaded");
this.grid = [];
+
+ this._moveGriddedTiles = OpenLayers.Function.bind(
+ this.moveGriddedTiles, this
+ );
},
/**
@@ -217,8 +234,16 @@
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 @@
/**
* 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);
+ }
},
/**
Modified: trunk/openlayers/tests/Layer/Grid.html
===================================================================
--- trunk/openlayers/tests/Layer/Grid.html 2011-02-21 06:48:33 UTC (rev 11158)
+++ trunk/openlayers/tests/Layer/Grid.html 2011-02-21 09:45:22 UTC (rev 11159)
@@ -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,14 +243,8 @@
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
zoomChanged = false;
@@ -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
More information about the Commits
mailing list