From 0c42d04295177deddf52a9ae3d29d366520ea75f Mon Sep 17 00:00:00 2001
From: Tom Payne <twpayne@gmail.com>
Date: Wed, 15 Jan 2014 13:02:06 +0100
Subject: [PATCH] Add HiDPI support to ol.renderer.canvas.TileLayer

---
 .../canvas/canvastilelayerrenderer.js         | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js
index efc822f958..a1bfffce45 100644
--- a/src/ol/renderer/canvas/canvastilelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js
@@ -175,8 +175,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
   var tileGrid = tileSource.getTileGridForProjection(projection);
   var tileGutter = tileSource.getGutter();
   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 tilePixelResolution = tileResolution / tilePixelRatio;
   var center = view2DState.center;
   var extent;
   if (tileResolution == view2DState.resolution) {
@@ -189,8 +192,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
   var tileRange = tileGrid.getTileRangeForExtentAndResolution(
       extent, tileResolution);
 
-  var canvasWidth = tileSize * tileRange.getWidth();
-  var canvasHeight = tileSize * tileRange.getHeight();
+  var canvasWidth = tilePixelSize * tileRange.getWidth();
+  var canvasHeight = tilePixelSize * tileRange.getHeight();
 
   var canvas, context;
   if (goog.isNull(this.canvas_)) {
@@ -229,8 +232,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
 
   var canvasTileRange, canvasTileRangeWidth, minX, minY;
   if (goog.isNull(this.renderedCanvasTileRange_)) {
-    canvasTileRangeWidth = canvasWidth / tileSize;
-    var canvasTileRangeHeight = canvasHeight / tileSize;
+    canvasTileRangeWidth = canvasWidth / tilePixelSize;
+    var canvasTileRangeHeight = canvasHeight / tilePixelSize;
     minX = tileRange.minX -
         Math.floor((canvasTileRangeWidth - tileRange.getWidth()) / 2);
     minY = tileRange.minY -
@@ -297,9 +300,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
   var i, ii;
   for (i = 0, ii = tilesToClear.length; i < ii; ++i) {
     tile = tilesToClear[i];
-    x = tileSize * (tile.tileCoord.x - canvasTileRange.minX);
-    y = tileSize * (canvasTileRange.maxY - tile.tileCoord.y);
-    context.clearRect(x, y, tileSize, tileSize);
+    x = tilePixelSize * (tile.tileCoord.x - canvasTileRange.minX);
+    y = tilePixelSize * (canvasTileRange.maxY - tile.tileCoord.y);
+    context.clearRect(x, y, tilePixelSize, tilePixelSize);
   }
 
   /** @type {Array.<number>} */
@@ -314,7 +317,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
   var height, width;
   for (i = 0, ii = zs.length; i < ii; ++i) {
     currentZ = zs[i];
-    tileSize = tileGrid.getTileSize(currentZ);
+    tilePixelSize =
+        tileSource.getTilePixelSize(currentZ, pixelRatio, projection);
     tilesToDraw = tilesToDrawByZ[currentZ];
     if (currentZ == z) {
       for (tileCoordKey in tilesToDraw) {
@@ -323,18 +327,18 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
             (tile.tileCoord.y - canvasTileRange.minY) * canvasTileRangeWidth +
             (tile.tileCoord.x - canvasTileRange.minX);
         if (this.renderedTiles_[index] != tile) {
-          x = tileSize * (tile.tileCoord.x - canvasTileRange.minX);
-          y = tileSize * (canvasTileRange.maxY - tile.tileCoord.y);
+          x = tilePixelSize * (tile.tileCoord.x - canvasTileRange.minX);
+          y = tilePixelSize * (canvasTileRange.maxY - tile.tileCoord.y);
           tileState = tile.getState();
           if (tileState == ol.TileState.EMPTY ||
               tileState == ol.TileState.ERROR ||
               !opaque) {
-            context.clearRect(x, y, tileSize, tileSize);
+            context.clearRect(x, y, tilePixelSize, tilePixelSize);
           }
           if (tileState == ol.TileState.LOADED) {
             context.drawImage(tile.getImage(),
-                tileGutter, tileGutter, tileSize, tileSize,
-                x, y, tileSize, tileSize);
+                tileGutter, tileGutter, tilePixelSize, tilePixelSize,
+                x, y, tilePixelSize, tilePixelSize);
           }
           this.renderedTiles_[index] = tile;
         }
@@ -344,17 +348,17 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
       for (tileCoordKey in tilesToDraw) {
         tile = tilesToDraw[tileCoordKey];
         tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent);
-        x = (tileExtent[0] - origin[0]) / tileResolution;
-        y = (origin[1] - tileExtent[3]) / tileResolution;
-        width = scale * tileSize;
-        height = scale * tileSize;
+        x = (tileExtent[0] - origin[0]) / tilePixelResolution;
+        y = (origin[1] - tileExtent[3]) / tilePixelResolution;
+        width = scale * tilePixelSize;
+        height = scale * tilePixelSize;
         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, tileSize, tileSize,
+              tileGutter, tileGutter, tilePixelSize, tilePixelSize,
               x, y, width, height);
         }
         interimTileRange =
@@ -383,10 +387,10 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
   ol.vec.Mat4.makeTransform2D(this.imageTransform_,
       pixelRatio * frameState.size[0] / 2,
       pixelRatio * frameState.size[1] / 2,
-      pixelRatio * tileResolution / view2DState.resolution,
-      pixelRatio * tileResolution / view2DState.resolution,
+      pixelRatio * tilePixelResolution / view2DState.resolution,
+      pixelRatio * tilePixelResolution / view2DState.resolution,
       view2DState.rotation,
-      (origin[0] - center[0]) / tileResolution,
-      (center[1] - origin[1]) / tileResolution);
+      (origin[0] - center[0]) / tilePixelResolution,
+      (center[1] - origin[1]) / tilePixelResolution);
 
 };