a "big back buffer" attempt

This commit is contained in:
Éric Lemoine
2011-10-15 23:48:13 +02:00
parent 469350176f
commit 69d3c76254
2 changed files with 76 additions and 5 deletions

View File

@@ -111,6 +111,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
*/
timerId: null,
backBufferData: null,
/**
* Constructor: OpenLayers.Layer.Grid
* Create a new grid layer
@@ -133,6 +135,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
this.events.addEventType("tileloaded");
this.grid = [];
this.backBufferData = {};
this._moveGriddedTiles = OpenLayers.Function.bind(
this.moveGriddedTiles, this
@@ -216,6 +219,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
return obj;
},
setBackBufferData: function() {
this.backBufferData.resolution = this.getServerResolution();
},
/**
* Method: moveTo
* This function is called whenever the map is moved. All the moving
@@ -281,6 +288,30 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
}
if(forceReTile) {
if(OpenLayers.Util.indexOf(
this.SUPPORTED_TRANSITIONS,
this.transitionEffect) != -1) {
if(!this.backBufferData.backBuffer) {
this.backBufferData.backBuffer = this.createBackBuffer();
if(this.backBufferData.backBuffer) {
this.div.insertBefore(this.backBufferData.backBuffer,
this.div.firstChild);
}
}
if(this.backBufferData.backBuffer && this.backBufferData.resolution) {
var resolution = this.getServerResolution();
var scale = this.backBufferData.resolution / resolution;
this.backBufferData.backBuffer.style.width = 100 * scale + '%';
this.backBufferData.backBuffer.style.height = 100 * scale + '%';
var lonLat = {lon: tilesBounds.left, lat: tilesBounds.top},
position = this.getViewPortPxFromLonLat(lonLat, resolution);
this.backBufferData.backBuffer.style.left = position.x + '%';
this.backBufferData.backBuffer.style.top = position.y + '%';
}
}
this.initGriddedTiles(bounds);
} else {
this.scheduleMoveGriddedTiles();
@@ -289,6 +320,31 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
}
},
createBackBuffer: function() {
var backBuffer;
if(this.grid.length > 0) {
var backBuffer = document.createElement('div');
backBuffer.id = this.div.id + '_bb';
backBuffer.style.position = 'absolute';
backBuffer.style.left = '0%';
backBuffer.style.top = '0%';
backBuffer.style.width = '100%';
backBuffer.style.height = '100%';
for(var i=0, lenI=this.grid.length; i<lenI; i++) {
for(var j=0, lenJ=this.grid[i].length; j<lenJ; j++) {
var tile = this.grid[i][j].cloneMarkup();
if(!tile) {
return;
}
tile.style.left = (j * this.tileSize.w) + '%';
tile.style.top = (i * this.tileSize.h) + '%';
backBuffer.appendChild(tile);
}
}
}
return backBuffer;
},
/**
* Method: getServerResolution
* Return the server-supported resolution that is the closest to
@@ -790,6 +846,11 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
//if that was the last tile, then trigger a 'loadend' on the layer
if (this.numLoadingTiles == 0) {
this.events.triggerEvent("loadend");
if(this.backBufferData.backBuffer) {
this.div.removeChild(this.backBufferData.backBuffer);
this.backBufferData.backBuffer = null;
}
this.setBackBufferData();
}
};
tile.events.register("loadend", this, tile.onLoadEnd);
@@ -993,6 +1054,6 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
tileLeft + tileMapWidth,
tileBottom + tileMapHeight);
},
CLASS_NAME: "OpenLayers.Layer.Grid"
});

View File

@@ -17,7 +17,7 @@
* Inherits from:
* - <OpenLayers.Tile.BackBufferable>
*/
OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
/**
* Property: url
@@ -96,7 +96,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
* options - {Object}
*/
initialize: function(layer, position, bounds, url, size, options) {
OpenLayers.Tile.BackBufferable.prototype.initialize.apply(this, arguments);
OpenLayers.Tile.prototype.initialize.apply(this, arguments);
this.url = url; //deprecated remove me
@@ -123,7 +123,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
}
// don't handle async requests any more
this.asyncRequestId = null;
OpenLayers.Tile.BackBufferable.prototype.destroy.apply(this, arguments);
OpenLayers.Tile.prototype.destroy.apply(this, arguments);
},
/**
@@ -134,7 +134,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
* {Boolean} Was a tile drawn?
*/
draw: function() {
var drawn = OpenLayers.Tile.BackBufferable.prototype.draw.apply(this, arguments);
var drawn = OpenLayers.Tile.prototype.draw.apply(this, arguments);
if (drawn) {
if (this.layer != this.layer.map.baseLayer && this.layer.reproject) {
this.bounds = this.getBoundsFromBaseLayer(this.position);
@@ -335,6 +335,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
return frame;
},
cloneMarkup: function() {
if(!this.imgDiv || this.isLoading) {
return;
}
var clone = this.frame.cloneNode(false);
clone.appendChild(this.imgDiv);
this.imgDiv = null;
return clone;
},
/**
* Method: onImageLoad
* Handler for the image onload event