137 lines
3.8 KiB
JavaScript
137 lines
3.8 KiB
JavaScript
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 = map.getExtent();
|
|
var resolution = map.getResolution();
|
|
|
|
if (!goog.isDef(extent) || !goog.isDef(resolution)) {
|
|
return;
|
|
}
|
|
|
|
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((this.origin.x - tileCoordExtent.minX) / resolution),
|
|
Math.round((tileCoordExtent.maxY - this.origin.y) / 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());
|
|
}
|
|
}
|
|
};
|