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