initial port of @tschaub DOM renderer

2012-07-17 22:28:58 +02:00
parent 5b5b89819e
commit b31c3f90bd
5 changed files with 394 additions and 8 deletions
--- a/src/ol/dom/tilelayerrenderer.js
+++ b/src/ol/dom/tilelayerrenderer.js
@@ -0,0 +1,132 @@
+goog.provide('ol.dom.TileLayerRenderer');
+
+goog.require('ol.dom.LayerRenderer');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.dom.LayerRenderer}
+ * @param {ol.dom.Map} map Map.
+ * @param {ol.TileLayer} tileLayer Tile layer.
+ * @param {!Element} target Target.
+ */
+ol.dom.TileLayerRenderer = function(map, tileLayer, target) {
+  goog.base(this, map, tileLayer, target);
+
+  /**
+   * @type {Object}
+   * @private
+   */
+  this.renderedTiles_ = {};
+};
+goog.inherits(ol.dom.TileLayerRenderer, ol.dom.LayerRenderer);
+
+
+/**
+ * @inheritDoc
+ */
+ol.dom.TileLayerRenderer.prototype.redraw = function() {
+
+  var map = this.getMap();
+  var extent = /** @type {ol.Extent} */ (map.getExtent());
+  var resolution = /** @type {number} */ (map.getResolution());
+
+  var tileLayer = /** @type {ol.TileLayer} */ (this.getLayer());
+  var tileStore = tileLayer.getStore();
+  var tileGrid = tileStore.getTileGrid();
+  var z = tileGrid.getZForResolution(resolution);
+
+  var tileBounds = tileGrid.getExtentTileBounds(z, extent);
+  var tileSize = tileGrid.getTileSize();
+
+  var offset = this.getTilesMapOffset_(extent, tileBounds, resolution);
+
+  var fragment = document.createDocumentFragment();
+
+  var key, tile, x, y, img, newTiles = false;
+  tileBounds.forEachTileCoord(z, function(tileCoord) {
+    key = tileCoord.toString();
+    tile = this.renderedTiles_[key];
+    if (!goog.isDef(tile)) {
+      tile = tileStore.getTile(tileCoord);
+      if (goog.isNull(tile)) {
+      } else {
+        if (!tile.isLoaded()) {
+          tile.load();
+        }
+        this.renderedTiles_[key] = tile;
+        x = tileSize.width * (tileCoord.x - tileBounds.minX);
+        y = tileSize.height * (tileBounds.maxY - tileCoord.y);
+        img = tile.getImage();
+        img.style.position = 'absolute';
+        img.style.top = (y - offset.y) + 'px';
+        img.style.left = (x - offset.x) + 'px';
+        img.style.width = tileSize.width + 'px';
+        img.style.height = tileSize.height + 'px';
+        goog.dom.appendChild(fragment, img);
+        newTiles = true;
+      }
+    }
+    return false;
+  }, this);
+
+  if (newTiles) {
+    this.target.appendChild(fragment);
+  }
+
+  this.removeInvisibleTiles_(tileBounds, z);
+};
+
+
+/**
+ * Get the pixel offset between top-left corner of tiles and top-left
+ * corner of map. Return positive values.
+ *
+ * @private
+ * @param {ol.Extent} extent Map extent.
+ * @param {ol.TileBounds} tileBounds Tile bounds.
+ * @param {number} resolution Resolution.
+ * @return {goog.math.Coordinate} Offset.
+ */
+ol.dom.TileLayerRenderer.prototype.getTilesMapOffset_ = function(
+    extent, tileBounds, resolution) {
+
+  var tileLayer = /** @type {ol.TileLayer} */ (this.getLayer());
+  var tileStore = tileLayer.getStore();
+  var tileGrid = tileStore.getTileGrid();
+  var z = tileGrid.getZForResolution(resolution);
+  var tileCoord = new ol.TileCoord(z, tileBounds.minX, tileBounds.maxY);
+  var tileCoordExtent = tileGrid.getTileCoordExtent(tileCoord);
+
+  var offset = new goog.math.Coordinate(
+      Math.round((extent.minX - tileCoordExtent.minX) / resolution),
+      Math.round((tileCoordExtent.maxY - extent.maxY) / resolution));
+
+  return offset;
+};
+
+
+/**
+ * Get rid of tiles outside the rendered extent.
+ * @private
+ * @param {ol.TileBounds} tileBounds Tile bounds.
+ * @param {number} z Z.
+ */
+ol.dom.TileLayerRenderer.prototype.removeInvisibleTiles_ = function(
+    tileBounds, z) {
+  var key, tileCoord, prune, tile;
+  for (key in this.renderedTiles_) {
+    tileCoord = ol.TileCoord.fromString(key);
+    prune = z !== tileCoord.z ||
+            tileCoord.x < tileBounds.minX ||
+            tileCoord.x > tileBounds.maxX ||
+            tileCoord.y < tileBounds.minY ||
+            tileCoord.y > tileBounds.maxY;
+    if (prune) {
+      tile = this.renderedTiles_[key];
+      delete this.renderedTiles_[key];
+      this.target.removeChild(tile.getImage());
+    }
+  }
+};