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

Shift container for all layer renderers together.

Browse Source
This commit is contained in:
Tim Schaub
2012-07-07 13:13:07 -06:00
parent 0650d93d17
commit 523f4d61fc
3 changed files with 120 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/ol/renderer/TileLayerRenderer.js
View File

@@ -37,14 +37,14 @@ ol.renderer.TileLayerRenderer = function(container, layer) {
this.tileSize_ = layer.getTileSize();
/**
* @type {number}
* @type {boolean}
*/
this.xRight_ = layer.getXRight() ? 1 : -1;
this.xRight_ = layer.getXRight();
/**
* @type {number}
* @type {boolean}
*/
this.yDown_ = layer.getYDown() ? 1 : -1;
this.yDown_ = layer.getYDown();
/**
* @type {number|undefined}
@@ -87,7 +87,7 @@ ol.renderer.TileLayerRenderer = function(container, layer) {
* @private
*/
this.containerSize_ = null;
};
goog.inherits(ol.renderer.TileLayerRenderer, ol.renderer.LayerRenderer);
@@ -147,60 +147,59 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
var tileZ = pair[1];
var scale = resolution / tileResolution;
var pxMapSize = this.getContainerSize_();
var containerSize = this.getContainerSize_();
var xRight = this.xRight_;
var yDown = this.yDown_;
var halfMapWidth = (resolution * pxMapSize.width) / 2;
var halfMapHeight = (resolution * pxMapSize.height) / 2;
var halfMapWidth = (resolution * containerSize.width) / 2;
var halfMapHeight = (resolution * containerSize.height) / 2;
var centerX = center.getX();
var centerY = center.getY();
var mapMinX = centerX - halfMapWidth;
var mapMaxY = centerY + halfMapHeight;
var pxOffsetX = Math.round((mapMinX - this.tileOrigin_[0]) / resolution);
var pxOffsetY = Math.round((this.tileOrigin_[1] - mapMaxY) / resolution);
// this gives us the desired size in fractional pixels
// calculate vector from tile origin to map top-left (in pixel space)
var tileOrigin = this.tileOrigin_;
var mapOrigin = [centerX - halfMapWidth, centerY + halfMapHeight];
var pxMap = [
(mapOrigin[0] - tileOrigin[0]) / resolution,
(tileOrigin[1] - mapOrigin[1]) / resolution
];
// desired tile size in fractional pixels
var pxTileWidth = this.tileSize_[0] / scale;
var pxTileHeight = this.tileSize_[1] / scale;
// this is the index of the top left tile
var leftTileX = Math.floor(xRight * pxOffsetX / pxTileWidth);
var topTileY = Math.floor(yDown * pxOffsetY / pxTileHeight);
var pxMinX;
if (xRight > 0) {
pxMinX = Math.round(leftTileX * pxTileWidth) - pxOffsetX;
} else {
pxMinX = Math.round((-leftTileX-1) * pxTileWidth) - pxOffsetX;
}
var pxMinY;
if (yDown > 0) {
pxMinY = Math.round(topTileY * pxTileHeight) - pxOffsetY;
} else {
pxMinY = Math.round((-topTileY-1) * pxTileHeight) - pxOffsetY;
}
var pxTileLeft = pxMinX;
var pxTileTop = pxMinY;
var numTilesWide = Math.ceil(pxMapSize.width / pxTileWidth);
var numTilesHigh = Math.ceil(pxMapSize.height / pxTileHeight);
// calculate vector from tile origin to top-left tile (in pixel space)
var colsLeft = Math.floor(pxMap[0] / pxTileWidth);
var rowsAbove = Math.floor(pxMap[1] / pxTileHeight);
var pxTile = [colsLeft * pxTileWidth, rowsAbove * pxTileHeight];
// assume a buffer of zero for now
if (pxMinX < 0) {
// offset vector from container origin to top-left tile (in pixel space)
var pxOffsetX = pxTile[0] - pxMap[0] - this.containerOffset_.x;
var pxOffsetY = pxTile[1] - pxMap[1] - this.containerOffset_.y;
// index of the top left tile
var leftTileX = xRight ? colsLeft : (-colsLeft - 1);
var topTileY = yDown ? rowsAbove : (-rowsAbove - 1);
var numTilesWide = Math.ceil(containerSize.width / pxTileWidth);
var numTilesHigh = Math.ceil(containerSize.height / pxTileHeight);
if (pxOffsetX !== 0) {
numTilesWide += 1;
}
if (pxMinY < 0) {
if (pxOffsetY !== 0) {
numTilesHigh += 1;
}
var pxMinX = pxOffsetX;
var pxMinY = pxOffsetY;
var pxTileLeft = pxMinX;
var tileX, tileY, tile, img, pxTileRight, pxTileBottom, xyz, append;
var tileX, tileY, tile, img, pxTileBottom, pxTileRight, pxTileTop, xyz, append;
var fragment = document.createDocumentFragment();
var newTiles = false;
for (var i=0; i<numTilesWide; ++i) {
pxTileTop = pxMinY;
tileX = leftTileX + (i * xRight);
tileX = xRight ? leftTileX + i : leftTileX - i;
if (scale !== 1) {
pxTileRight = Math.round(pxMinX + ((i+1) * pxTileWidth));
} else {
@@ -208,7 +207,7 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
}
for (var j=0; j<numTilesHigh; ++j) {
append = false;
tileY = topTileY + (j * yDown);
tileY = yDown ? topTileY + j : topTile - j;
xyz = tileX + "," + tileY + "," + tileZ;
if (scale !== 1) {
pxTileBottom = Math.round(pxMinY + ((j+1) * pxTileHeight));
@@ -225,19 +224,15 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
}
this.renderedTiles_[xyz] = tile;
img = tile.getImg();
img.style.top = pxTileTop + "px";
img.style.left = pxTileLeft + "px";
if (scale !== 1) {
img.style.height = (pxTileRight - pxTileLeft) + "px";
img.style.width = (pxTileBottom - pxTileTop) + "px";
}
goog.dom.appendChild(fragment, img);
newTiles = true;
}
} else {
img = tile.getImg();
}
if (img) {
img.style.top = pxTileTop + "px";
img.style.left = pxTileLeft + "px";
if (scale !== 1) {
img.style.height = (pxTileRight - pxTileLeft) + "px";
img.style.width = (pxTileBottom - pxTileTop) + "px";
}
}
pxTileTop = pxTileBottom;
}
@@ -262,8 +257,8 @@ ol.renderer.TileLayerRenderer.prototype.draw = function(center, resolution) {
*/
ol.renderer.TileLayerRenderer.prototype.removeInvisibleTiles_ = function() {
var index, prune, x, y, z, tile;
var xRight = (this.xRight_ > 0);
var yDown = (this.yDown_ > 0);
var xRight = this.xRight_;
var yDown = this.yDown_;
var top = this.renderedTop_;
var right = this.renderedRight_;
var bottom = this.renderedBottom_;