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

Optimizing positions for rendering

Browse Source 
Calculating pixel positions from origin and grid index causes alignment
issues in the grid. By going back to incremental positioning, we get a
result without blank spaces between tiles again.
This commit is contained in:
ahocevar
2012-10-12 03:23:56 +02:00
parent 66455600c7
commit ff4a1b2468
3 changed files with 22 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -875,34 +875,23 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
* resolution - {Number}
*
* Returns:
* {Object} Object containing properties tilelon, tilelat, tileoffsetx,
* tileoffsety, startcol, startrow
* {Object} Object containing properties tilelon, tilelat, startcol,
* startrow
*/
calculateGridLayout: function(bounds, origin, resolution) {
var tilelon = resolution * this.tileSize.w;
var tilelat = resolution * this.tileSize.h;
var ratio = resolution / this.map.getResolution(),
tileSize = {
w: Math.round(this.tileSize.w * ratio),
h: Math.round(this.tileSize.h * ratio)
};
var offsetlon = bounds.left - origin.lon;
var tilecol = Math.floor(offsetlon/tilelon) - this.buffer;
var tilecolremain = offsetlon/tilelon - tilecol;
var tileoffsetx = -tilecolremain * tileSize.w;
var rowSign = this.tileOriginCorner.substr(0, 1) === "t" ? 1 : -1;
var offsetlat = rowSign * (origin.lat - bounds.top + tilelat);
var tilerow = Math[~rowSign ? 'floor' : 'ceil'](offsetlat/tilelat) - this.buffer * rowSign;
var tilerowremain = tilerow - offsetlat/tilelat;
var tileoffsety = rowSign * tilerowremain * tileSize.h;
return {
tilelon: tilelon, tilelat: tilelat,
tileoffsetx: tileoffsetx, tileoffsety: tileoffsety,
startcol: tilecol, startrow: tilerow
};
@@ -991,15 +980,19 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
var tileLayout = this.calculateGridLayout(bounds, origin, serverResolution);
this.gridLayout = tileLayout;
var startX = Math.round(tileLayout.tileoffsetx); // heaven help us
var startY = Math.round(tileLayout.tileoffsety);
var tilelon = tileLayout.tilelon;
var tilelat = tileLayout.tilelat;
var layerContainerDivLeft = this.map.layerContainerOriginPx.x;
var layerContainerDivTop = this.map.layerContainerOriginPx.y;
var tileBounds = this.getTileBoundsForGridIndex(0, 0);
var startPx = this.map.getViewPortPxFromLonLat(
new OpenLayers.LonLat(tileBounds.left, tileBounds.top)
);
startPx.x = Math.round(startPx.x) - layerContainerDivLeft;
startPx.y = Math.round(startPx.y) - layerContainerDivTop;
var tileData = [], center = this.map.getCenter();
var rowidx = 0;
@@ -1012,10 +1005,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
var colidx = 0;
do {
var tileBounds = this.getTileBoundsForGridIndex(rowidx, colidx);
var x = startX + colidx * tileSize.w - layerContainerDivLeft;
var y = startY + rowidx * tileSize.h - layerContainerDivTop;
var px = new OpenLayers.Pixel(x, y);
tileBounds = this.getTileBoundsForGridIndex(rowidx, colidx);
var px = startPx.clone();
px.x = px.x + colidx * Math.round(tileSize.w);
px.y = px.y + rowidx * Math.round(tileSize.h);
var tile = row[colidx];
if (!tile) {
tile = this.addTile(tileBounds, px);
@@ -1219,17 +1212,12 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
var tileLayout = this.gridLayout;
tileLayout.startrow += sign * rowSign;
var bounds = this.getTileBoundsForGridIndex(rowIndex, 0);
var position = this.map.getViewPortPxFromLonLat(
new OpenLayers.LonLat(bounds.left, bounds.top)
);
var y = Math.round(position.y - this.map.layerContainerOriginPx.y);
var modelRow = grid[rowIndex];
var row = grid[prepend ? 'pop' : 'shift']();
for (var i=0, len=row.length; i<len; i++) {
var tile = row[i];
var position = tile.position.clone();
position.y = y;
var position = modelRow[i].position.clone();
position.y += tileSize.h * sign;
tile.moveTo(this.getTileBoundsForGridIndex(rowIndex, i), position);
}
grid[prepend ? 'unshift' : 'push'](row);
@@ -1251,17 +1239,11 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
var tileLayout = this.gridLayout;
tileLayout.startcol += sign;
var bounds = this.getTileBoundsForGridIndex(0, colIndex);
var position = this.map.getViewPortPxFromLonLat(
new OpenLayers.LonLat(bounds.left, bounds.top)
);
var x = Math.round(position.x - this.map.layerContainerOriginPx.x);
for (var i=0, len=grid.length; i<len; i++) {
var row = grid[i];
var position = row[colIndex].position.clone();
var tile = row[prepend ? 'pop' : 'shift']();
var position = tile.position.clone();
position.x = x;
position.x += tileSize.w * sign;
tile.moveTo(this.getTileBoundsForGridIndex(i, colIndex), position);
row[prepend ? 'unshift' : 'push'](tile);
}