ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add support for non-square tiles

Browse Source
This commit is contained in:
Andreas Hocevar
2015-04-14 22:54:57 +02:00
parent 5dfa9e0a67
commit 2b75341068
19 changed files with 396 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/renderer/canvas/canvastilelayerrenderer.js
+35 -19
View File
@@ -14,6 +14,7 @@ goog.require('ol.dom');
goog.require('ol.extent');
goog.require('ol.layer.Tile');
goog.require('ol.renderer.canvas.Layer');
goog.require('ol.size');
goog.require('ol.tilecoord');
goog.require('ol.vec.Mat4');
@@ -74,7 +75,13 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
* @private
* @type {number}
*/
this.renderedTileSize_ = NaN;
this.renderedTileWidth_ = NaN;
/**
* @private
* @type {number}
*/
this.renderedTileHeight_ = NaN;
/**
* @private
@@ -88,6 +95,12 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
*/
this.renderedTiles_ = null;
/**
* @private
* @type {ol.Size}
*/
this.tmpSize_ = [0, 0];
};
goog.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.Layer);
@@ -190,7 +203,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var z = tileGrid.getZForResolution(viewState.resolution);
var tilePixelSize =
tileSource.getTilePixelSize(z, frameState.pixelRatio, projection);
var tilePixelRatio = tilePixelSize / tileGrid.getTileSize(z);
var tilePixelRatio = tilePixelSize[0] /
ol.size.toSize(tileGrid.getTileSize(z), this.tmpSize_)[0];
var tileResolution = tileGrid.getResolution(z);
var tilePixelResolution = tileResolution / tilePixelRatio;
var center = viewState.center;
@@ -214,8 +228,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var tileRange = tileGrid.getTileRangeForExtentAndResolution(
extent, tileResolution);
var canvasWidth = tilePixelSize * tileRange.getWidth();
var canvasHeight = tilePixelSize * tileRange.getHeight();
var canvasWidth = tilePixelSize[0] * tileRange.getWidth();
var canvasHeight = tilePixelSize[1] * tileRange.getHeight();
var canvas, context;
if (goog.isNull(this.canvas_)) {
@@ -240,7 +254,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
context = this.context_;
if (this.canvasSize_[0] < canvasWidth ||
this.canvasSize_[1] < canvasHeight ||
this.renderedTileSize_ !== tilePixelSize ||
this.renderedTileWidth_ !== tilePixelSize[0] ||
this.renderedTileHeight_ !== tilePixelSize[1] ||
(this.canvasTooBig_ && (this.canvasSize_[0] > canvasWidth ||
this.canvasSize_[1] > canvasHeight))) {
// Canvas is too small or tileSize has changed, resize it.
@@ -264,14 +279,15 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var canvasTileRange, canvasTileRangeWidth, minX, minY;
if (goog.isNull(this.renderedCanvasTileRange_)) {
canvasTileRangeWidth = canvasWidth / tilePixelSize;
var canvasTileRangeHeight = canvasHeight / tilePixelSize;
canvasTileRangeWidth = canvasWidth / tilePixelSize[0];
var canvasTileRangeHeight = canvasHeight / tilePixelSize[1];
minX = tileRange.minX -
Math.floor((canvasTileRangeWidth - tileRange.getWidth()) / 2);
minY = tileRange.minY -
Math.floor((canvasTileRangeHeight - tileRange.getHeight()) / 2);
this.renderedCanvasZ_ = z;
this.renderedTileSize_ = tilePixelSize;
this.renderedTileWidth_ = tilePixelSize[0];
this.renderedTileHeight_ = tilePixelSize[1];
this.renderedCanvasTileRange_ = new ol.TileRange(
minX, minX + canvasTileRangeWidth - 1,
minY, minY + canvasTileRangeHeight - 1);
@@ -332,9 +348,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var i, ii;
for (i = 0, ii = tilesToClear.length; i < ii; ++i) {
tile = tilesToClear[i];
x = tilePixelSize * (tile.tileCoord[1] - canvasTileRange.minX);
y = tilePixelSize * (canvasTileRange.maxY - tile.tileCoord[2]);
context.clearRect(x, y, tilePixelSize, tilePixelSize);
x = tilePixelSize[0] * (tile.tileCoord[1] - canvasTileRange.minX);
y = tilePixelSize[1] * (canvasTileRange.maxY - tile.tileCoord[2]);
context.clearRect(x, y, tilePixelSize[0], tilePixelSize[1]);
}
/** @type {Array.<number>} */
@@ -359,18 +375,18 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
(tile.tileCoord[2] - canvasTileRange.minY) * canvasTileRangeWidth +
(tile.tileCoord[1] - canvasTileRange.minX);
if (this.renderedTiles_[index] != tile) {
x = tilePixelSize * (tile.tileCoord[1] - canvasTileRange.minX);
y = tilePixelSize * (canvasTileRange.maxY - tile.tileCoord[2]);
x = tilePixelSize[0] * (tile.tileCoord[1] - canvasTileRange.minX);
y = tilePixelSize[1] * (canvasTileRange.maxY - tile.tileCoord[2]);
tileState = tile.getState();
if (tileState == ol.TileState.EMPTY ||
(tileState == ol.TileState.ERROR && !useInterimTilesOnError) ||
!opaque) {
context.clearRect(x, y, tilePixelSize, tilePixelSize);
context.clearRect(x, y, tilePixelSize[0], tilePixelSize[1]);
}
if (tileState == ol.TileState.LOADED) {
context.drawImage(tile.getImage(),
tileGutter, tileGutter, tilePixelSize, tilePixelSize,
x, y, tilePixelSize, tilePixelSize);
tileGutter, tileGutter, tilePixelSize[0], tilePixelSize[1],
x, y, tilePixelSize[0], tilePixelSize[1]);
}
this.renderedTiles_[index] = tile;
}
@@ -382,15 +398,15 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent);
x = (tileExtent[0] - origin[0]) / tilePixelResolution;
y = (origin[1] - tileExtent[3]) / tilePixelResolution;
width = scale * tilePixelSize;
height = scale * tilePixelSize;
width = scale * tilePixelSize[0];
height = scale * tilePixelSize[1];
tileState = tile.getState();
if (tileState == ol.TileState.EMPTY || !opaque) {
context.clearRect(x, y, width, height);
}
if (tileState == ol.TileState.LOADED) {
context.drawImage(tile.getImage(),
tileGutter, tileGutter, tilePixelSize, tilePixelSize,
tileGutter, tileGutter, tilePixelSize[0], tilePixelSize[1],
x, y, width, height);
}
interimTileRange =
src/ol/renderer/dom/domtilelayerrenderer.js
+17 -9
View File
@@ -21,6 +21,7 @@ goog.require('ol.dom.BrowserFeature');
goog.require('ol.extent');
goog.require('ol.layer.Tile');
goog.require('ol.renderer.dom.Layer');
goog.require('ol.size');
goog.require('ol.tilecoord');
goog.require('ol.tilegrid.TileGrid');
goog.require('ol.vec.Mat4');
@@ -342,6 +343,12 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
*/
this.transform_ = goog.vec.Mat4.createNumberIdentity();
/**
* @private
* @type {ol.Size}
*/
this.tmpSize_ = [0, 0];
};
@@ -360,7 +367,8 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
if (tileCoordKey in this.tiles_) {
return;
}
var tileSize = this.tileGrid_.getTileSize(tileCoordZ);
var tileSize = ol.size.toSize(
this.tileGrid_.getTileSize(tileCoordZ), this.tmpSize_);
var image = tile.getImage(this);
var imageStyle = image.style;
// Bootstrap sets the style max-width: 100% for all images, which
@@ -373,25 +381,25 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
tileElement = goog.dom.createElement(goog.dom.TagName.DIV);
tileElementStyle = tileElement.style;
tileElementStyle.overflow = 'hidden';
tileElementStyle.width = tileSize + 'px';
tileElementStyle.height = tileSize + 'px';
tileElementStyle.width = tileSize[0] + 'px';
tileElementStyle.height = tileSize[1] + 'px';
imageStyle.position = 'absolute';
imageStyle.left = -tileGutter + 'px';
imageStyle.top = -tileGutter + 'px';
imageStyle.width = (tileSize + 2 * tileGutter) + 'px';
imageStyle.height = (tileSize + 2 * tileGutter) + 'px';
imageStyle.width = (tileSize[0] + 2 * tileGutter) + 'px';
imageStyle.height = (tileSize[1] + 2 * tileGutter) + 'px';
goog.dom.appendChild(tileElement, image);
} else {
imageStyle.width = tileSize + 'px';
imageStyle.height = tileSize + 'px';
imageStyle.width = tileSize[0] + 'px';
imageStyle.height = tileSize[1] + 'px';
tileElement = image;
tileElementStyle = imageStyle;
}
tileElementStyle.position = 'absolute';
tileElementStyle.left =
((tileCoordX - this.tileCoordOrigin_[1]) * tileSize) + 'px';
((tileCoordX - this.tileCoordOrigin_[1]) * tileSize[0]) + 'px';
tileElementStyle.top =
((this.tileCoordOrigin_[2] - tileCoordY) * tileSize) + 'px';
((this.tileCoordOrigin_[2] - tileCoordY) * tileSize[1]) + 'px';
if (goog.isNull(this.documentFragment_)) {
this.documentFragment_ = document.createDocumentFragment();
}
src/ol/renderer/webgl/webglmaprenderer.js
+17 -9
View File
@@ -71,7 +71,13 @@ ol.renderer.webgl.Map = function(container, map) {
* @private
* @type {number}
*/
this.clipTileCanvasSize_ = 0;
this.clipTileCanvasWidth_ = 0;
/**
* @private
* @type {number}
*/
this.clipTileCanvasHeight_ = 0;
/**
* @private
@@ -158,7 +164,7 @@ ol.renderer.webgl.Map = function(container, map) {
this.tileTextureQueue_.reprioritize();
var element = this.tileTextureQueue_.dequeue();
var tile = /** @type {ol.Tile} */ (element[0]);
var tileSize = /** @type {number} */ (element[3]);
var tileSize = /** @type {ol.Size} */ (element[3]);
var tileGutter = /** @type {number} */ (element[4]);
this.bindTileTexture(
tile, tileSize, tileGutter, goog.webgl.LINEAR, goog.webgl.LINEAR);
@@ -179,7 +185,7 @@ goog.inherits(ol.renderer.webgl.Map, ol.renderer.Map);
/**
* @param {ol.Tile} tile Tile.
* @param {number} tileSize Tile size.
* @param {ol.Size} tileSize Tile size.
* @param {number} tileGutter Tile gutter.
* @param {number} magFilter Mag filter.
* @param {number} minFilter Min filter.
@@ -209,15 +215,17 @@ ol.renderer.webgl.Map.prototype.bindTileTexture =
if (tileGutter > 0) {
var clipTileCanvas = this.clipTileContext_.canvas;
var clipTileContext = this.clipTileContext_;
if (this.clipTileCanvasSize_ != tileSize) {
clipTileCanvas.width = tileSize;
clipTileCanvas.height = tileSize;
this.clipTileCanvasSize_ = tileSize;
if (this.clipTileCanvasWidth_ !== tileSize[0] ||
this.clipTileCanvasHeight_ !== tileSize[1]) {
clipTileCanvas.width = tileSize[0];
clipTileCanvas.height = tileSize[1];
this.clipTileCanvasWidth_ = tileSize[0];
this.clipTileCanvasHeight_ = tileSize[1];
} else {
clipTileContext.clearRect(0, 0, tileSize, tileSize);
clipTileContext.clearRect(0, 0, tileSize[0], tileSize[1]);
}
clipTileContext.drawImage(tile.getImage(), tileGutter, tileGutter,
tileSize, tileSize, 0, 0, tileSize, tileSize);
tileSize[0], tileSize[1], 0, 0, tileSize[0], tileSize[1]);
gl.texImage2D(goog.webgl.TEXTURE_2D, 0,
goog.webgl.RGBA, goog.webgl.RGBA,
goog.webgl.UNSIGNED_BYTE, clipTileCanvas);
src/ol/renderer/webgl/webgltilelayerrenderer.js
+15 -4
View File
@@ -16,6 +16,7 @@ goog.require('ol.layer.Tile');
goog.require('ol.math');
goog.require('ol.renderer.webgl.Layer');
goog.require('ol.renderer.webgl.tilelayer.shader');
goog.require('ol.size');
goog.require('ol.tilecoord');
goog.require('ol.vec.Mat4');
goog.require('ol.webgl.Buffer');
@@ -80,6 +81,12 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
*/
this.renderedRevision_ = -1;
/**
* @private
* @type {ol.Size}
*/
this.tmpSize_ = [0, 0];
};
goog.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer);
@@ -160,7 +167,8 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
var tilePixelSize =
tileSource.getTilePixelSize(z, frameState.pixelRatio, projection);
var pixelRatio = tilePixelSize / tileGrid.getTileSize(z);
var pixelRatio = tilePixelSize[0] /
ol.size.toSize(tileGrid.getTileSize(z), this.tmpSize_)[0];
var tilePixelResolution = tileResolution / pixelRatio;
var tileGutter = tileSource.getGutter();
@@ -186,12 +194,15 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
var tileRangeSize = tileRange.getSize();
var maxDimension = Math.max(
tileRangeSize[0] * tilePixelSize, tileRangeSize[1] * tilePixelSize);
tileRangeSize[0] * tilePixelSize[0],
tileRangeSize[1] * tilePixelSize[1]);
var framebufferDimension = ol.math.roundUpToPowerOfTwo(maxDimension);
var framebufferExtentDimension = tilePixelResolution * framebufferDimension;
var origin = tileGrid.getOrigin(z);
var minX = origin[0] + tileRange.minX * tilePixelSize * tilePixelResolution;
var minY = origin[1] + tileRange.minY * tilePixelSize * tilePixelResolution;
var minX = origin[0] +
tileRange.minX * tilePixelSize[0] * tilePixelResolution;
var minY = origin[1] +
tileRange.minY * tilePixelSize[1] * tilePixelResolution;
framebufferExtent = [
minX, minY,
minX + framebufferExtentDimension, minY + framebufferExtentDimension