Add gutter support to ol.renderer.dom.TileLayer
This commit is contained in:
@@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user