openlayers/src/ol/renderer/dom/tilelayer.js

goog.provide('ol.renderer.dom.TileLayer');

goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.Event');
goog.require('goog.events.EventType');
goog.require('ol.Coordinate');
goog.require('ol.Extent');
goog.require('ol.renderer.dom.Layer');



/**
 * @constructor
 * @extends {ol.renderer.dom.Layer}
 * @param {ol.renderer.Map} mapRenderer Map renderer.
 * @param {ol.TileLayer} tileLayer Tile layer.
 * @param {!Element} target Target.
 */
ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer, target) {
  goog.base(this, mapRenderer, tileLayer, target);

  /**
   * @type {Object}
   * @private
   */
  this.renderedTiles_ = {};

  /**
   * @type {number|undefined}
   * @private
   */
  this.renderedMapResolution_ = undefined;

  /**
   * @type {number|undefined}
   * @private
   */
  this.renderedTileRange_ = undefined;

  /**
   * @type {number|undefined}
   * @private
   */
  this.renderedZ_ = undefined;

  /**
   * Map of tile keys loading at the currently rendered z.
   * @type {Object.<sring, ol.Tile>}
   * @private
   */
  this.loadingTiles_ = {};

};
goog.inherits(ol.renderer.dom.TileLayer, ol.renderer.dom.Layer);


/**
 * @inheritDoc
 * @return {ol.TileLayer} Layer.
 */
ol.renderer.dom.TileLayer.prototype.getLayer = function() {
  return /** @type {ol.TileLayer} */ goog.base(this, 'getLayer');
};


/**
 * Get the pixel offset between the tile origin and the container origin.
 * @private
 * @param {number} z Z.
 * @param {number} resolution Resolution.
 * @return {ol.Coordinate} Offset.
 */
ol.renderer.dom.TileLayer.prototype.getTileOffset_ = function(z, resolution) {
  var tileLayer = this.getLayer();
  var tileStore = tileLayer.getStore();
  var tileGrid = tileStore.getTileGrid();
  var tileOrigin = tileGrid.getOrigin(z);
  var offset = new ol.Coordinate(
      Math.round((this.origin.x - tileOrigin.x) / resolution),
      Math.round((tileOrigin.y - this.origin.y) / resolution));
  return offset;
};


/**
 * Get rid of tiles outside the rendered extent.
 * @private
 */
ol.renderer.dom.TileLayer.prototype.removeInvisibleTiles_ = function() {
  var tileRange = this.renderedTileRange_;
  var z = this.renderedZ_;
  var key, tileCoord, prune, tile;
  for (key in this.renderedTiles_) {
    tileCoord = ol.TileCoord.createFromString(key);
    prune = z !== tileCoord.z ||
            tileCoord.x < tileRange.minX ||
            tileCoord.x > tileRange.maxX ||
            tileCoord.y < tileRange.minY ||
            tileCoord.y > tileRange.maxY;
    if (prune) {
      tile = this.renderedTiles_[key];
      delete this.renderedTiles_[key];
      goog.dom.removeNode(tile.getImage(this));
    }
  }
};


/**
 * @param {goog.events.Event} event Tile change event.
 * @private
 */
ol.renderer.dom.TileLayer.prototype.handleTileChange_ = function(event) {
  var tile = event.target;
  goog.asserts.assert(tile.getState() == ol.TileState.LOADED);
  var tileCoord = tile.tileCoord;
  if (tileCoord.z === this.renderedZ_) {
    var key = tileCoord.toString();
    delete this.loadingTiles_[key];
    // determine if we've fully loaded this zoom level
    var loaded = true;
    for (key in this.loadingTiles_) {
      loaded = false;
      break;
    }
    if (loaded) {
      this.removeInvisibleTiles_();
    }
  }
};


/**
 * @inheritDoc
 */
ol.renderer.dom.TileLayer.prototype.render = function() {

  var map = this.getMap();
  if (!map.isDef()) {
    return;
  }
  var mapExtent = /** @type {!ol.Extent} */ map.getExtent();
  var mapResolution = /** @type {number} */ map.getResolution();

  var tileLayer = this.getLayer();
  var tileStore = tileLayer.getStore();
  var tileGrid = tileStore.getTileGrid();

  // z represents the "best" resolution
  var z = tileGrid.getZForResolution(mapResolution);

  if (z != this.renderedZ_) {
    // no longer wait for previously loading tiles
    this.loadingTiles_ = {};
  }

  /**
   * @type {Object.<number, Object.<string, ol.Tile>>}
   */
  var tilesToDrawByZ = {};
  tilesToDrawByZ[z] = {};

  var tileRange =
      tileGrid.getTileRangeForExtentAndResolution(mapExtent, mapResolution);


  // first pass through the tile range to determine all the tiles needed
  var allTilesLoaded = true;
  tileRange.forEachTileCoord(z, function(tileCoord) {

    var tile = tileStore.getTile(tileCoord);
    if (goog.isNull(tile)) {
      // we're outside the store's extent, continue
      return;
    }

    var key = tile.tileCoord.toString();
    if (tile.getState() == ol.TileState.LOADED) {
      tilesToDrawByZ[z][key] = tile;
      return;
    } else {
      if (!(key in this.loadingTiles_)) {
        goog.events.listen(tile, goog.events.EventType.CHANGE,
            this.handleTileChange_, false, this);
        this.loadingTiles_[key] = tile;
        allTilesLoaded = false;
        tile.load();
      }
      // TODO: only append after load?
      tilesToDrawByZ[z][key] = tile;
    }

    /**
     * Look for already loaded tiles that can serve as placeholders.
     */
    // FIXME this could be more efficient about filling partial holes
    tileGrid.forEachTileCoordParentTileRange(
        tileCoord,
        function(altZ, altTileRange) {
          var fullyCovered = true;
          altTileRange.forEachTileCoord(altZ, function(altTileCoord) {
            var tileKey = altTileCoord.toString();
            if (tilesToDrawByZ[altZ] && tilesToDrawByZ[altZ][tileKey]) {
              return;
            }
            var altTile = tileStore.getTile(altTileCoord);
            if (!goog.isNull(altTile) &&
                altTile.getState() == ol.TileState.LOADED) {
              if (!(altZ in tilesToDrawByZ)) {
                tilesToDrawByZ[altZ] = {};
              }
              tilesToDrawByZ[altZ][tileKey] = altTile;
            } else {
              fullyCovered = false;
            }
          });
          return fullyCovered;
        });

  }, this);

  /** @type {Array.<number>} */
  var zs = goog.object.getKeys(tilesToDrawByZ);
  goog.array.sort(zs);

  var fragment = document.createDocumentFragment();
  var newTiles = false;
  for (var i = 0, ii = zs.length; i < ii; ++i) {
    var tileZ = zs[i];
    var tilesToDraw = tilesToDrawByZ[tileZ];
    var tileOffset = this.getTileOffset_(tileZ, mapResolution);
    for (var key in tilesToDraw) {
      var tile = tilesToDraw[key];
      var tileCoord = tile.tileCoord;
      var pixelBounds = tileGrid.getPixelBoundsForTileCoordAndResolution(
          tileCoord, mapResolution);
      var img = tile.getImage(this);
      var style = img.style;
      // TODO: use translate method
      style.left = (pixelBounds.minX - tileOffset.x) + 'px';
      style.top = (-pixelBounds.maxY - tileOffset.y) + 'px';
      style.width = pixelBounds.getWidth() + 'px';
      style.height = pixelBounds.getHeight() + 'px';
      if (!(key in this.renderedTiles_)) {
        this.renderedTiles_[key] = tile;
        style.position = 'absolute';
        goog.dom.appendChild(fragment, img);
        newTiles = true;
      }
    }
  }

  if (newTiles) {
    goog.dom.appendChild(this.target, fragment);
  }

  if (allTilesLoaded) {
    this.removeInvisibleTiles_();
  }

  this.renderedTileRange_ = tileRange;
  this.renderedZ_ = z;
  this.renderedMapResolution_ = mapResolution;
};