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

Add HiDPI support to ol.renderer.canvas.TileLayer

Browse Source
This commit is contained in:
Tom Payne
2014-01-15 13:02:06 +01:00
parent 31a51cf398
commit 0c42d04295
1 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/renderer/canvas/canvastilelayerrenderer.js
+27 -23
View File
@@ -175,8 +175,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var tileGrid = tileSource.getTileGridForProjection(projection); var tileGrid = tileSource.getTileGridForProjection(projection);
var tileGutter = tileSource.getGutter(); var tileGutter = tileSource.getGutter();
var z = tileGrid.getZForResolution(view2DState.resolution); var z = tileGrid.getZForResolution(view2DState.resolution);
var tileSize = tileGrid.getTileSize(z); var tilePixelSize =
tileSource.getTilePixelSize(z, frameState.pixelRatio, projection);
var tilePixelRatio = tilePixelSize / tileGrid.getTileSize(z);
var tileResolution = tileGrid.getResolution(z); var tileResolution = tileGrid.getResolution(z);
var tilePixelResolution = tileResolution / tilePixelRatio;
var center = view2DState.center; var center = view2DState.center;
var extent; var extent;
if (tileResolution == view2DState.resolution) { if (tileResolution == view2DState.resolution) {
@@ -189,8 +192,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var tileRange = tileGrid.getTileRangeForExtentAndResolution( var tileRange = tileGrid.getTileRangeForExtentAndResolution(
extent, tileResolution); extent, tileResolution);
var canvasWidth = tileSize * tileRange.getWidth(); var canvasWidth = tilePixelSize * tileRange.getWidth();
var canvasHeight = tileSize * tileRange.getHeight(); var canvasHeight = tilePixelSize * tileRange.getHeight();
var canvas, context; var canvas, context;
if (goog.isNull(this.canvas_)) { if (goog.isNull(this.canvas_)) {
@@ -229,8 +232,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var canvasTileRange, canvasTileRangeWidth, minX, minY; var canvasTileRange, canvasTileRangeWidth, minX, minY;
if (goog.isNull(this.renderedCanvasTileRange_)) { if (goog.isNull(this.renderedCanvasTileRange_)) {
canvasTileRangeWidth = canvasWidth / tileSize; canvasTileRangeWidth = canvasWidth / tilePixelSize;
var canvasTileRangeHeight = canvasHeight / tileSize; var canvasTileRangeHeight = canvasHeight / tilePixelSize;
minX = tileRange.minX - minX = tileRange.minX -
Math.floor((canvasTileRangeWidth - tileRange.getWidth()) / 2); Math.floor((canvasTileRangeWidth - tileRange.getWidth()) / 2);
minY = tileRange.minY - minY = tileRange.minY -
@@ -297,9 +300,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var i, ii; var i, ii;
for (i = 0, ii = tilesToClear.length; i < ii; ++i) { for (i = 0, ii = tilesToClear.length; i < ii; ++i) {
tile = tilesToClear[i]; tile = tilesToClear[i];
x = tileSize * (tile.tileCoord.x - canvasTileRange.minX); x = tilePixelSize * (tile.tileCoord.x - canvasTileRange.minX);
y = tileSize * (canvasTileRange.maxY - tile.tileCoord.y); y = tilePixelSize * (canvasTileRange.maxY - tile.tileCoord.y);
context.clearRect(x, y, tileSize, tileSize); context.clearRect(x, y, tilePixelSize, tilePixelSize);
} }
/** @type {Array.<number>} */ /** @type {Array.<number>} */
@@ -314,7 +317,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var height, width; var height, width;
for (i = 0, ii = zs.length; i < ii; ++i) { for (i = 0, ii = zs.length; i < ii; ++i) {
currentZ = zs[i]; currentZ = zs[i];
tileSize = tileGrid.getTileSize(currentZ); tilePixelSize =
tileSource.getTilePixelSize(currentZ, pixelRatio, projection);
tilesToDraw = tilesToDrawByZ[currentZ]; tilesToDraw = tilesToDrawByZ[currentZ];
if (currentZ == z) { if (currentZ == z) {
for (tileCoordKey in tilesToDraw) { for (tileCoordKey in tilesToDraw) {
@@ -323,18 +327,18 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
(tile.tileCoord.y - canvasTileRange.minY) * canvasTileRangeWidth + (tile.tileCoord.y - canvasTileRange.minY) * canvasTileRangeWidth +
(tile.tileCoord.x - canvasTileRange.minX); (tile.tileCoord.x - canvasTileRange.minX);
if (this.renderedTiles_[index] != tile) { if (this.renderedTiles_[index] != tile) {
x = tileSize * (tile.tileCoord.x - canvasTileRange.minX); x = tilePixelSize * (tile.tileCoord.x - canvasTileRange.minX);
y = tileSize * (canvasTileRange.maxY - tile.tileCoord.y); y = tilePixelSize * (canvasTileRange.maxY - tile.tileCoord.y);
tileState = tile.getState(); tileState = tile.getState();
if (tileState == ol.TileState.EMPTY || if (tileState == ol.TileState.EMPTY ||
tileState == ol.TileState.ERROR || tileState == ol.TileState.ERROR ||
!opaque) { !opaque) {
context.clearRect(x, y, tileSize, tileSize); context.clearRect(x, y, tilePixelSize, tilePixelSize);
} }
if (tileState == ol.TileState.LOADED) { if (tileState == ol.TileState.LOADED) {
context.drawImage(tile.getImage(), context.drawImage(tile.getImage(),
tileGutter, tileGutter, tileSize, tileSize, tileGutter, tileGutter, tilePixelSize, tilePixelSize,
x, y, tileSize, tileSize); x, y, tilePixelSize, tilePixelSize);
} }
this.renderedTiles_[index] = tile; this.renderedTiles_[index] = tile;
} }
@@ -344,17 +348,17 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
for (tileCoordKey in tilesToDraw) { for (tileCoordKey in tilesToDraw) {
tile = tilesToDraw[tileCoordKey]; tile = tilesToDraw[tileCoordKey];
tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent); tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent);
x = (tileExtent[0] - origin[0]) / tileResolution; x = (tileExtent[0] - origin[0]) / tilePixelResolution;
y = (origin[1] - tileExtent[3]) / tileResolution; y = (origin[1] - tileExtent[3]) / tilePixelResolution;
width = scale * tileSize; width = scale * tilePixelSize;
height = scale * tileSize; height = scale * tilePixelSize;
tileState = tile.getState(); tileState = tile.getState();
if (tileState == ol.TileState.EMPTY || !opaque) { if (tileState == ol.TileState.EMPTY || !opaque) {
context.clearRect(x, y, width, height); context.clearRect(x, y, width, height);
} }
if (tileState == ol.TileState.LOADED) { if (tileState == ol.TileState.LOADED) {
context.drawImage(tile.getImage(), context.drawImage(tile.getImage(),
tileGutter, tileGutter, tileSize, tileSize, tileGutter, tileGutter, tilePixelSize, tilePixelSize,
x, y, width, height); x, y, width, height);
} }
interimTileRange = interimTileRange =
@@ -383,10 +387,10 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
ol.vec.Mat4.makeTransform2D(this.imageTransform_, ol.vec.Mat4.makeTransform2D(this.imageTransform_,
pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[0] / 2,
pixelRatio * frameState.size[1] / 2, pixelRatio * frameState.size[1] / 2,
pixelRatio * tileResolution / view2DState.resolution, pixelRatio * tilePixelResolution / view2DState.resolution,
pixelRatio * tileResolution / view2DState.resolution, pixelRatio * tilePixelResolution / view2DState.resolution,
view2DState.rotation, view2DState.rotation,
(origin[0] - center[0]) / tileResolution, (origin[0] - center[0]) / tilePixelResolution,
(center[1] - origin[1]) / tileResolution); (center[1] - origin[1]) / tilePixelResolution);
}; };