Add gutter support to ol.renderer.dom.TileLayer

This commit is contained in:
Éric Lemoine
2013-12-10 10:50:25 +01:00
parent 2db8ce566b
commit 5c71ec4922

View File

@@ -97,6 +97,7 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
if (goog.isNull(tileGrid)) {
tileGrid = ol.tilegrid.getForProjection(projection);
}
var tileGutter = tileSource.getGutter();
var z = tileGrid.getZForResolution(view2DState.resolution);
var tileResolution = tileGrid.getResolution(z);
var center = view2DState.center;
@@ -185,7 +186,7 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
}
tilesToDraw = tilesToDrawByZ[tileLayerZKey];
for (tileCoordKey in tilesToDraw) {
tileLayerZ.addTile(tilesToDraw[tileCoordKey]);
tileLayerZ.addTile(tilesToDraw[tileCoordKey], tileGutter);
}
tileLayerZ.finalizeAddTiles();
}
@@ -320,8 +321,9 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
/**
* @param {ol.Tile} tile Tile.
* @param {number} tileGutter Tile gutter.
*/
ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile) {
ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
var tileCoord = tile.tileCoord;
goog.asserts.assert(tileCoord.z == this.tileCoordOrigin_.z);
var tileCoordKey = tileCoord.toString();
@@ -330,20 +332,36 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile) {
}
var tileSize = this.tileGrid_.getTileSize(tileCoord.z);
var image = tile.getImage(this);
var style = image.style;
// Bootstrap sets the style max-width: 100% for all images, which breaks
// prevents the tile from being displayed in FireFox. Workaround by
// overriding the max-width style.
style.maxWidth = 'none';
style.position = 'absolute';
style.left =
var imageStyle = image.style;
// Bootstrap sets the style max-width: 100% for all images, which
// prevents the tile from being displayed in FireFox. Workaround
// by overriding the max-width style.
imageStyle.maxWidth = 'none';
var tileElement;
var tileElementStyle;
if (tileGutter > 0) {
tileElement = goog.dom.createElement(goog.dom.TagName.DIV);
tileElementStyle = tileElement.style;
tileElementStyle.overflow = 'hidden';
tileElementStyle.width = tileSize[0] + 'px';
tileElementStyle.height = tileSize[1] + 'px';
imageStyle.position = 'absolute';
imageStyle.left = -tileGutter + 'px';
imageStyle.top = -tileGutter + 'px';
goog.dom.appendChild(tileElement, image);
} else {
tileElement = image;
tileElementStyle = imageStyle;
}
tileElementStyle.position = 'absolute';
tileElementStyle.left =
((tileCoord.x - this.tileCoordOrigin_.x) * tileSize[0]) + 'px';
style.top =
tileElementStyle.top =
((this.tileCoordOrigin_.y - tileCoord.y) * tileSize[1]) + 'px';
if (goog.isNull(this.documentFragment_)) {
this.documentFragment_ = document.createDocumentFragment();
}
goog.dom.appendChild(this.documentFragment_, image);
goog.dom.appendChild(this.documentFragment_, tileElement);
this.tiles_[tileCoordKey] = tile;
};