Add support for non-square tiles

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
+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);
@@ -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