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

Merge pull request #702 from ahocevar/smart-queue

Browse Source 
New tile image cache and tile queue improvements. r=@bartvde,@elemoine
This commit is contained in:
ahocevar
2013-01-07 06:38:07 -08:00
parent 9adbf431ca 4a3651b7da
commit 18d548f979
18 changed files with 656 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/mobile-base.js
View File

@@ -42,6 +42,7 @@ var init = function (onSelectFeatureFunction) {
theme: null,
projection: sm,
numZoomLevels: 18,
tileManager: new OpenLayers.TileManager(),
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.TouchNavigation({

1
examples/mobile-wmts-vienna.js
View File

@@ -99,6 +99,7 @@ var map;
maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
maxResolution: 156543.0339,
numZoomLevels: 20,
tileManager: new OpenLayers.TileManager(),
controls: [
new OpenLayers.Control.Navigation({
mouseWheelOptions: {

1
lib/OpenLayers.js
View File

@@ -400,6 +400,7 @@
"OpenLayers/Lang.js",
"OpenLayers/Lang/en.js",
"OpenLayers/Spherical.js",
"OpenLayers/TileManager.js",
"OpenLayers/WPSClient.js",
"OpenLayers/WPSProcess.js"
]; // etc.

19
lib/OpenLayers/Layer/Bing.js
View File

@@ -197,20 +197,12 @@ OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, {
res.zoomMax + 1 - res.zoomMin, this.numZoomLevels
)
}, true);
if (!this.isBaseLayer) {
this.redraw();
}
this.updateAttribution();
},
/**
* Method: drawTileFromQueue
* Draws the first tile from the tileQueue, and unqueues that tile
*/
drawTileFromQueue: function() {
// don't start working on the queue before we have a url from initLayer
if (this.url) {
OpenLayers.Layer.XYZ.prototype.drawTileFromQueue.apply(this, arguments);
}
},
/**
* Method: getURL
*
@@ -218,6 +210,9 @@ OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, {
* bounds - {<OpenLayers.Bounds>}
*/
getURL: function(bounds) {
if (!this.url) {
return;
}
var xyz = this.getXYZ(bounds), x = xyz.x, y = xyz.y, z = xyz.z;
var quadDigits = [];
for (var i = z; i > 0; --i) {

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

@@ -113,14 +113,6 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/
numLoadingTiles: 0,
/**
* APIProperty: tileLoadingDelay
* {Integer} Number of milliseconds before we shift and load
* tiles when panning. Ignored if <OpenLayers.Animation.isNative> is
* true. Default is 85.
*/
tileLoadingDelay: 85,
/**
* Property: serverResolutions
* {Array(Number}} This property is documented in subclasses as
@@ -128,32 +120,6 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/
serverResolutions: null,
/**
* Property: moveTimerId
* {Number} The id of the <deferMoveGriddedTiles> timer.
*/
moveTimerId: null,
/**
* Property: deferMoveGriddedTiles
* {Function} A function that defers execution of <moveGriddedTiles> by
* <tileLoadingDelay>. If <OpenLayers.Animation.isNative> is true, this
* is null and unused.
*/
deferMoveGriddedTiles: null,
/**
* Property: tileQueueId
* {Number} The id of the <drawTileFromQueue> animation.
*/
tileQueueId: null,
/**
* Property: tileQueue
* {Array(<OpenLayers.Tile>)} Tiles queued for drawing.
*/
tileQueue: null,
/**
* Property: loading
* {Boolean} Indicates if tiles are being loaded.
@@ -240,7 +206,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* should not be zero.
*/
className: null,
/**
* Register a listener for a particular event with the following syntax:
* (code)
@@ -255,6 +221,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* element - {DOMElement} A reference to layer.events.element.
*
* Supported event types:
* addtile - Triggered when a tile is added to this layer. Listeners receive
* an object as first argument, which has a tile property that
* references the tile that has been added.
* tileloadstart - Triggered when a tile starts loading. Listeners receive
* an object as first argument, which has a tile property that
* references the tile that starts loading.
@@ -269,6 +238,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* still hidden) if a tile failed to load. Listeners receive an object
* as first argument, which has a tile property that references the
* tile that could not be loaded.
* retile - Triggered when the layer recreates its tile grid.
*/
/**
@@ -308,18 +278,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
OpenLayers.Layer.HTTPRequest.prototype.initialize.apply(this,
arguments);
this.grid = [];
this.tileQueue = [];
this._removeBackBuffer = OpenLayers.Function.bind(this.removeBackBuffer, this);
this.initProperties();
if (!OpenLayers.Animation.isNative) {
this.deferMoveGriddedTiles = OpenLayers.Function.bind(function() {
this.moveGriddedTiles(true);
this.moveTimerId = null;
}, this);
}
this.rowSign = this.tileOriginCorner.substr(0, 1) === "t" ? 1 : -1;
},
@@ -358,15 +320,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* map - {<OpenLayers.Map>} The map.
*/
removeMap: function(map) {
if (this.moveTimerId !== null) {
window.clearTimeout(this.moveTimerId);
this.moveTimerId = null;
}
this.clearTileQueue();
if(this.backBufferTimerId !== null) {
window.clearTimeout(this.backBufferTimerId);
this.backBufferTimerId = null;
}
this.removeBackBuffer();
},
/**
@@ -388,7 +342,6 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* destroy() on each of them to kill circular references
*/
clearGrid:function() {
this.clearTileQueue();
if (this.grid) {
for(var iRow=0, len=this.grid.length; iRow<len; iRow++) {
var row = this.grid[iRow];
@@ -456,13 +409,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
// we do not want to copy reference to grid, so we make a new array
obj.grid = [];
obj.gridResolution = null;
// same for backbuffer and tile queue
// same for backbuffer
obj.backBuffer = null;
obj.backBufferTimerId = null;
obj.tileQueue = [];
obj.tileQueueId = null;
obj.loading = false;
obj.moveTimerId = null;
return obj;
},
@@ -608,50 +558,6 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
return data;
},
/**
* Method: queueTileDraw
* Adds a tile to the animation queue that will draw it.
*
* Parameters:
* evt - {Object} Listener argument of the tile's beforedraw event
*/
queueTileDraw: function(evt) {
var tile = evt.object;
if (!~OpenLayers.Util.indexOf(this.tileQueue, tile)) {
// queue only if not in queue already
this.tileQueue.push(tile);
}
if (!this.tileQueueId) {
this.tileQueueId = OpenLayers.Animation.start(
OpenLayers.Function.bind(this.drawTileFromQueue, this),
null, this.div
);
}
return false;
},
/**
* Method: drawTileFromQueue
* Draws the first tile from the tileQueue, and unqueues that tile
*/
drawTileFromQueue: function() {
if (this.tileQueue.length === 0) {
this.clearTileQueue();
} else {
this.tileQueue.shift().draw(true);
}
},
/**
* Method: clearTileQueue
* Clears the animation queue
*/
clearTileQueue: function() {
OpenLayers.Animation.stop(this.tileQueueId);
this.tileQueueId = null;
this.tileQueue = [];
},
/**
* Method: destroyTile
*
@@ -881,7 +787,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* bounds - {<OpenLayers.Bounds>}
*/
initSingleTile: function(bounds) {
this.clearTileQueue();
this.events.triggerEvent("retile");
//determine new tile bounds
var center = bounds.getCenterLonLat();
@@ -1014,7 +920,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* bounds - {<OpenLayers.Bounds>}
*/
initGriddedTiles:function(bounds) {
this.clearTileQueue();
this.events.triggerEvent("retile");
// work out mininum number of rows and columns; this is the number of
// tiles required to cover the viewport plus at least one for panning
@@ -1093,8 +999,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
//shave off exceess rows and colums
this.removeExcessTiles(rowidx, colidx);
var resolution = this.getServerResolution(),
immediately = resolution === this.gridResolution;
var resolution = this.getServerResolution();
// store the resolution of the grid
this.gridResolution = resolution;
@@ -1103,7 +1008,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
return a.distance - b.distance;
});
for (var i=0, ii=tileData.length; i<ii; ++i) {
tileData[i].tile.draw(immediately);
tileData[i].tile.draw();
}
},
@@ -1134,7 +1039,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
var tile = new this.tileClass(
this, position, bounds, null, this.tileSize, this.tileOptions
);
tile.events.register("beforedraw", this, this.queueTileDraw);
this.events.triggerEvent("addtile", {tile: tile});
return tile;
},
@@ -1165,7 +1070,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
aborted: evt.type === "unload"
});
//if that was the last tile, then trigger a 'loadend' on the layer
if (this.tileQueue.length === 0 && this.numLoadingTiles === 0) {
if (this.numLoadingTiles === 0) {
this.loading = false;
this.events.triggerEvent("loadend");
if(this.backBuffer) {
@@ -1218,21 +1123,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
/**
* Method: moveGriddedTiles
*
* Parameter:
* deferred - {Boolean} true if this is a deferred call that should not
* be delayed.
*/
moveGriddedTiles: function(deferred) {
if (!deferred && !OpenLayers.Animation.isNative) {
if (this.moveTimerId != null) {
window.clearTimeout(this.moveTimerId);
}
this.moveTimerId = window.setTimeout(
this.deferMoveGriddedTiles, this.tileLoadingDelay
);
return;
}
moveGriddedTiles: function() {
var buffer = this.buffer + 1;
while(true) {
var tlTile = this.grid[0][0];

17
lib/OpenLayers/Map.js
View File

@@ -370,6 +370,14 @@ OpenLayers.Map = OpenLayers.Class({
* property at the time the control is added to the map.
*/
displayProjection: null,
/**
* APIProperty: tileManager
* {<OpenLayers.TileManager>} If configured at construction time, the map
* will use the TileManager to queue image requests and to cache tile image
* elements.
*/
tileManager: null,
/**
* APIProperty: fallThrough
@@ -579,6 +587,10 @@ OpenLayers.Map = OpenLayers.Class({
this, this.viewPortDiv, null, this.fallThrough,
{includeXY: true}
);
if (this.tileManager) {
this.tileManager.addMap(this);
}
// the layerContainerDiv is the one that holds all the layers
id = this.id + "_OpenLayers_Container";
@@ -778,6 +790,11 @@ OpenLayers.Map = OpenLayers.Class({
this.viewPortDiv.parentNode.removeChild(this.viewPortDiv);
}
this.viewPortDiv = null;
if (this.tileManager) {
this.tileManager.removeMap(this);
this.tileManager = null;
}
if(this.eventListeners) {
this.events.un(this.eventListeners);

19
lib/OpenLayers/Tile.js
View File

@@ -193,22 +193,23 @@ OpenLayers.Tile = OpenLayers.Class({
* is to call <clear> and return the result from <shouldDraw>.
*
* Parameters:
* immediately - {Boolean} When e.g. drawing was aborted by returning false
* from a *beforedraw* listener, the queue manager needs to pass true,
* so the tile will not be cleared and immediately be drawn. Otherwise,
* the tile will be cleared and a *beforedraw* event will be fired.
* force - {Boolean} If true, the tile will not be cleared and no beforedraw
* event will be fired. This is used for drawing tiles asynchronously
* after drawing has been cancelled by returning false from a beforedraw
* listener.
*
* Returns:
* {Boolean} Whether or not the tile should actually be drawn.
* {Boolean} Whether or not the tile should actually be drawn. Returns null
* if a beforedraw listener returned false.
*/
draw: function(immediately) {
if (!immediately) {
draw: function(force) {
if (!force) {
//clear tile's contents and mark as not drawn
this.clear();
}
var draw = this.shouldDraw();
if (draw && !immediately) {
draw = this.events.triggerEvent("beforedraw") !== false;
if (draw && !force && this.events.triggerEvent("beforedraw") === false) {
draw = null;
}
return draw;
},

67
lib/OpenLayers/Tile/Image.js
View File

@@ -20,6 +20,23 @@
*/
OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
/**
* APIProperty: events
* {<OpenLayers.Events>} An events object that handles all
* events on the tile.
*
* Register a listener for a particular event with the following syntax:
* (code)
* tile.events.register(type, obj, listener);
* (end)
*
* Supported event types (in addition to the <OpenLayers.Tile> events):
* beforeload - Triggered before an image is prepared for loading, when the
* url for the image is known already. Listeners may call <setImage> on
* the tile instance. If they do so, that image will be used and no new
* one will be created.
*/
/**
* APIProperty: url
* {String} The URL of the image being requested. No default. Filled in by
@@ -146,11 +163,12 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* Check that a tile should be drawn, and draw it.
*
* Returns:
* {Boolean} Was a tile drawn?
* {Boolean} Was a tile drawn? Or null if a beforedraw listener returned
* false.
*/
draw: function() {
var drawn = OpenLayers.Tile.prototype.draw.apply(this, arguments);
if (drawn) {
var shouldDraw = OpenLayers.Tile.prototype.draw.apply(this, arguments);
if (shouldDraw) {
// The layer's reproject option is deprecated.
if (this.layer != this.layer.map.baseLayer && this.layer.reproject) {
// getBoundsFromBaseLayer is defined in deprecated.js.
@@ -158,17 +176,17 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
}
if (this.isLoading) {
//if we're already loading, send 'reload' instead of 'loadstart'.
this._loadEvent = "reload";
this._loadEvent = "reload";
} else {
this.isLoading = true;
this._loadEvent = "loadstart";
}
this.positionTile();
this.renderTile();
} else {
this.positionTile();
} else if (shouldDraw === false) {
this.unload();
}
return drawn;
return shouldDraw;
},
/**
@@ -177,7 +195,6 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* position it correctly, and set its url.
*/
renderTile: function() {
this.layer.div.appendChild(this.getTile());
if (this.layer.async) {
// Asynchronous image requests call the asynchronous getURL method
// on the layer to fetch an image that covers 'this.bounds'.
@@ -278,18 +295,34 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
return this.imgDiv;
},
/**
* APIMethod: setImage
* Sets the image element for this tile. This method should only be called
* from beforeload listeners.
*
* Parameters
* img - {HTMLImageElement} The image to use for this tile.
*/
setImage: function(img) {
this.imgDiv = img;
},
/**
* Method: initImage
* Creates the content for the frame on the tile.
*/
initImage: function() {
this.events.triggerEvent('beforeload');
this.layer.div.appendChild(this.getTile());
this.events.triggerEvent(this._loadEvent);
var img = this.getImage();
if (this.url && img.getAttribute("src") == this.url) {
this.onImageLoad();
this._loadTimeout = window.setTimeout(
OpenLayers.Function.bind(this.onImageLoad, this), 0
);
} else {
OpenLayers.Event.stopObservingElement(img);
this.stopLoading();
if (this.crossOriginKeyword) {
img.removeAttribute("crossorigin");
}
@@ -328,7 +361,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
} else {
// Remove reference to the image, and leave it to the browser's
// caching and garbage collection.
OpenLayers.Event.stopObservingElement(this.imgDiv);
this.stopLoading();
this.imgDiv = null;
if (img.parentNode) {
img.parentNode.removeChild(img);
@@ -378,7 +411,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
*/
onImageLoad: function() {
var img = this.imgDiv;
OpenLayers.Event.stopObservingElement(img);
this.stopLoading();
img.style.visibility = 'inherit';
img.style.opacity = this.layer.opacity;
this.isLoading = false;
@@ -409,6 +442,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
}
}
},
/**
* Method: stopLoading
* Stops a loading sequence so <onImageLoad> won't be executed.
*/
stopLoading: function() {
OpenLayers.Event.stopObservingElement(this.imgDiv);
window.clearTimeout(this._loadTimeout);
delete this._loadTimeout;
},
/**
* APIMethod: getCanvasContext

404
lib/OpenLayers/TileManager.js Normal file
View File

@@ -0,0 +1,404 @@
/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
* full list of contributors). Published under the 2-clause BSD license.
* See license.txt in the OpenLayers distribution or repository for the
* full text of the license. */
/**
* @requires OpenLayers/Layer/Grid.js
* @requires OpenLayers/Util.js
* @requires OpenLayers/BaseTypes.js
* @requires OpenLayers/BaseTypes/Element.js
*/
/**
* Class: OpenLayers.TileManager
* Provides queueing of image requests and caching of image elements.
*
* Queueing avoids unnecessary image requests while changing zoom levels
* quickly, and helps improve dragging performance on mobile devices that show
* a lag in dragging when loading of new images starts. <zoomDelay> and
* <moveDelay> are the configuration options to control this behavior.
*
* Caching avoids setting the src on image elements for images that have already
* been used. Several maps can share a TileManager instance, in which case each
* map gets its own tile queue, but all maps share the same tile cache.
*/
OpenLayers.TileManager = OpenLayers.Class({
/**
* APIProperty: cacheSize
* {Number} Number of image elements to keep referenced in this instance's
* cache for fast reuse. Default is 256.
*/
cacheSize: 256,
/**
* APIProperty: moveDelay
* {Number} Delay in milliseconds after a map's move event before loading
* tiles. Default is 100.
*/
moveDelay: 100,
/**
* APIProperty: zoomDelay
* {Number} Delay in milliseconds after a map's zoomend event before loading
* tiles. Default is 200.
*/
zoomDelay: 200,
/**
* Property: maps
* {Array(<OpenLayers.Map>)} The maps to manage tiles on.
*/
maps: null,
/**
* Property: tileQueueId
* {Object} The ids of the <drawTilesFromQueue> loop, keyed by map id.
*/
tileQueueId: null,
/**
* Property: tileQueue
* {Object(Array(<OpenLayers.Tile>))} Tiles queued for drawing, keyed by
* map id.
*/
tileQueue: null,
/**
* Property: tileCache
* {Object} Cached image elements, keyed by URL.
*/
tileCache: null,
/**
* Property: tileCacheIndex
* {Array(String)} URLs of cached tiles. First entry is the least recently
* used.
*/
tileCacheIndex: null,
/**
* Constructor: OpenLayers.TileManager
* Constructor for a new <OpenLayers.TileManager> instance.
*
* Parameters:
* options - {Object} Configuration for this instance.
*/
initialize: function(options) {
OpenLayers.Util.extend(this, options);
this.maps = [];
this.tileQueueId = {};
this.tileQueue = {};
this.tileCache = {};
this.tileCacheIndex = [];
},
/**
* Method: addMap
* Binds this instance to a map
*
* Parameters:
* map - {<OpenLayers.Map>}
*/
addMap: function(map) {
if (this._destroyed) {
return;
}
this.maps.push(map);
this.tileQueue[map.id] = [];
for (var i=0, ii=map.layers.length; i<ii; ++i) {
this.addLayer({layer: map.layers[i]});
}
map.events.on({
move: this.move,
zoomend: this.zoomEnd,
addlayer: this.addLayer,
preremovelayer: this.removeLayer,
scope: this
});
},
/**
* Method: removeMap
* Unbinds this instance from a map
*
* Parameters:
* map - {<OpenLayers.Map>}
*/
removeMap: function(map) {
if (this._destroyed) {
return;
}
window.clearTimeout(this.tileQueueId[map.id]);
if (map.layers) {
for (var i=0, ii=map.layers.length; i<ii; ++i) {
this.removeLayer({layer: map.layers[i]});
}
}
if (map.events) {
map.events.un({
move: this.move,
zoomend: this.zoomEnd,
addlayer: this.addLayer,
preremovelayer: this.removeLayer,
scope: this
});
}
delete this.tileQueue[map.id];
delete this.tileQueueId[map.id];
OpenLayers.Util.removeItem(this.maps, map);
},
/**
* Method: move
* Handles the map's move event
*
* Parameters:
* evt - {Object} Listener argument
*/
move: function(evt) {
this.updateTimeout(evt.object, this.moveDelay);
},
/**
* Method: zoomEnd
* Handles the map's zoomEnd event
*
* Parameters:
* evt - {Object} Listener argument
*/
zoomEnd: function(evt) {
this.updateTimeout(evt.object, this.zoomDelay);
},
/**
* Method: addLayer
* Handles the map's addlayer event
*
* Parameters:
* evt - {Object} The listener argument
*/
addLayer: function(evt) {
var layer = evt.layer;
if (layer instanceof OpenLayers.Layer.Grid) {
layer.events.on({
addtile: this.addTile,
retile: this.clearTileQueue,
scope: this
});
var i, j, tile;
for (i=layer.grid.length-1; i>=0; --i) {
for (j=layer.grid[i].length-1; j>=0; --j) {
tile = layer.grid[i][j];
this.addTile({tile: tile});
if (tile.url) {
this.manageTileCache({object: tile});
}
}
}
}
},
/**
* Method: removeLayer
* Handles the map's preremovelayer event
*
* Parameters:
* evt - {Object} The listener argument
*/
removeLayer: function(evt) {
var layer = evt.layer;
if (layer instanceof OpenLayers.Layer.Grid) {
this.clearTileQueue({object: layer});
if (layer.events) {
layer.events.un({
addtile: this.addTile,
retile: this.clearTileQueue,
scope: this
});
}
if (layer.grid) {
var i, j, tile;
for (i=layer.grid.length-1; i>=0; --i) {
for (j=layer.grid[i].length-1; j>=0; --j) {
tile = layer.grid[i][j];
this.unloadTile({object: tile});
if (tile.url) {
this.manageTileCache({object: tile});
}
}
}
}
}
},
/**
* Method: updateTimeout
* Applies the <moveDelay> or <zoomDelay> to the <drawTilesFromQueue> loop.
*
* Parameters:
* map - {<OpenLayers.Map>} The map to update the timeout for
* delay - {Number} The delay to apply
*/
updateTimeout: function(map, delay) {
window.clearTimeout(this.tileQueueId[map.id]);
if (this.tileQueue[map.id].length) {
this.tileQueueId[map.id] = window.setTimeout(
OpenLayers.Function.bind(function() {
this.drawTilesFromQueue(map);
}, this), delay
);
}
},
/**
* Method: addTile
* Listener for the layer's addtile event
*
* Parameters:
* evt - {Object} The listener argument
*/
addTile: function(evt) {
evt.tile.events.on({
beforedraw: this.queueTileDraw,
beforeload: this.manageTileCache,
loadend: this.addToCache,
unload: this.unloadTile,
scope: this
});
},
/**
* Method: unloadTile
* Listener for the tile's unload event
*
* Parameters:
* evt - {Object} The listener argument
*/
unloadTile: function(evt) {
var tile = evt.object;
tile.events.un({
beforedraw: this.queueTileDraw,
beforeload: this.manageTileCache,
loadend: this.addToCache,
unload: this.unloadTile,
scope: this
});
OpenLayers.Util.removeItem(this.tileQueue[tile.layer.map.id], tile);
},
/**
* Method: queueTileDraw
* Adds a tile to the queue that will draw it.
*
* Parameters:
* evt - {Object} Listener argument of the tile's beforedraw event
*/
queueTileDraw: function(evt) {
var tile = evt.object;
var queued = false;
var layer = tile.layer;
// queue only if image with same url not cached already
if (layer.url && (layer.async ||
!this.tileCache[layer.getURL(tile.bounds)])) {
// add to queue only if not in queue already
var tileQueue = this.tileQueue[layer.map.id];
if (!~OpenLayers.Util.indexOf(tileQueue, tile)) {
tileQueue.push(tile);
}
queued = true;
}
return !queued;
},
/**
* Method: drawTilesFromQueue
* Draws tiles from the tileQueue, and unqueues the tiles
*/
drawTilesFromQueue: function(map) {
var tileQueue = this.tileQueue[map.id];
while (tileQueue.length) {
tileQueue.shift().draw(true);
}
},
/**
* Method: manageTileCache
* Adds, updates, removes and fetches cache entries.
*
* Parameters:
* evt - {Object} Listener argument of the tile's beforeload event
*/
manageTileCache: function(evt) {
var tile = evt.object;
var img = this.tileCache[tile.url];
// only use image from cache if it is not on a layer already
if (img && (!img.parentNode ||
OpenLayers.Element.hasClass(img.parentNode, 'olBackBuffer'))) {
if (tile.layer.backBuffer) {
img.style.opacity = 0;
img.style.visibility = 'hidden';
}
tile.setImage(img);
// LRU - move tile to the end of the array to mark it as the most
// recently used
OpenLayers.Util.removeItem(this.tileCacheIndex, tile.url);
this.tileCacheIndex.push(tile.url);
}
},
/**
* Method: addToCache
*
* Parameters:
* evt - {Object} Listener argument for the tile's loadend event
*/
addToCache: function(evt) {
var tile = evt.object;
if (!this.tileCache[tile.url]) {
if (!OpenLayers.Element.hasClass(tile.imgDiv, 'olImageLoadError')) {
if (this.tileCacheIndex.length >= this.cacheSize) {
delete this.tileCache[this.tileCacheIndex[0]];
this.tileCacheIndex.shift();
}
this.tileCache[tile.url] = tile.imgDiv;
this.tileCacheIndex.push(tile.url);
}
}
},
/**
* Method: clearTileQueue
* Clears the tile queue from tiles of a specific layer
*
* Parameters:
* evt - {Object} Listener argument of the layer's retile event
*/
clearTileQueue: function(evt) {
var layer = evt.object;
var tileQueue = this.tileQueue[layer.map.id];
for (var i=tileQueue.length-1; i>=0; --i) {
if (tileQueue[i].layer === layer) {
tileQueue.splice(i, 1);
}
}
},
/**
* Method: destroy
*/
destroy: function() {
for (var i=this.maps.length-1; i>=0; --i) {
this.removeMap(this.maps[i]);
}
this.maps = null;
this.tileQueue = null;
this.tileQueueId = null;
this.tileCache = null;
this.tileCacheIndex = null;
this._destroyed = true;
}
});

14
notes/2.13.md
View File

@@ -37,6 +37,20 @@ Corresponding issues/pull requests:
# Behavior Changes from Past Releases
## Layer.Grid: Tile queue and tileLoadingDelay changes
With the introduction of OpenLayers.TileManager, tile queueing has become optional. The default behavior is back to how it was in OpenLayers 2.11. To use a tile queue in 2.13, the map needs to be configured with a tileManager, e.g.:
var map = new OpenLayers.Map('map', {
tileManager: new OpenLayers.TileManager()
});
The tile queue also works differently than before: it no longer loads one tile at a time. Instead, it waits after a zoom or pan, and loads all tiles after a delay. This has the same effect as previously (less burden on the server), but makes use of the browser's request management. The delay can be configured separately for zooming and moving the map, using the `zoomDelay` (default: 200 ms) and `moveDelay` (default: 100 ms) config options of the TileManager.
The `moveDelay` is the replacement for the `tileLoadingDelay` layer config option, which has been removed. There is no magic any more to only use the delay when requestAnimationFrame is not natively available.
In general, when targeting mobile devices or when using slow servers or connections for tiled layers, it is recommended to configure the map with a TileManager.
## window.$ is no longer an alias for OpenLayers.Util.getElement
We do no longer create a global variable '$' when such a symbol isn't already

3
tests/Layer/ArcGIS93Rest.html
View File

@@ -4,9 +4,6 @@
<script type="text/javascript">window.alert = oldAlert;</script>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
// turn off animation frame handling, so we can check img urls in tests
delete OpenLayers.Layer.Grid.prototype.queueTileDraw;
var isMozilla = (navigator.userAgent.indexOf("compatible") == -1);
var layer;

23
tests/Layer/Bing.html
View File

@@ -1,19 +1,5 @@
<html>
<head>
<script>
/**
* Because browsers that implement requestAnimationFrame may not execute
* animation functions while a window is not displayed (e.g. in a hidden
* iframe as in these tests), we mask the native implementations here. The
* native requestAnimationFrame functionality is tested in Util.html and
* in PanZoom.html (where a popup is opened before panning).
*/
window.requestAnimationFrame =
window.webkitRequestAnimationFrame =
window.mozRequestAnimationFrame =
window.oRequestAnimationFrame =
window.msRequestAnimationFrame = null;
</script>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
var map, layer;
@@ -108,10 +94,9 @@
isBaseLayer: false
}, options));
map.addLayer(layer);
var tile = layer.tileQueue[0];
t.delay_call(5, function() {
t.ok(tile.url, "Tile not empty");
t.ok(layer.grid[0][0].url, "Tile not empty");
map.destroy();
});
}
@@ -186,12 +171,11 @@
layer = new OpenLayers.Layer.Bing(options);
map.addLayer(layer);
map.zoomToMaxExtent();
var tile = layer.tileQueue[0];
t.delay_call(5, function() {
t.ok(OpenLayers.Util.indexOf(layer.attribution, '<img src="//') != -1, "Attribution contains a logo with protocol //");
t.ok(OpenLayers.Util.indexOf(layer.attribution, '<img src="http://') == -1, "Attribution logo does not have http:// protocol");
t.ok(tile.url.indexOf('http:') == -1, "Tile url does not contain http:");
t.ok(layer.grid[1][1].url.indexOf('http:') == -1, "Tile url does not contain http:");
map.destroy();
});
@@ -200,11 +184,10 @@
layer_https = new OpenLayers.Layer.Bing(OpenLayers.Util.applyDefaults({protocol: 'https:'}, options));
map2.addLayer(layer_https);
map2.zoomToMaxExtent();
var tile = layer_https.tileQueue[0];
t.delay_call(5, function() {
t.ok(OpenLayers.Util.indexOf(layer_https.attribution, '<img src="https://') != -1, "Attribution logo has https:// protocol");
t.ok(tile.url.indexOf('https:') == 0, "Tile url contains https:");
t.ok(layer_https.grid[1][1].url.indexOf('https:') == 0, "Tile url contains https:");
map2.destroy();
});
}

53
tests/Layer/Grid.html
View File

@@ -2,9 +2,6 @@
<head>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
// turn off animation frame handling, so we can check img urls in tests
var origQueueTileDraw = OpenLayers.Layer.Grid.prototype.queueTileDraw;
delete OpenLayers.Layer.Grid.prototype.queueTileDraw;
var isMozilla = (navigator.userAgent.indexOf("compatible") == -1);
var layer;
@@ -100,26 +97,6 @@
map.destroy();
}
function test_queueTileDraw(t) {
t.plan(3);
OpenLayers.Layer.Grid.prototype.queueTileDraw = origQueueTileDraw;
var map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(name, url, params);
map.addLayer(layer);
map.setCenter([0, 0], 3);
var queued = layer.tileQueue.length;
t.ok(layer.tileQueue.length, "Tiles queued for drawing");
map.zoomIn();
t.eq(layer.tileQueue.length, queued, "Tile queue has same length after immediate zoom change");
t.delay_call(1, function() {
t.eq(layer.tileQueue.length, 0, "Tiles from queue processed");
});
map.destroy();
delete OpenLayers.Layer.Grid.prototype.queueTileDraw;
}
function test_Layer_Grid_clearTiles (t) {
t.plan(4);
@@ -258,10 +235,7 @@
function test_Layer_Grid_moveTo(t) {
t.plan(17);
var origIsNative = OpenLayers.Animation.isNative;
OpenLayers.Animation.isNative = false;
t.plan(13);
var map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(name, url, params);
@@ -271,23 +245,6 @@
map.setCenter([-10, 0], 5);
var log = [];
var origDeferMoveGriddedTiles = layer.deferMoveGriddedTiles;
layer.deferMoveGriddedTiles = function() {
log.push("deferMoveGriddedTiles");
origDeferMoveGriddedTiles.apply(this, arguments);
};
layer.moveGriddedTiles = function() {
log.push("moveGriddedTiles");
OpenLayers.Layer.WMS.prototype.moveGriddedTiles.apply(this, arguments);
};
map.moveTo([5, 0]);
t.eq(log[0], "moveGriddedTiles", "deferred after moveTo");
map.moveTo([0, 0]);
t.eq(log[1], "moveGriddedTiles", "deferred again after another moveTo");
t.eq(log.length, 2, "no tiles loaded yet");
t.delay_call(1, function() {
t.eq(log[2], "deferMoveGriddedTiles", "tiles moved after tileLoadingDelay");
});
//make sure null bounds doesnt cause script error.
// no test necessary, just action
@@ -309,9 +266,6 @@
g_WhichFunc = "MoveGridded";
g_Bounds = layer.map.getExtent();
};
layer.deferMoveGriddedTiles = function() {
g_WhichFunc = "DeferMoveGridded";
}
var clearTestBounds = function() {
g_WhichFunc = null;
g_Bounds = null;
@@ -418,8 +372,6 @@
layer.moveTo(null, zoomChanged);
t.ok(g_WhichFunc == "InitGridded", "if tiles drastically out of bounds, we call initGriddedTile()");
t.ok(g_Bounds.equals(b), "if tiles drastically out of bounds, we call initGriddedTile() with correct bounds");
OpenLayers.Animation.isNative = origIsNative;
}
/** THIS WOULD BE WHERE THE TESTS WOULD GO FOR
@@ -438,7 +390,7 @@
*/
function test_Layer_Grid_clone(t) {
t.plan(7);
t.plan(6);
var options = {tileSize: new OpenLayers.Size(500,50)};
var map = new OpenLayers.Map('map', options);
@@ -453,7 +405,6 @@
t.ok( clone.grid != layer.grid, "clone does not copy grid");
t.ok( clone.grid.length == 0, "clone creates a new array instead");
t.ok(clone.tileQueue !== layer.tileQueue, "new tileQueue for clone");
t.eq(clone.backBuffer, null, "no backbuffer from original");
t.ok( clone.tileSize.equals(layer.tileSize), "tileSize correctly cloned");

4
tests/Layer/WMS.html
View File

@@ -555,9 +555,6 @@
}
function test_tileBounds(t) {
// do not defer moveGriddedTiles
var isNative = OpenLayers.Animation.isNative;
OpenLayers.Animation.isNative = true;
t.plan(3);
var map = new OpenLayers.Map("map", {projection: "EPSG:3857"});
@@ -575,7 +572,6 @@
t.eq(bounds.right, 0, "0 is 0, and not some super small number");
map.destroy();
OpenLayers.Animation.isNative = isNative;
}

2
tests/Tile.html
View File

@@ -85,7 +85,7 @@
var drawn = tile.draw();
t.eq(log[0], "clear", "tile cleared");
t.eq(log[1], "beforedraw", "beforedraw event fired");
t.eq(drawn, false, "tile not drawn when beforedraw listener returns false");
t.eq(drawn, null, "tile not drawn when beforedraw listener returns false");
drawn = tile.draw(true);
t.eq(log.length, 2, "no beforedraw event fired and tile not cleared when draw called with 'deferred' argument set to true");
t.eq(drawn, true, "tile drawn when draw called with 'deferred' argument set to true");

125
tests/TileManager.html Normal file
View File

@@ -0,0 +1,125 @@
<html>
<head>
<script src="OLLoader.js"></script>
<script type="text/javascript">
function test_initialize(t) {
t.plan(4);
var tileManager = new OpenLayers.TileManager();
var map = new OpenLayers.Map('map', {
tileManager: tileManager
});
var layer = new OpenLayers.Layer.WMS('WMS1', '../img/blank.gif');
map.addLayer(layer);
map.setCenter([16, 48], 9);
t.ok(tileManager.tileQueue[map.id].length, "Tiles queued from layer");
map.removeLayer(layer);
t.eq(tileManager.tileQueue[map.id].length, 0, "Tiles unqueued when layer is removed");
map.addLayer(new OpenLayers.Layer.WMS('WMS2', '../img/blank.gif'));
map.zoomIn();
t.ok(tileManager.tileQueue[map.id].length, "Tiles queued from added layer");
map.destroy();
t.eq(tileManager.tileQueue[map.id], undefined, "Tile queue removed when map was destroyed");
}
function test_destroy(t) {
t.plan(3);
var tileManager = new OpenLayers.TileManager();
var map = new OpenLayers.Map('map', {tileManager: tileManager});
var layer = new OpenLayers.Layer.WMS('WMS', '../img/blank.gif');
map.addLayer(layer);
map.setCenter([16, 48], 9);
var numTileListeners = layer.grid[0][0].events.listeners.beforeload.length;
var numLayerListeners = layer.events.listeners.retile.length;
var numMapListeners = map.events.listeners.preremovelayer.length;
tileManager.destroy();
t.eq(layer.grid[0][0].events.listeners.beforeload.length, numTileListeners - 1, "no listener on tile after destroy");
t.eq(layer.events.listeners.retile.length, numLayerListeners - 1, "no listeners on layer after destroy");
t.eq(map.events.listeners.preremovelayer.length, numMapListeners - 1, "no listeners on map after destroy");
map.destroy();
}
function test_manageTileCache(t) {
t.plan(10);
var tileManager = new OpenLayers.TileManager({
cacheSize: 12
});
var map = new OpenLayers.Map('map', {tileManager: tileManager});
layer = new OpenLayers.Layer.WMS('WMS', '../img/blank.gif');
map.addLayer(layer);
map.setCenter([16, 48], 9);
var gridSize;
var firstInCache, sharedTile;
t.delay_call(2, function() {
t.eq(tileManager.tileCacheIndex.length, 12, "tiles cached");
t.ok(~OpenLayers.Util.indexOf(tileManager.tileCacheIndex, layer.grid[1][2].url), "tile found in cache");
t.ok(tileManager.tileCache[layer.grid[1][2].url] === layer.grid[1][2].imgDiv, "correct object cached");
firstInCache = tileManager.tileCache[tileManager.tileCacheIndex[0]];
sharedTile = tileManager.tileCache[tileManager.tileCacheIndex[11]];
gridSize = layer.div.childNodes.length;
map.setCenter([17, 47]);
});
t.delay_call(4, function() {
t.eq(tileManager.tileCacheIndex.length, 12, "tiles cached");
t.ok(tileManager.tileCache[layer.grid[1][2].url] === layer.grid[1][2].imgDiv, "correct object cached");
t.ok(!(firstInCache.getAttribute("src") in tileManager.tileCache), "old tile discarded");
t.ok(sharedTile.getAttribute("src") in tileManager.tileCache, "shared tile still in cache");
firstInCache = tileManager.tileCache[tileManager.tileCacheIndex[0]];
map.setCenter([16, 48]);
});
t.delay_call(6, function() {
t.ok(!(firstInCache.getAttribute("src") in tileManager.tileCache), "old tile discarded");
t.ok(sharedTile.getAttribute("src") in tileManager.tileCache, "shared tile still in cache");
t.eq(layer.div.childNodes.length, gridSize, 'no unused images left in dom');
map.destroy();
});
}
function test_queueTileDraw(t) {
t.plan(3);
var tileManager = new OpenLayers.TileManager();
var map = new OpenLayers.Map('map', {tileManager: tileManager});
layer = new OpenLayers.Layer.WMS('WMS', '../img/blank.gif');
map.addLayer(layer);
map.setCenter([0, 0], 3);
var queued = tileManager.tileQueue[map.id].length;
t.ok(tileManager.tileQueue[map.id].length, "Tiles queued for drawing");
map.zoomIn();
t.eq(tileManager.tileQueue[map.id].length, queued, "Tile queue has same length after immediate zoom change");
t.delay_call(1, function() {
t.eq(tileManager.tileQueue[map.id].length, 0, "Tiles from queue processed");
map.destroy();
});
}
function test_deferTileDraw(t) {
t.plan(3);
var tileManager = new OpenLayers.TileManager();
var map = new OpenLayers.Map('map', {tileManager: tileManager});
layer = new OpenLayers.Layer.WMS('WMS', '../img/blank.gif');
layer.destroy = function() {}; //we're going to do funky things with the grid
layer.applyBackBuffer = function() {}; // backbuffering isn't under test here
map.addLayer(layer);
map.setCenter([-10, 0], 5);
map.moveTo([5, 0]);
t.ok(tileManager.tileQueue[map.id].length, "tile loading deferred after moveTo");
map.moveTo([0, 0]);
t.ok(tileManager.tileQueue[map.id].length, "deferred again after another moveTo");
t.delay_call(1, function() {
t.eq(tileManager.tileQueue[map.id].length, 0, "tiles loaded after moveDelay");
});
}
</script>
</head>
<body>
<div id="map" style="width:499px;height:549px;display:none"></div>
</body>
</html>

3
tests/deprecated/Layer/MapServer/Untiled.html
View File

@@ -5,9 +5,6 @@
<script src="../../../../lib/deprecated.js"></script>
<script type="text/javascript">
// turn off animation frame handling, so we can check img urls in tests
delete OpenLayers.Layer.Grid.prototype.queueTileDraw;
var isMozilla = (navigator.userAgent.indexOf("compatible") == -1);
var layer;

1
tests/list-tests.html
View File

@@ -231,6 +231,7 @@
<li>Tile/Image.html</li>
<li>Tile/Image/IFrame.html</li>
<li>Tile/UTFGrid.html</li>
<li>TileManager.html</li>
<li>Tween.html</li>
<li>Kinetic.html</li>
<li>Util.html</li>