Shift container for all layer renderers together.

src/ol/renderer/Composite.js

@@ -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
  */

src/ol/renderer/LayerRenderer.js

@@ -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.
  *

src/ol/renderer/TileLayerRenderer.js

@@ -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 halfMapWidth = (resolution * containerSize.width) / 2;
-    var halfMapHeight = (resolution * pxMapSize.height) / 2;
+    var halfMapHeight = (resolution * containerSize.height) / 2;
     var centerX = center.getX();
     var centerY = center.getY();
-    var mapMinX = centerX - halfMapWidth;
+
-    var mapMaxY = centerY + halfMapHeight;
+    // calculate vector from tile origin to map top-left (in pixel space)
-    var pxOffsetX = Math.round((mapMinX - this.tileOrigin_[0]) / resolution);
+    var tileOrigin = this.tileOrigin_;
-    var pxOffsetY = Math.round((this.tileOrigin_[1] - mapMaxY) / resolution);
+    var mapOrigin = [centerX - halfMapWidth, centerY + halfMapHeight];
-    
+    var pxMap = [
-    // this gives us the desired size in fractional pixels
+        (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
+    // calculate vector from tile origin to top-left tile (in pixel space)
-    var leftTileX = Math.floor(xRight * pxOffsetX / pxTileWidth);
+    var colsLeft = Math.floor(pxMap[0] / pxTileWidth);
-    var topTileY = Math.floor(yDown * pxOffsetY / pxTileHeight);
+    var rowsAbove = Math.floor(pxMap[1] / pxTileHeight);
-
+    var pxTile = [colsLeft * pxTileWidth, rowsAbove * 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);
     
-    // assume a buffer of zero for now
+    // offset vector from container origin to top-left tile (in pixel space)
-    if (pxMinX < 0) {
+    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 xRight = this.xRight_;
-    var yDown = (this.yDown_ > 0);
+    var yDown = this.yDown_;
     var top = this.renderedTop_;
     var right = this.renderedRight_;
     var bottom = this.renderedBottom_;