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

56
src/ol/renderer/Composite.js
View File

@@ -7,6 +7,8 @@ goog.require('ol.Loc');
goog.require('goog.array');
goog.require('goog.dom');
goog.require('goog.style');
goog.require('goog.math.Coordinate');
/**
* @constructor
@@ -30,19 +32,25 @@ ol.renderer.Composite = function(container) {
goog.dom.appendChild(container, target);
/**
* @type Element
* @type {Element}
* @private
*/
this.target_ = target;
/**
* @type {goog.math.Coordinate}
* @private
*/
this.targetOffset_ = new goog.math.Coordinate(0, 0);
/**
* @type Object
* @type {Object}
* @private
*/
this.layerContainers_ = {};
};
goog.inherits(ol.renderer.Composite, ol.renderer.MapRenderer);
/**
@@ -53,13 +61,38 @@ goog.inherits(ol.renderer.Composite, ol.renderer.MapRenderer);
*/
ol.renderer.Composite.prototype.draw = function(layers, center, resolution, animate) {
// TODO: deal with layer order and removal
for (var i=0, ii=layers.length; i<ii; ++i) {
this.getOrCreateRenderer(layers[i], i).draw(center, resolution);
if (this.renderedResolution_) {
if (resolution !== this.renderedResolution_) {
// TODO: apply transition to old target
this.targetOffset_ = new goog.math.Coordinate(0, 0);
goog.style.setPosition(this.target_, this.targetOffset_);
}
}
this.renderedResolution_ = resolution;
// shift target element to account for center change
if (this.renderedCenter_) {
this.targetOffset_ = new goog.math.Coordinate(
this.targetOffset_.x + Math.round((this.renderedCenter_.getX() - center.getX()) / resolution),
this.targetOffset_.y + Math.round((center.getY() - this.renderedCenter_.getY()) / resolution)
);
goog.style.setPosition(this.target_, this.targetOffset_);
}
this.renderedCenter_ = center;
this.renderedResolution_ = resolution;
// update each layer renderer
var renderer, container;
for (var i=0, ii=layers.length; i<ii; ++i) {
renderer = this.getOrCreateRenderer(layers[i]);
renderer.setContainerOffset(this.targetOffset_);
renderer.draw(center, resolution);
}
};
/**
* @param {ol.layer.Layer} layer
* @param {number} index
@@ -75,6 +108,7 @@ ol.renderer.Composite.prototype.getOrCreateRenderer = function(layer, index) {
/**
* @param {ol.layer.Layer} layer
* @return {ol.renderer.LayerRenderer}
*/
ol.renderer.Composite.prototype.getRenderer = function(layer) {
function finder(candidate) {
@@ -83,6 +117,16 @@ ol.renderer.Composite.prototype.getRenderer = function(layer) {
return goog.array.find(this.renderers_, finder);
};
/**
* @param {ol.renderer.LayerRenderer}
* @return {Element}
*/
ol.renderer.Composite.prototype.getRendererContainer = function(renderer) {
var container = this.layerContainers_[goog.getUid(renderer)];
goog.asserts.assert(goog.isDef(container));
return container;
};
/**
* @param {ol.layer.Layer} layer
*/

21
src/ol/renderer/LayerRenderer.js
View File

@@ -1,5 +1,7 @@
goog.provide('ol.renderer.LayerRenderer');
goog.require('goog.math.Coordinate');
/**
* A single layer renderer that will be created by the composite map renderer.
*
@@ -15,6 +17,15 @@ ol.renderer.LayerRenderer = function(container, layer) {
*/
this.container_ = container;
/**
* Pixel offset between the layer renderer container and the composite
* renderer container. These will always be integer values.
*
* @type {goog.math.Coordinate}
* @protected
*/
this.containerOffset_ = new goog.math.Coordinate(0, 0);
/**
* @type {!ol.layer.Layer}
* @protected
@@ -23,6 +34,16 @@ ol.renderer.LayerRenderer = function(container, layer) {
};
/**
* Set the pixel offset between the layer renderer container and the composite
* renderer container.
*
* @param {goog.math.Coordinate} offset Integer pixel offset.
*/
ol.renderer.LayerRenderer.prototype.setContainerOffset = function(offset) {
this.containerOffset_ = offset;
};
/**
* Get layer being rendered.
*

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_;