Integrate image reprojection with ol.source.Image

src/ol/reproj/image.js

@@ -32,7 +32,7 @@ ol.reproj.Image = function(sourceProj, targetProj,
 
   /**
    * @private
-   * @type {Canvas2DRenderingContext}
+   * @type {CanvasRenderingContext2D}
    */
   this.context_ = ol.dom.createCanvasContext2D(width, height);
   this.context_.imageSmoothingEnabled = true;
@@ -48,15 +48,21 @@ ol.reproj.Image = function(sourceProj, targetProj,
    */
   this.canvas_ = this.context_.canvas;
 
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.maxSourceExtent_ = sourceProj.getExtent();
   var maxTargetExtent = targetProj.getExtent();
-  var maxSourceExtent = sourceProj.getExtent();
+
 
   /**
    * @private
    * @type {!ol.reproj.Triangulation}
    */
   this.triangulation_ = ol.reproj.triangulation.createForExtent(
-      targetExtent, sourceProj, targetProj, maxTargetExtent, maxSourceExtent);
+      targetExtent, sourceProj, targetProj,
+      maxTargetExtent, this.maxSourceExtent_);
 
   /**
    * @private
@@ -66,11 +72,12 @@ ol.reproj.Image = function(sourceProj, targetProj,
 
   /**
    * @private
-   * @type {!ol.Extent}
+   * @type {ol.Extent}
    */
   this.targetExtent_ = targetExtent;
 
-  var srcExtent = ol.reproj.triangulation.getSourceExtent(this.triangulation_);
+  var srcExtent = ol.reproj.triangulation.getSourceExtent(
+      this.triangulation_, sourceProj);
 
   var targetCenter = ol.extent.getCenter(targetExtent);
   var sourceResolution = ol.reproj.calculateSourceResolution(
@@ -130,9 +137,9 @@ ol.reproj.Image.prototype.reproject_ = function() {
   var srcState = this.srcImage_.getState();
   if (srcState == ol.ImageState.LOADED) {
     // render the reprojected content
-    ol.reproj.renderTriangles(this.context_, this.srcImage_.getResolution(),
+    ol.reproj.renderTriangles(this.context_,
-                              this.targetResolution_, this.targetExtent_,
+        this.srcImage_.getResolution(), this.maxSourceExtent_,
-                              this.triangulation_, [{
+        this.targetResolution_, this.targetExtent_, this.triangulation_, [{
           extent: this.srcImage_.getExtent(),
           image: this.srcImage_.getImage()
         }]);

src/ol/source/imagesource.js

@@ -8,6 +8,8 @@ goog.require('ol.Attribution');
 goog.require('ol.Extent');
 goog.require('ol.ImageState');
 goog.require('ol.array');
+goog.require('ol.proj');
+goog.require('ol.reproj.Image');
 goog.require('ol.source.Source');
 
 
@@ -90,7 +92,39 @@ ol.source.Image.prototype.findNearestResolution =
  * @param {ol.proj.Projection} projection Projection.
  * @return {ol.ImageBase} Single image.
  */
-ol.source.Image.prototype.getImage = goog.abstractMethod;
+ol.source.Image.prototype.getImage =
+    function(extent, resolution, pixelRatio, projection) {
+  var sourceProjection = this.getProjection();
+  if (!ol.ENABLE_RASTER_REPROJECTION ||
+      !goog.isDefAndNotNull(sourceProjection) ||
+      !goog.isDefAndNotNull(projection) ||
+      ol.proj.equivalent(sourceProjection, projection)) {
+    if (!goog.isNull(sourceProjection)) {
+      projection = sourceProjection;
+    }
+    return this.getImageInternal(extent, resolution, pixelRatio, projection);
+  } else {
+    var image = new ol.reproj.Image(
+        sourceProjection, projection, extent, resolution, pixelRatio,
+        goog.bind(function(extent, resolution, pixelRatio) {
+          return this.getImageInternal(extent, resolution,
+              pixelRatio, sourceProjection);
+        }, this));
+
+    return image;
+  }
+};
+
+
+/**
+ * @param {ol.Extent} extent Extent.
+ * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {ol.proj.Projection} projection Projection.
+ * @return {ol.ImageBase} Single image.
+ * @protected
+ */
+ol.source.Image.prototype.getImageInternal = goog.abstractMethod;
 
 
 /**