Support pixelRatio during reprojection

src/ol/reproj/image.js

@@ -27,27 +27,6 @@ goog.require('ol.reproj.Triangulation');
 ol.reproj.Image = function(sourceProj, targetProj,
     targetExtent, targetResolution, pixelRatio, getImageFunction) {
 
-  var width = ol.extent.getWidth(targetExtent) / targetResolution;
-  var height = ol.extent.getHeight(targetExtent) / targetResolution;
-
-  /**
-   * @private
-   * @type {CanvasRenderingContext2D}
-   */
-  this.context_ = ol.dom.createCanvasContext2D(width, height);
-  this.context_.imageSmoothingEnabled = true;
-
-  if (goog.DEBUG) {
-    this.context_.fillStyle = 'rgba(255,0,0,0.1)';
-    this.context_.fillRect(0, 0, width, height);
-  }
-
-  /**
-   * @private
-   * @type {HTMLCanvasElement}
-   */
-  this.canvas_ = this.context_.canvas;
-
   /**
    * @private
    * @type {ol.Extent}
@@ -90,6 +69,31 @@ ol.reproj.Image = function(sourceProj, targetProj,
   this.srcImage_ = getImageFunction(srcExtent, sourceResolution,
                                     pixelRatio, sourceProj);
 
+  var width = ol.extent.getWidth(targetExtent) / targetResolution;
+  var height = ol.extent.getHeight(targetExtent) / targetResolution;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.srcPixelRatio_ =
+      !goog.isNull(this.srcImage_) ? this.srcImage_.getPixelRatio() : 1;
+
+  /**
+   * @private
+   * @type {CanvasRenderingContext2D}
+   */
+  this.context_ = ol.dom.createCanvasContext2D(
+      this.srcPixelRatio_ * width, this.srcPixelRatio_ * height);
+  this.context_.imageSmoothingEnabled = true;
+  this.context_.scale(this.srcPixelRatio_, this.srcPixelRatio_);
+
+  /**
+   * @private
+   * @type {HTMLCanvasElement}
+   */
+  this.canvas_ = this.context_.canvas;
+
   /**
    * @private
    * @type {goog.events.Key}
@@ -105,7 +109,7 @@ ol.reproj.Image = function(sourceProj, targetProj,
     attributions = this.srcImage_.getAttributions();
   }
 
-  goog.base(this, targetExtent, targetResolution, pixelRatio,
+  goog.base(this, targetExtent, targetResolution, this.srcPixelRatio_,
             state, attributions);
 };
 goog.inherits(ol.reproj.Image, ol.ImageBase);
@@ -142,7 +146,7 @@ ol.reproj.Image.prototype.reproject_ = function() {
         this.targetResolution_, this.targetExtent_, this.triangulation_, [{
           extent: this.srcImage_.getExtent(),
           image: this.srcImage_.getImage()
-        }]);
+        }], this.srcPixelRatio_);
   }
   this.state = srcState;
   this.changed();

src/ol/reproj/reproj.js

@@ -68,11 +68,12 @@ ol.reproj.WrapXRendering_ = {
  * @param {ol.reproj.Triangulation} triangulation
  * @param {Array.<{extent: ol.Extent,
  *                 image: (HTMLCanvasElement|Image)}>} sources
+ * @param {number} sourcePixelRatio
  * @param {boolean=} opt_renderEdges
  */
 ol.reproj.renderTriangles = function(context,
     sourceResolution, sourceExtent, targetResolution, targetExtent,
-    triangulation, sources, opt_renderEdges) {
+    triangulation, sources, sourcePixelRatio, opt_renderEdges) {
 
   var wrapXShiftDistance = !goog.isNull(sourceExtent) ?
       ol.extent.getWidth(sourceExtent) : 0;
@@ -127,10 +128,11 @@ ol.reproj.renderTriangles = function(context,
   }
 
   var stitchContext = ol.dom.createCanvasContext2D(
-      Math.round(canvasWidthInUnits / sourceResolution),
-      Math.round(srcDataHeight / sourceResolution));
+      Math.round(sourcePixelRatio * canvasWidthInUnits / sourceResolution),
+      Math.round(sourcePixelRatio * srcDataHeight / sourceResolution));
 
-  stitchContext.scale(1 / sourceResolution, 1 / sourceResolution);
+  stitchContext.scale(sourcePixelRatio / sourceResolution,
+                      sourcePixelRatio / sourceResolution);
   stitchContext.translate(-srcDataExtent[0], srcDataExtent[3]);
 
   goog.array.forEach(sources, function(src, i, arr) {
@@ -249,12 +251,13 @@ ol.reproj.renderTriangles = function(context,
     context.closePath();
     context.clip();
 
-    context.setTransform(coefs[0], coefs[2], coefs[1], coefs[3], u0, v0);
+    context.transform(coefs[0], coefs[2], coefs[1], coefs[3], u0, v0);
 
     context.translate(srcDataExtent[0] - srcNumericalShiftX,
                       srcDataExtent[3] - srcNumericalShiftY);
 
-    context.scale(sourceResolution, -sourceResolution);
+    context.scale(sourceResolution / sourcePixelRatio,
+                  -sourceResolution / sourcePixelRatio);
 
     context.drawImage(stitchContext.canvas, 0, 0);
     context.restore();

src/ol/reproj/tile.js

@@ -43,6 +43,12 @@ ol.reproj.Tile = function(sourceProj, sourceTileGrid,
    */
   this.renderEdges_ = goog.isDef(opt_renderEdges) ? opt_renderEdges : false;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.pixelRatio_ = pixelRatio;
+
   /**
    * @private
    * @type {HTMLCanvasElement}
@@ -253,17 +259,18 @@ ol.reproj.Tile.prototype.reproject_ = function() {
   var targetResolution = this.targetTileGrid_.getResolution(z);
   var srcResolution = this.sourceTileGrid_.getResolution(this.srcZ_);
 
-  var width = goog.isNumber(size) ? size : size[0];
-  var height = goog.isNumber(size) ? size : size[1];
+  var width = this.pixelRatio_ * (goog.isNumber(size) ? size : size[0]);
+  var height = this.pixelRatio_ * (goog.isNumber(size) ? size : size[1]);
   var context = ol.dom.createCanvasContext2D(width, height);
   context.imageSmoothingEnabled = true;
+  context.scale(this.pixelRatio_, this.pixelRatio_);
 
   if (sources.length > 0) {
     var targetExtent = this.targetTileGrid_.getTileCoordExtent(tileCoord);
     ol.reproj.renderTriangles(context,
         srcResolution, this.sourceTileGrid_.getExtent(),
         targetResolution, targetExtent, this.triangulation_, sources,
-        this.renderEdges_);
+        this.pixelRatio_, this.renderEdges_);
   }
 
   this.canvas_ = context.canvas;

src/ol/source/tileimagesource.js

@@ -208,7 +208,8 @@ ol.source.TileImage.prototype.getTile =
       var tile = new ol.reproj.Tile(
           sourceProjection, sourceTileGrid,
           projection, targetTileGrid,
-          z, x, y, pixelRatio, goog.bind(function(z, x, y, pixelRatio) {
+          z, x, y, this.getTilePixelRatio(),
+          goog.bind(function(z, x, y, pixelRatio) {
             return this.getTileInternal(z, x, y, pixelRatio, sourceProjection);
           }, this), this.reprojectionErrorThreshold_,
           this.renderReprojectionEdges_);

src/ol/source/tilesource.js

@@ -230,6 +230,14 @@ ol.source.Tile.prototype.getTileCacheForProjection = function(projection) {
 };
 
 
+/**
+ * @return {number}
+ */
+ol.source.Tile.prototype.getTilePixelRatio = function() {
+  return this.tilePixelRatio_;
+};
+
+
 /**
  * @param {number} z Z.
  * @param {number} pixelRatio Pixel ratio.