Optimize geometry pick performance by render bbox (#1998)

deyihu · web-flow · commit ca8f97ffb8b7 · 2023-06-28T14:38:40.000+08:00
* Optimize geometry pick performance  by render bbox

* update

* resetbbox when geom not in current view

* update

* fix

* update

* update

* update

* update

* update
diff --git a/src/core/Canvas.js b/src/core/Canvas.js
@@ -13,6 +13,7 @@ import { createEl } from './util/dom';
 import Browser from './Browser';
 import Point from '../geo/Point';
 import { getFont, getAlignPoint } from './util/strings';
+import { BBOX_TEMP, resetBBOX, setBBOX } from './util/bbox';
 
 const DEFAULT_STROKE_COLOR = '#000';
 const DEFAULT_FILL_COLOR = 'rgba(255,255,255,0)';
@@ -312,7 +313,7 @@ const Canvas = {
     },
 
     text(ctx, text, pt, style, textDesc) {
-        Canvas._textOnMultiRow(ctx, textDesc['rows'], style, pt, textDesc['size'], textDesc['rawSize']);
+        return Canvas._textOnMultiRow(ctx, textDesc['rows'], style, pt, textDesc['size'], textDesc['rawSize']);
     },
 
     _textOnMultiRow(ctx, texts, style, point, splitTextSize, textSize) {
@@ -321,17 +322,23 @@ const Canvas = {
             basePoint = point.add(0, ptAlign.y),
             maxHeight = style['textMaxHeight'];
         let text, rowAlign, height = 0;
+        resetBBOX(BBOX_TEMP);
         for (let i = 0, len = texts.length; i < len; i++) {
             text = texts[i]['text'];
             rowAlign = getAlignPoint(texts[i]['size'], style['textHorizontalAlignment'], style['textVerticalAlignment']);
-            Canvas._textOnLine(ctx, text, basePoint.add(rowAlign.x, i * lineHeight), style['textHaloRadius'], style['textHaloFill'], style['textHaloOpacity']);
+            const point = basePoint.add(rowAlign.x, i * lineHeight);
+            Canvas._textOnLine(ctx, text, point, style['textHaloRadius'], style['textHaloFill'], style['textHaloOpacity']);
+            const textSize = texts[i].size;
+            const minx = point.x, miny = point.y, maxx = minx + textSize.width, maxy = miny + textSize.height;
+            setBBOX(BBOX_TEMP, minx, miny, maxx, maxy);
             if (maxHeight > 0) {
                 height += lineHeight;
                 if (height + textSize['height'] >= maxHeight) {
                     break;
                 }
             }
         }
+        return BBOX_TEMP;
     },
 
     _textOnLine(ctx, text, pt, textHaloRadius, textHaloFill, textHaloAlpha) {
diff --git a/src/core/util/bbox.js b/src/core/util/bbox.js
@@ -0,0 +1,63 @@
+const minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+
+
+export function getDefaultBBOX() {
+    return [minx, miny, maxx, maxy];
+}
+
+export const BBOX_TEMP = getDefaultBBOX();
+
+//reset bbox
+export function resetBBOX(bbox) {
+    bbox[0] = minx;
+    bbox[1] = miny;
+    bbox[2] = maxx;
+    bbox[3] = maxy;
+}
+
+//cal points bbox:linestring,polygon etc
+export function pointsBBOX(points, out) {
+    if (!points) {
+        return;
+    }
+    if (Array.isArray(points[0])) {
+        for (let i = 0, len = points.length; i < len; i++) {
+            pointsBBOX(points[i], out);
+        }
+    } else if (Array.isArray(points)) {
+        for (let i = 0, len = points.length; i < len; i++) {
+            const { x, y } = points[i];
+            out[0] = Math.min(x, out[0]);
+            out[1] = Math.min(y, out[1]);
+            out[2] = Math.max(x, out[2]);
+            out[3] = Math.max(y, out[3]);
+        }
+    } else {
+        const { x, y } = points;
+        out[0] = Math.min(x, out[0]);
+        out[1] = Math.min(y, out[1]);
+        out[2] = Math.max(x, out[2]);
+        out[3] = Math.max(y, out[3]);
+    }
+}
+
+export function setBBOX(bbox, x1, y1, x2, y2) {
+    if (x1 !== 0 && !x1) {
+        return;
+    }
+    //x1 is bbox array
+    if (Array.isArray(x1)) {
+        y1 = x1[1];
+        x2 = x1[2];
+        y2 = x1[3];
+        x1 = x1[0];
+    }
+    bbox[0] = Math.min(x1, bbox[0]);
+    bbox[1] = Math.min(y1, bbox[1]);
+    bbox[2] = Math.max(x2, bbox[2]);
+    bbox[3] = Math.max(y2, bbox[3]);
+}
+
+export function validateBBOX(bbox) {
+    return bbox && bbox[0] !== Infinity && bbox[0] !== undefined;
+}
diff --git a/src/layer/VectorLayer.js b/src/layer/VectorLayer.js
@@ -168,6 +168,14 @@ class VectorLayer extends OverlayLayer {
             if (!geo || !geo.isVisible() || !geo._getPainter() || !geo.options['interactive']) {
                 continue;
             }
+            const painter = geo._getPainter();
+            const bbox = painter.getRenderBBOX && painter.getRenderBBOX();
+            if (bbox) {
+                const { x, y } = cp;
+                if (x < bbox[0] || y < bbox[1] || x > bbox[2] || y > bbox[3]) {
+                    continue;
+                }
+            }
             if (!(geo instanceof LineString) || (!geo._getArrowStyle() && !(geo instanceof Curve))) {
                 // Except for LineString with arrows or curves
                 let extent = geo.getContainerExtent(TEMP_EXTENT);
diff --git a/src/renderer/geometry/CollectionPainter.js b/src/renderer/geometry/CollectionPainter.js
@@ -1,5 +1,6 @@
 import Class from '../../core/Class';
 import PointExtent from '../../geo/PointExtent';
+import { getDefaultBBOX, resetBBOX, setBBOX, validateBBOX } from '../../core/util/bbox';
 
 const TEMP_EXTENT = new PointExtent();
 
@@ -17,8 +18,38 @@ export default class CollectionPainter extends Class {
         super();
         this.geometry = geometry;
         this.isMask = isMask;
+        this.bbox = getDefaultBBOX();
+        this._drawTime = 0;
     }
 
+    _setDrawTime(time) {
+        this._drawTime = time;
+        this._eachPainter((painter) => {
+            painter._setDrawTime(time);
+        });
+        return this;
+    }
+
+    getRenderBBOX() {
+        const layer = this.getLayer();
+        if (layer && layer._drawTime !== this._drawTime) {
+            return null;
+        }
+        resetBBOX(this.bbox);
+        this._eachPainter((painter) => {
+            const bbox = painter.getRenderBBOX();
+            if (!validateBBOX(bbox)) {
+                return;
+            }
+            setBBOX(this.bbox, bbox);
+        });
+        if (validateBBOX(this.bbox)) {
+            return this.bbox;
+        }
+        return null;
+    }
+
+
     _eachPainter(fn) {
         const geometries = this.geometry.getGeometries();
         let painter;
@@ -35,6 +66,11 @@ export default class CollectionPainter extends Class {
         }
     }
 
+    getLayer() {
+        return this.geometry && this.geometry.getLayer();
+    }
+
+
     paint(extent) {
         if (!this.geometry) {
             return;
diff --git a/src/renderer/geometry/Painter.js b/src/renderer/geometry/Painter.js
@@ -7,6 +7,7 @@ import PointExtent from '../../geo/PointExtent';
 import Canvas from '../../core/Canvas';
 import * as Symbolizers from './symbolizers';
 import { interpolate } from '../../core/util/util';
+import { getDefaultBBOX, resetBBOX, setBBOX, validateBBOX } from '../../core/util/bbox';
 
 //registered symbolizers
 //the latter will paint at the last
@@ -54,14 +55,41 @@ class Painter extends Class {
         this.geometry = geometry;
         this.symbolizers = this._createSymbolizers();
         this._altAtGL = this._getGeometryAltitude();
+        this.bbox = getDefaultBBOX();
+        this._drawTime = 0;
+    }
+
+    _setDrawTime(time) {
+        this._drawTime = time;
+        return this;
+    }
+
+    getRenderBBOX() {
+        const layer = this.getLayer();
+        if (layer && layer._drawTime !== this._drawTime) {
+            return null;
+        }
+        resetBBOX(this.bbox);
+        for (let i = this.symbolizers.length - 1; i >= 0; i--) {
+            const symbolizer = this.symbolizers[i];
+            const bbox = symbolizer.bbox;
+            if (!validateBBOX(bbox)) {
+                continue;
+            }
+            setBBOX(this.bbox, bbox);
+        }
+        if (validateBBOX(this.bbox)) {
+            return this.bbox;
+        }
+        return null;
     }
 
     getMap() {
         return this.geometry.getMap();
     }
 
     getLayer() {
-        return this.geometry.getLayer();
+        return this.geometry && this.geometry.getLayer();
     }
 
     /**
@@ -535,6 +563,16 @@ class Painter extends Class {
         return this.geometry._getInternalSymbol();
     }
 
+    _resetSymbolizersBBOX() {
+        //reset all symbolizers render bbox
+        for (let i = this.symbolizers.length - 1; i >= 0; i--) {
+            const symbolizer = this.symbolizers[i];
+            const bbox = symbolizer.bbox;
+            resetBBOX(bbox);
+        }
+        return this;
+    }
+
     paint(extent, context, offset) {
         if (!this.symbolizers) {
             return;
@@ -559,6 +597,9 @@ class Painter extends Class {
         this.containerOffset = offset || mapStateCache.offset || map._pointToContainerPoint(renderer.southWest)._add(0, -map.height);
         this._beforePaint();
         const ctx = context || renderer.context;
+        if (!ctx.isHitTesting) {
+            this._resetSymbolizersBBOX();
+        }
         const contexts = [ctx, renderer.resources];
         for (let i = this.symbolizers.length - 1; i >= 0; i--) {
             // reduce function call
@@ -633,6 +674,7 @@ class Painter extends Class {
         Canvas.setHitTesting(true);
         testCanvas.width = testCanvas.height = 2 * tolerance;
         const ctx = Canvas.getCanvas2DContext(testCanvas);
+        ctx.isHitTesting = true;
         try {
             this.paint(null, ctx, this._hitPoint);
         } catch (e) {
diff --git a/src/renderer/geometry/VectorRenderer.js b/src/renderer/geometry/VectorRenderer.js
@@ -9,6 +9,7 @@ import Rectangle from '../../geometry/Rectangle';
 import Path from '../../geometry/Path';
 import LineString from '../../geometry/LineString';
 import Polygon from '../../geometry/Polygon';
+import { BBOX_TEMP, pointsBBOX, resetBBOX } from '../../core/util/bbox';
 
 const TEMP_WITHIN = {
     within: false,
@@ -36,7 +37,16 @@ function isWithinPixel(painter) {
 Geometry.include({
     _redrawWhenPitch: () => false,
 
-    _redrawWhenRotate: () => false
+    _redrawWhenRotate: () => false,
+
+    _getRenderBBOX(ctx, points) {
+        if (!ctx.isHitTesting) {
+            resetBBOX(BBOX_TEMP);
+            pointsBBOX(points, BBOX_TEMP);
+            return BBOX_TEMP;
+        }
+        return null;
+    }
 });
 
 const el = {
@@ -187,6 +197,7 @@ LineString.include({
             Canvas.path(ctx, points, lineOpacity, null, dasharray);
         }
         this._paintArrow(ctx, points, lineOpacity);
+        return this._getRenderBBOX(ctx, points);
     },
 
     _getArrowPlacement() {
@@ -311,6 +322,7 @@ Polygon.include({
         } else {
             Canvas.polygon(ctx, points, lineOpacity, fillOpacity, dasharray, this.options['smoothness']);
         }
+        return this._getRenderBBOX(ctx, points);
     }
 });
 
diff --git a/src/renderer/geometry/symbolizers/ImageMarkerSymbolizer.js b/src/renderer/geometry/symbolizers/ImageMarkerSymbolizer.js
@@ -70,13 +70,15 @@ export default class ImageMarkerSymbolizer extends PointSymbolizer {
             if (origin) {
                 p = origin;
             }
+            const x = p.x + alignPoint.x, y = p.y + alignPoint.y;
             Canvas.image(ctx, img,
-                p.x + alignPoint.x,
-                p.y + alignPoint.y,
+                x,
+                y,
                 width, height);
             if (origin) {
                 ctx.restore();
             }
+            this._setBBOX(ctx, x, y, x + width, y + height);
         }
         if (alpha !== undefined) {
             ctx.globalAlpha = alpha;
diff --git a/src/renderer/geometry/symbolizers/StrokeAndFillSymbolizer.js b/src/renderer/geometry/symbolizers/StrokeAndFillSymbolizer.js
@@ -57,7 +57,7 @@ export default class StrokeAndFillSymbolizer extends CanvasSymbolizer {
 
         const points = paintParams[0],
             isSplitted = (this.geometry.getJSONType() === 'Polygon' && points.length > 0 && Array.isArray(points[0][0])) ||
-            (this.geometry.type === 'LineString' && points.length > 0 && Array.isArray(points[0]));
+                (this.geometry.type === 'LineString' && points.length > 0 && Array.isArray(points[0]));
 
         if (isSplitted) {
             for (let i = 0; i < points.length; i++) {
@@ -70,7 +70,8 @@ export default class StrokeAndFillSymbolizer extends CanvasSymbolizer {
                     params.push.apply(params, paintParams.slice(1));
                 }
                 params.push(style['lineOpacity'], style['polygonOpacity'], style['lineDasharray']);
-                this.geometry._paintOn.apply(this.geometry, params);
+                const bbox = this.geometry._paintOn.apply(this.geometry, params);
+                this._setBBOX(ctx, bbox);
             }
         } else {
             this.prepareCanvas(ctx, style, resources);
@@ -80,7 +81,8 @@ export default class StrokeAndFillSymbolizer extends CanvasSymbolizer {
             const params = [ctx];
             params.push.apply(params, paintParams);
             params.push(style['lineOpacity'], style['polygonOpacity'], style['lineDasharray']);
-            this.geometry._paintOn.apply(this.geometry, params);
+            const bbox = this.geometry._paintOn.apply(this.geometry, params);
+            this._setBBOX(ctx, bbox);
         }
 
         if (ctx.setLineDash && Array.isArray(style['lineDasharray'])) {
@@ -138,15 +140,15 @@ export default class StrokeAndFillSymbolizer extends CanvasSymbolizer {
             'lineCap': getValueOrDefault(s['lineCap'], 'butt'), //“butt”, “square”, “round”
             'lineJoin': getValueOrDefault(s['lineJoin'], 'miter'), //“bevel”, “round”, “miter”
             'linePatternFile': getValueOrDefault(s['linePatternFile'], null),
-            'lineDx' : getValueOrDefault(s['lineDx'], 0),
-            'lineDy' : getValueOrDefault(s['lineDy'], 0),
+            'lineDx': getValueOrDefault(s['lineDx'], 0),
+            'lineDy': getValueOrDefault(s['lineDy'], 0),
             'polygonFill': getValueOrDefault(s['polygonFill'], null),
             'polygonOpacity': getValueOrDefault(s['polygonOpacity'], 1),
             'polygonPatternFile': getValueOrDefault(s['polygonPatternFile'], null),
-            'polygonPatternDx' : getValueOrDefault(s['polygonPatternDx'], 0),
-            'polygonPatternDy' : getValueOrDefault(s['polygonPatternDy'], 0),
-            'linePatternDx' : getValueOrDefault(s['linePatternDx'], 0),
-            'linePatternDy' : getValueOrDefault(s['linePatternDy'], 0)
+            'polygonPatternDx': getValueOrDefault(s['polygonPatternDx'], 0),
+            'polygonPatternDy': getValueOrDefault(s['polygonPatternDy'], 0),
+            'linePatternDx': getValueOrDefault(s['linePatternDx'], 0),
+            'linePatternDy': getValueOrDefault(s['linePatternDy'], 0)
         };
         if (result['lineWidth'] === 0) {
             result['lineOpacity'] = 0;
diff --git a/src/renderer/geometry/symbolizers/Symbolizer.js b/src/renderer/geometry/symbolizers/Symbolizer.js
diff --git a/src/renderer/geometry/symbolizers/TextMarkerSymbolizer.js b/src/renderer/geometry/symbolizers/TextMarkerSymbolizer.js
diff --git a/src/renderer/geometry/symbolizers/VectorMarkerSymbolizer.js b/src/renderer/geometry/symbolizers/VectorMarkerSymbolizer.js
diff --git a/src/renderer/layer/vectorlayer/VectorLayerCanvasRenderer.js b/src/renderer/layer/vectorlayer/VectorLayerCanvasRenderer.js

Original file line number	Diff line number	Diff line change
`@@ -70,13 +70,15 @@ export default class ImageMarkerSymbolizer extends PointSymbolizer {`
`70`	`70`	`if (origin) {`
`71`	`71`	`p = origin;`
`72`	`72`	`}`
	`73`	`+ const x = p.x + alignPoint.x, y = p.y + alignPoint.y;`
`73`	`74`	`Canvas.image(ctx, img,`
`74`		`- p.x + alignPoint.x,`
`75`		`- p.y + alignPoint.y,`
	`75`	`+ x,`
	`76`	`+ y,`
`76`	`77`	`width, height);`
`77`	`78`	`if (origin) {`
`78`	`79`	`ctx.restore();`
`79`	`80`	`}`
	`81`	`+ this._setBBOX(ctx, x, y, x + width, y + height);`
`80`	`82`	`}`
`81`	`83`	`if (alpha !== undefined) {`
`82`	`84`	`ctx.globalAlpha = alpha;`