When the resolution does not change, remove backbuffer tile by tile

This change introduces a new 'replace' mode for tile transitions: when the
resolution does not change, which happens when mergeNewParams is called,
the tile will be marked with the .olTileReplace class. If this class sets
the tile's imgDiv display to 'none', the backbuffer for the tile will
immediately be removed when the tile is loaded.
This commit is contained in:
ahocevar
2012-12-28 10:51:23 +01:00
parent 18d548f979
commit c8564838bc
3 changed files with 66 additions and 3 deletions

View File

@@ -336,6 +336,21 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
OpenLayers.Layer.HTTPRequest.prototype.destroy.apply(this, arguments);
},
/**
* APIMethod: mergeNewParams
* Refetches tiles with new params merged, keeping a backbuffer. Each
* loading new tile will have a css class of '.olTileReplacing'. If a
* stylesheet applies a 'display: none' style to that class, any fade-in
* transition will not apply, and backbuffers for each tile will be removed
* as soon as the tile is loaded.
*
* Parameters:
* newParams - {Object}
*
* Returns:
* redrawn: {Boolean} whether the layer was actually redrawn.
*/
/**
* Method: clearGrid
* Go through and remove all tiles from the grid, calling
@@ -489,7 +504,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
});
if(forceReTile) {
if(zoomChanged && this.transitionEffect === 'resize') {
if(zoomChanged && (this.transitionEffect === 'resize' ||
this.gridResolution === resolution)) {
this.applyBackBuffer(resolution);
}
this.initGriddedTiles(bounds);
@@ -692,6 +708,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
markup._j = j;
markup._w = tile.size.w;
markup._h = tile.size.h;
markup.id = tile.id + '_bb';
backBuffer.appendChild(markup);
}
}
@@ -1053,6 +1070,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/
addTileMonitoringHooks: function(tile) {
var replacingCls = 'olTileReplacing';
tile.onLoadStart = function() {
//if that was first tile then trigger a 'loadstart' on the layer
if (this.loading === false) {
@@ -1061,14 +1080,27 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
}
this.events.triggerEvent("tileloadstart", {tile: tile});
this.numLoadingTiles++;
if (this.backBuffer && this.gridResolution === this.backBufferResolution) {
OpenLayers.Element.addClass(tile.imgDiv, replacingCls);
}
};
tile.onLoadEnd = function(evt) {
this.numLoadingTiles--;
var aborted = evt.type === 'unload';
this.events.triggerEvent("tileloaded", {
tile: tile,
aborted: evt.type === "unload"
aborted: aborted
});
if (!aborted && this.backBuffer && this.gridResolution === this.backBufferResolution) {
if (OpenLayers.Element.getStyle(tile.imgDiv, 'display') === 'none') {
var bufferTile = document.getElementById(tile.id + '_bb');
if (bufferTile) {
bufferTile.parentNode.removeChild(bufferTile);
}
}
OpenLayers.Element.removeClass(tile.imgDiv, replacingCls);
}
//if that was the last tile, then trigger a 'loadend' on the layer
if (this.numLoadingTiles === 0) {
this.loading = false;