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

54
src/ol/renderer/canvas/canvastilelayerrenderer.js
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 =