Geometry Edit control point support collision

src/geometry/editor/GeometryEditor.js

@@ -34,7 +34,9 @@ const options = {
     //symbols of edit handles
     'centerHandleSymbol': createHandleSymbol('ellipse', 1),
     'vertexHandleSymbol': createHandleSymbol('square', 1),
-    'newVertexHandleSymbol': createHandleSymbol('square', 0.4)
+    'newVertexHandleSymbol': createHandleSymbol('square', 0.4),
+    'collision': false,
+    'collisionBufferSize': 0
 };
 
 /**

src/renderer/edit/EditHandle.js

@@ -7,6 +7,7 @@ import { isNil } from '../../core/util/';
 import { getSymbolHash } from '../../core/util/style';
 import { getEventContainerPoint } from '../../core/util/dom';
 import DragHandler from '../../handler/Drag';
+import { bufferBBOX, getDefaultBBOX } from '../../core/util/bbox';
 
 const resources = new ResourceCache();
 let prevX, prevY;
@@ -92,7 +93,7 @@ export default class EditHandle extends Eventable(Class) {
         if (x + w > 0 && x < map.width && y + h > 0 && y < map.height) {
             const dpr = map.getDevicePixelRatio();
             ctx.globalAlpha = this.opacity;
-            ctx.drawImage(this._img, Math.round((x + dx) * dpr), Math.round((y  + dy) * dpr), Math.round(w * dpr), Math.round(h * dpr));
+            ctx.drawImage(this._img, Math.round((x + dx) * dpr), Math.round((y + dy) * dpr), Math.round(w * dpr), Math.round(h * dpr));
             return true;
         }
         return false;
@@ -199,4 +200,37 @@ export default class EditHandle extends Eventable(Class) {
             containerPoint
         });
     }
+
+    needCollision() {
+        const { target } = this;
+        return target && target.options && target.options.collision;
+    }
+
+    getRenderBBOX(dpr) {
+        const { target, map } = this;
+        if (!target || !target.options || !map) {
+            return null;
+        }
+        const symbol = this.options['symbol'];
+        const dx = symbol['markerDx'] || 0;
+        const dy = symbol['markerDy'] || 0;
+        const { x, y } = this._point;
+        const w = this.w;
+        const h = this.h;
+        dpr = dpr || map.getDevicePixelRatio();
+        this.bbox = this.bbox || getDefaultBBOX();
+        const x1 = Math.round((x + dx) * dpr);
+        const y1 = Math.round((y + dy) * dpr);
+        const width = Math.round(w * dpr);
+        const height = Math.round(h * dpr);
+        this.bbox[0] = x1;
+        this.bbox[1] = y1;
+        this.bbox[2] = x1 + width;
+        this.bbox[3] = y1 + height;
+
+        const { options } = target;
+        const collisionBufferSize = options.collisionBufferSize || 0;
+        bufferBBOX(this.bbox, collisionBufferSize);
+        return this.bbox;
+    }
 }

src/renderer/map/MapCanvasRenderer.js

@@ -6,6 +6,9 @@ import Point from '../../geo/Point';
 import Canvas2D from '../../core/Canvas';
 import MapRenderer from './MapRenderer';
 import Map from '../../map/Map';
+import CollisionIndex from '../../core/CollisionIndex';
+
+const tempCollisionIndex = new CollisionIndex();
 
 /**
  * @classdesc
@@ -1001,12 +1004,26 @@ class MapCanvasRenderer extends MapRenderer {
     drawTops() {
         // clear topLayer
         this.topCtx.clearRect(0, 0, this.topLayer.width, this.topLayer.height);
+        const collisionIndex = tempCollisionIndex;
+        collisionIndex.clear();
         this.map.fire('drawtopstart');
         this.map.fire('drawtops');
         const tops = this.getTopElements();
         let updated = false;
+        const dpr = this.map.getDevicePixelRatio();
         for (let i = 0; i < tops.length; i++) {
-            if (tops[i].render(this.topCtx)) {
+            const top = tops[i];
+            if (top.needCollision && top.needCollision()) {
+                const bbox = top.getRenderBBOX(dpr);
+                if (bbox) {
+                    if (collisionIndex.collides(bbox)) {
+                        continue;
+                    } else {
+                        collisionIndex.insertBox(bbox);
+                    }
+                }
+            }
+            if (top.render(this.topCtx)) {
                 updated = true;
             }
         }