optimize linestring, polygon rendering performance (through the pixel alternative path) close #1266

Author: deyihu

src/core/Canvas.js

@@ -609,15 +609,15 @@ const Canvas = {
             const u0 = 1.0 - t0;
             const u1 = 1.0 - t1;
 
-            const qxa =  x1 * u0 * u0 + bx1 * 2 * t0 * u0 + bx2 * t0 * t0;
-            const qxb =  x1 * u1 * u1 + bx1 * 2 * t1 * u1 + bx2 * t1 * t1;
-            const qxc = bx1 * u0 * u0 + bx2 * 2 * t0 * u0 +  x2 * t0 * t0;
-            const qxd = bx1 * u1 * u1 + bx2 * 2 * t1 * u1 +  x2 * t1 * t1;
+            const qxa = x1 * u0 * u0 + bx1 * 2 * t0 * u0 + bx2 * t0 * t0;
+            const qxb = x1 * u1 * u1 + bx1 * 2 * t1 * u1 + bx2 * t1 * t1;
+            const qxc = bx1 * u0 * u0 + bx2 * 2 * t0 * u0 + x2 * t0 * t0;
+            const qxd = bx1 * u1 * u1 + bx2 * 2 * t1 * u1 + x2 * t1 * t1;
 
-            const qya =  y1 * u0 * u0 + by1 * 2 * t0 * u0 + by2 * t0 * t0;
-            const qyb =  y1 * u1 * u1 + by1 * 2 * t1 * u1 + by2 * t1 * t1;
-            const qyc = by1 * u0 * u0 + by2 * 2 * t0 * u0 +  y2 * t0 * t0;
-            const qyd = by1 * u1 * u1 + by2 * 2 * t1 * u1 +  y2 * t1 * t1;
+            const qya = y1 * u0 * u0 + by1 * 2 * t0 * u0 + by2 * t0 * t0;
+            const qyb = y1 * u1 * u1 + by1 * 2 * t1 * u1 + by2 * t1 * t1;
+            const qyc = by1 * u0 * u0 + by2 * 2 * t0 * u0 + y2 * t0 * t0;
+            const qyd = by1 * u1 * u1 + by2 * 2 * t1 * u1 + y2 * t1 * t1;
 
             // const xa = qxa * u0 + qxc * t0;
             const xb = qxa * u1 + qxc * t1;
@@ -873,6 +873,31 @@ const Canvas = {
         target.height = canvas.height;
         target.getContext('2d').drawImage(canvas, 0, 0);
         return target;
+    },
+
+    // pixel render
+    pixelRect(ctx, point, lineOpacity, fillOpacity) {
+        const lineWidth = ctx.lineWidth;
+        const alpha = ctx.globalAlpha;
+        if (lineWidth > 0 && lineOpacity > 0) {
+            if (ctx.fillStyle !== ctx.strokeStyle) {
+                ctx.fillStyle = ctx.strokeStyle;
+            }
+            if (lineOpacity < 1) {
+                ctx.globalAlpha *= lineOpacity;
+            }
+        } else if (fillOpacity > 0) {
+            if (fillOpacity < 1) {
+                ctx.globalAlpha *= fillOpacity;
+            }
+        } else {
+            return;
+        }
+        ctx.canvas._drawn = true;
+        ctx.fillRect(point[0], point[1], 1, 1);
+        if (ctx.globalAlpha !== alpha) {
+            ctx.globalAlpha = alpha;
+        }
     }
 };
 

src/renderer/geometry/Painter.js

@@ -30,6 +30,13 @@ const TEMP_FIXED_EXTENT = new PointExtent();
 const TEMP_CLIP_EXTENT1 = new PointExtent();
 // const TEMP_CONTAINER_EXTENT = new PointExtent();
 
+const TEMP_BBOX = {
+    minx: Infinity,
+    miny: Infinity,
+    maxx: -Infinity,
+    maxy: -Infinity
+};
+
 /**
  * @classdesc
  * Painter class for all geometry types except the collection types.
@@ -215,6 +222,7 @@ class Painter extends Class {
         }
         let cPoints;
         const roundPoint = this.getLayer().options['roundPoint'];
+        let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
         function pointsContainerPoints(viewPoints = [], alts = []) {
             const pts = map._pointsToContainerPoints(viewPoints, glZoom, alts);
             for (let i = 0, len = pts.length; i < len; i++) {
@@ -228,6 +236,10 @@ class Painter extends Class {
                     p.x = Math.ceil(p.x);
                     p.y = Math.ceil(p.y);
                 }
+                minx = Math.min(p.x, minx);
+                miny = Math.min(p.y, miny);
+                maxx = Math.max(p.x, maxx);
+                maxy = Math.max(p.y, maxy);
             }
             return pts;
         }
@@ -307,6 +319,12 @@ class Painter extends Class {
                 cPoints._add(dx, dy);
             }
         }
+        //cache geometry bbox
+        TEMP_BBOX.minx = minx;
+        TEMP_BBOX.miny = miny;
+        TEMP_BBOX.maxx = maxx;
+        TEMP_BBOX.maxy = maxy;
+        this.__bbox = TEMP_BBOX;
         return cPoints;
     }
 

src/renderer/geometry/VectorRenderer.js

@@ -10,6 +10,28 @@ import Path from '../../geometry/Path';
 import LineString from '../../geometry/LineString';
 import Polygon from '../../geometry/Polygon';
 
+const TEMP_WITHIN = {
+    within: false,
+    center: [0, 0]
+};
+// bbox in pixel
+function isWithinPixel(painter) {
+    if (!painter || (!painter.__bbox)) {
+        TEMP_WITHIN.within = false;
+    } else {
+        TEMP_WITHIN.within = false;
+        const { minx, miny, maxx, maxy } = painter.__bbox;
+        const offsetx = Math.abs(maxx - minx);
+        const offsety = Math.abs(maxy - miny);
+        if (offsetx <= 1 && offsety <= 1) {
+            TEMP_WITHIN.within = true;
+            TEMP_WITHIN.center[0] = (minx + maxx) / 2;
+            TEMP_WITHIN.center[1] = (miny + maxy) / 2;
+        }
+    }
+    return TEMP_WITHIN;
+}
+
 Geometry.include({
     _redrawWhenPitch: () => false,
 
@@ -156,7 +178,10 @@ LineString.include({
     },
 
     _paintOn(ctx, points, lineOpacity, fillOpacity, dasharray) {
-        if (this.options['smoothness']) {
+        const r = isWithinPixel(this._painter);
+        if (r.within) {
+            Canvas.pixelRect(ctx, r.center, lineOpacity, fillOpacity);
+        } else if (this.options['smoothness']) {
             Canvas.paintSmoothLine(ctx, points, lineOpacity, this.options['smoothness'], false, this._animIdx, this._animTailRatio);
         } else {
             Canvas.path(ctx, points, lineOpacity, null, dasharray);
@@ -280,7 +305,12 @@ Polygon.include({
     },
 
     _paintOn(ctx, points, lineOpacity, fillOpacity, dasharray) {
-        Canvas.polygon(ctx, points, lineOpacity, fillOpacity, dasharray, this.options['smoothness']);
+        const r = isWithinPixel(this._painter);
+        if (r.within) {
+            Canvas.pixelRect(ctx, r.center, lineOpacity, fillOpacity);
+        } else {
+            Canvas.polygon(ctx, points, lineOpacity, fillOpacity, dasharray, this.options['smoothness']);
+        }
     }
 });