Make rendering of reprojection edges configurable

src/ol/reproj/reproj.js

@@ -56,10 +56,11 @@ ol.reproj.calculateSourceResolution = function(sourceProj, targetProj,
  * @param {ol.reproj.Triangulation} triangulation
  * @param {Array.<{extent: ol.Extent,
  *                 image: (HTMLCanvasElement|Image)}>} sources
+ * @param {boolean=} opt_renderEdges
  */
 ol.reproj.renderTriangles = function(context,
     sourceResolution, sourceExtent, targetResolution, targetExtent,
-    triangulation, sources) {
+    triangulation, sources, opt_renderEdges) {
 
   var wrapXShiftDistance = !goog.isNull(sourceExtent) ?
       ol.extent.getWidth(sourceExtent) : 0;
@@ -210,7 +211,10 @@ ol.reproj.renderTriangles = function(context,
     context.closePath();
     context.clip();
 
-    context.save();
+    if (opt_renderEdges) {
+      context.save();
+    }
+
     context.translate(srcDataExtent[0] - srcNumericalShiftX,
                       srcDataExtent[3] - srcNumericalShiftY);
 
@@ -225,11 +229,11 @@ ol.reproj.renderTriangles = function(context,
       context.drawImage(stitchContext.canvas, 0, 0);
     }
 
-    context.restore();
+    if (opt_renderEdges) {
+      context.restore();
 
-    if (goog.DEBUG) {
       context.strokeStyle = 'black';
-      context.lineWidth = 2 * pixelSize;
+      context.lineWidth = pixelSize;
       context.beginPath();
       context.moveTo(x0, y0);
       context.lineTo(x1, y1);

src/ol/reproj/tile.js

@@ -28,11 +28,19 @@ goog.require('ol.reproj.Triangulation');
  * @param {number} y
  * @param {number} pixelRatio
  * @param {function(number, number, number, number) : ol.Tile} getTileFunction
+ * @param {boolean=} opt_renderEdges
  */
 ol.reproj.Tile = function(sourceProj, sourceTileGrid,
-    targetProj, targetTileGrid, z, x, y, pixelRatio, getTileFunction) {
+    targetProj, targetTileGrid, z, x, y, pixelRatio, getTileFunction,
+    opt_renderEdges) {
   goog.base(this, [z, x, y], ol.TileState.IDLE);
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.renderEdges_ = goog.isDef(opt_renderEdges) ? opt_renderEdges : false;
+
   /**
    * @private
    * @type {HTMLCanvasElement}
@@ -239,18 +247,12 @@ ol.reproj.Tile.prototype.reproject_ = function() {
   var context = ol.dom.createCanvasContext2D(width, height);
   context.imageSmoothingEnabled = true;
 
-  if (goog.DEBUG) {
-    context.fillStyle =
-        sources.length === 0 ? 'rgba(255,0,0,.8)' :
-        (sources.length == 1 ? 'rgba(0,255,0,.3)' : 'rgba(0,0,255,.1)');
-    context.fillRect(0, 0, width, height);
-  }
-
   if (sources.length > 0) {
     var targetExtent = this.targetTileGrid_.getTileCoordExtent(tileCoord);
     ol.reproj.renderTriangles(context,
         srcResolution, this.sourceTileGrid_.getExtent(),
-        targetResolution, targetExtent, this.triangulation_, sources);
+        targetResolution, targetExtent, this.triangulation_, sources,
+        this.renderEdges_);
   }
 
   this.canvas_ = context.canvas;

src/ol/source/tileimagesource.js

@@ -84,6 +84,12 @@ ol.source.TileImage = function(options) {
    * @type {Object.<string, ol.tilegrid.TileGrid>}
    */
   this.tileGridForProjection = {};
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.renderReprojectionEdges_ = false;
 };
 goog.inherits(ol.source.TileImage, ol.source.Tile);
 
@@ -198,7 +204,7 @@ ol.source.TileImage.prototype.getTile =
           projection, targetTileGrid,
           z, x, y, pixelRatio, goog.bind(function(z, x, y, pixelRatio) {
             return this.getTileInternal(z, x, y, pixelRatio, sourceProjection);
-          }, this));
+          }, this), this.renderReprojectionEdges_);
 
       cache.set(tileCoordKey, tile);
       return tile;
@@ -287,6 +293,21 @@ ol.source.TileImage.prototype.handleTileChange_ = function(event) {
 };
 
 
+/**
+ * Sets whether to render reprojection edges or not (usually for debugging).
+ * @param {boolean} render
+ * @api
+ */
+ol.source.TileImage.prototype.setRenderReprojectionEdges = function(render) {
+  if (this.renderReprojectionEdges_ == render) return;
+  this.renderReprojectionEdges_ = render;
+  goog.object.forEach(this.tileCacheForProjection, function(tileCache) {
+    tileCache.clear();
+  });
+  this.changed();
+};
+
+
 /**
  * Set the tile load function of the source.
  * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.