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;