From b71b87d7bbf4ab1c397af77a1a34f09be5c54179 Mon Sep 17 00:00:00 2001
From: philip <philip@bitsighttech.com>
Date: Sat, 28 Dec 2019 03:40:10 +0000
Subject: [PATCH] Fix issue with reprojection and double drawing pixels.

---
 src/ol/reproj.js               | 31 +++++--------------------------
 src/ol/reproj/Triangulation.js |  2 +-
 2 files changed, 6 insertions(+), 27 deletions(-)

diff --git a/src/ol/reproj.js b/src/ol/reproj.js
index 7593c6bc3b..bb54d07f01 100644
--- a/src/ol/reproj.js
+++ b/src/ol/reproj.js
@@ -53,24 +53,6 @@ export function calculateSourceResolution(sourceProj, targetProj,
 }
 
 
-/**
- * Enlarge the clipping triangle point by 1 pixel to ensure the edges overlap
- * in order to mask gaps caused by antialiasing.
- *
- * @param {number} centroidX Centroid of the triangle (x coordinate in pixels).
- * @param {number} centroidY Centroid of the triangle (y coordinate in pixels).
- * @param {number} x X coordinate of the point (in pixels).
- * @param {number} y Y coordinate of the point (in pixels).
- * @return {import("./coordinate.js").Coordinate} New point 1 px farther from the centroid.
- */
-function enlargeClipPoint(centroidX, centroidY, x, y) {
-  const dX = x - centroidX;
-  const dY = y - centroidY;
-  const distance = Math.sqrt(dX * dX + dY * dY);
-  return [Math.round(x + dX / distance), Math.round(y + dY / distance)];
-}
-
-
 /**
  * Renders the source data into new canvas based on the triangulation.
  *
@@ -103,6 +85,8 @@ export function render(width, height, pixelRatio,
 
   context.scale(pixelRatio, pixelRatio);
 
+  context.globalCompositeOperation = 'lighter';
+
   const sourceDataExtent = createEmpty();
   sources.forEach(function(src, i, arr) {
     extend(sourceDataExtent, src.extent);
@@ -190,15 +174,10 @@ export function render(width, height, pixelRatio,
 
     context.save();
     context.beginPath();
-    const centroidX = (u0 + u1 + u2) / 3;
-    const centroidY = (v0 + v1 + v2) / 3;
-    const p0 = enlargeClipPoint(centroidX, centroidY, u0, v0);
-    const p1 = enlargeClipPoint(centroidX, centroidY, u1, v1);
-    const p2 = enlargeClipPoint(centroidX, centroidY, u2, v2);
 
-    context.moveTo(p1[0], p1[1]);
-    context.lineTo(p0[0], p0[1]);
-    context.lineTo(p2[0], p2[1]);
+    context.moveTo(u1, v1);
+    context.lineTo(u0, v0);
+    context.lineTo(u2, v2);
     context.clip();
 
     context.transform(
diff --git a/src/ol/reproj/Triangulation.js b/src/ol/reproj/Triangulation.js
index ebdab668da..9fe7270abd 100644
--- a/src/ol/reproj/Triangulation.js
+++ b/src/ol/reproj/Triangulation.js
@@ -321,7 +321,7 @@ class Triangulation {
     }
 
     this.addTriangle_(a, c, d, aSrc, cSrc, dSrc);
-    this.addTriangle_(a, b, c, aSrc, bSrc, cSrc);
+    this.addTriangle_(a, c, b, aSrc, cSrc, bSrc);
   }
 
   /**