refactor: l7 draw polygon edit

docs/api/layer/layer.en.md

@@ -238,7 +238,7 @@ layer.color('white'); // 指定颜色
 
 - `colors`: string | array | function
 
-colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
+colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定.
 
 ```javascript
 layer.color('name'); // 使用默认的颜色

docs/api/layer/layer.zh.md

@@ -238,7 +238,7 @@ layer.color('white'); // 指定颜色
 
 - `colors`: string | array | function
 
-colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
+colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。
 
 ```javascript
 layer.color('name'); // 使用默认的颜色

packages/core/src/services/interaction/PickingService.ts

@@ -98,6 +98,7 @@ export default class PickingService implements IPickingService {
           layer.hooks.afterPickingEncode.call();
           const isPicked = this.pickFromPickingFBO(layer, target);
           return isPicked && !layer.getLayerConfig().enablePropagation;
+          // return false;
         });
     });
   }

packages/draw/package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "@turf/midpoint": "^5.1.5",
     "@antv/l7": "^2.1.8",
+    "@antv/l7-component": "^2.1.8",
     "@babel/runtime": "^7.7.7",
     "@turf/circle": "^6.0.1",
     "@turf/distance": "^6.0.1",

packages/draw/src/control.ts

@@ -0,0 +1,10 @@
+import BaseControl from '@antv/l7-component';
+export interface IDrawControlOption {
+  pickBuffer: number;
+  controls: any;
+}
+export default class DrawControl extends BaseControl {
+  constructor(options) {
+    super(options);
+  }
+}

packages/draw/src/modes/draw_circle.ts

@@ -1,14 +1,4 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
+import { IInteractionTarget, ILngLat, PointLayer, Scene } from '@antv/l7';
 import { Feature, FeatureCollection, featureCollection } from '@turf/helpers';
 import { DrawEvent, DrawModes, unitsType } from '../util/constant';
 import { createCircle, createPoint } from '../util/create_geometry';
@@ -24,7 +14,7 @@ export default class DrawCircle extends DrawFeature {
   protected pointFeatures: Feature[];
   constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
     super(scene, options);
-    // this.selectLayer = new selectRender(this);
+    this.type = 'circle';
   }
 
   public drawFinish() {
@@ -34,7 +24,6 @@ export default class DrawCircle extends DrawFeature {
     this.startPoint = e.lngLat;
     this.setCursor('grabbing');
     this.initCenterLayer();
-    // this.initDrawFillLayer();
     this.centerLayer.setData([this.startPoint]);
   };
   protected onDragging = (e: IInteractionTarget) => {

packages/draw/src/modes/draw_edit.ts

@@ -1,8 +1,5 @@
-import { IInteractionTarget, ILayer, ILngLat, Popup, Scene } from '@antv/l7';
-import turfCircle from '@turf/circle';
-import turfDistance from '@turf/distance';
-import { Feature, featureCollection, point } from '@turf/helpers';
-import EditRender from '../render/edit';
+import { IInteractionTarget, ILngLat, Scene } from '@antv/l7';
+import { Feature } from '@turf/helpers';
 import { DrawEvent } from '../util/constant';
 import DrawFeature, { IDrawOption } from './draw_mode';
 export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
@@ -18,7 +15,6 @@ export default class DrawEdit extends DrawFeature {
   private center: ILngLat;
   private endPoint: ILngLat;
   // 绘制完成之后显示
-  private editLayer: EditRender;
   constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
     super(scene, options);
   }

packages/draw/src/modes/draw_feature.ts

@@ -1,14 +1,4 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
+import { IInteractionTarget, ILayer, ILngLat, Popup, Scene } from '@antv/l7';
 import turfCircle from '@turf/circle';
 import turfDistance from '@turf/distance';
 import {
@@ -20,10 +10,7 @@ import {
 import DrawRender from '../render/draw';
 import RenderLayer from '../render/draw_result';
 import DrawVertexLayer from '../render/draw_vertex';
-import EditLayer from '../render/edit';
-import SelectLayer from '../render/selected';
 import { DrawEvent, DrawModes, unitsType } from '../util/constant';
-import { createPoint } from '../util/create_geometry';
 import DrawEdit from './draw_edit';
 import DrawMode, { IDrawOption } from './draw_mode';
 import DrawSelected from './draw_selected';
@@ -42,8 +29,6 @@ export default abstract class DrawFeature extends DrawMode {
   protected renderLayer: RenderLayer;
   protected drawRender: DrawRender;
   protected drawVertexLayer: DrawVertexLayer;
-  protected selectLayer: SelectLayer;
-  protected editLayer: EditLayer;
   protected centerLayer: ILayer;
 
   // 编辑过程中显示
@@ -68,6 +53,9 @@ export default abstract class DrawFeature extends DrawMode {
     this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
   }
   public abstract drawFinish(): void;
+  public addVertex(feature: Feature): void {
+    throw new Error('子类未实现该方法');
+  }
   protected getDefaultOptions() {
     return {
       steps: 64,
@@ -91,40 +79,6 @@ export default abstract class DrawFeature extends DrawMode {
 
   protected abstract showOtherLayer(): void;
 
-  protected ondrawLayerClick = () => {
-    if (this.currentFeature === null) {
-      return;
-    }
-    this.currentFeature = null;
-    this.renderLayer.updateData(this.source.data);
-    this.centerLayer.setData([]);
-    this.drawLayer.setData(InitFeature);
-    this.drawLineLayer.setData(InitFeature);
-    return;
-  };
-  protected initDrawFillLayer() {
-    const style = this.getStyle('active_fill');
-    const linestyle = this.getStyle('active_line');
-    this.drawLayer = new PolygonLayer()
-      .source(InitFeature)
-      .color(style.color)
-      .shape('fill')
-      .style(style.style);
-    this.drawLineLayer = new PolygonLayer()
-      .source(InitFeature)
-      .color(linestyle.color)
-      .size(linestyle.size)
-      .shape('line')
-      .style(linestyle.style);
-    this.scene.addLayer(this.drawLayer);
-    this.scene.addLayer(this.drawLineLayer);
-  }
-
-  protected updateDrawFillLayer(currentData: any) {
-    this.drawLayer.setData(currentData);
-    this.drawLineLayer.setData(currentData);
-  }
-
   private addDrawPopup(lnglat: ILngLat, dis: number) {
     const popup = new Popup({
       anchor: 'left',
@@ -139,16 +93,14 @@ export default abstract class DrawFeature extends DrawMode {
   private onModeChange = (mode: DrawModes[any]) => {
     switch (mode) {
       case DrawModes.DIRECT_SELECT:
+        this.editMode.enable();
         this.editMode.setEditFeature(this.currentFeature as Feature);
+        this.drawVertexLayer.show();
         this.drawVertexLayer.enableEdit();
-        // this.editMode.enable();
-        // this.editLayer.updateData(
-        //   featureCollection([this.currentFeature as Feature]),
-        // );
-        // this.editLayer.show();
         break;
       case DrawModes.SIMPLE_SELECT:
         this.selectMode.setSelectedFeature(this.currentFeature as Feature);
+        this.selectMode.enable();
         this.drawRender.enableDrag();
         this.drawVertexLayer.disableEdit();
         this.drawVertexLayer.show();
@@ -179,15 +131,10 @@ export default abstract class DrawFeature extends DrawMode {
   };
 
   private onDrawMove = (delta: ILngLat) => {
-    // const feature =
     this.moveFeature(delta);
-    // this.currentFeature = feature;
-    // this.selectLayer.updateData(featureCollection([feature]));
-    // this.drawRender.updateData(featureCollection([feature]));
   };
 
   private onDrawEdit = (endpoint: ILngLat) => {
-    const feature = this.editFeature(endpoint);
-    this.currentFeature = feature.features[0];
+    this.editFeature(endpoint);
   };
 }

packages/draw/src/modes/draw_line.ts

@@ -1,31 +1,19 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
-import {
-  Feature,
-  FeatureCollection,
-  featureCollection,
-  Geometries,
-  point,
-} from '@turf/helpers';
+import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7';
+import { Feature, FeatureCollection, featureCollection } from '@turf/helpers';
 import { DrawEvent, DrawModes, unitsType } from '../util/constant';
-import { createLine, createPoint } from '../util/create_geometry';
-import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
-import DrawFeature, { IDrawFeatureOption } from './draw_feature';
+import { createLine } from '../util/create_geometry';
+import moveFeatures from '../util/move_featrues';
+import { IDrawFeatureOption } from './draw_feature';
 import DrawPolygon from './draw_polygon';
 export interface IDrawRectOption extends IDrawFeatureOption {
   units: unitsType;
   steps: number;
 }
 export default class DrawLine extends DrawPolygon {
+  constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
+    super(scene, options);
+    this.type = 'line';
+  }
   protected moveFeature(delta: ILngLat): Feature {
     const newFeature = moveFeatures([this.currentFeature as Feature], delta);
     const newPointFeture = moveFeatures(this.pointFeatures, delta);
@@ -46,9 +34,4 @@ export default class DrawLine extends DrawPolygon {
       features: [feature],
     };
   }
-
-  protected editFeature(endPoint: ILngLat): FeatureCollection {
-    this.endPoint = endPoint;
-    return this.createFeature(this.points);
-  }
 }

packages/draw/src/modes/draw_mode.ts

@@ -1,7 +1,7 @@
 import { IInteractionTarget, IPopup, Scene } from '@antv/l7';
 import { Feature, FeatureCollection } from '@turf/helpers';
 import { EventEmitter } from 'eventemitter3';
-import { merge, throttle } from 'lodash';
+import { merge } from 'lodash';
 import DrawSource from '../source';
 import LayerStyles from '../util/layerstyle';
 
@@ -22,6 +22,8 @@ let DrawFeatureId = 0;
 export default abstract class DrawMode extends EventEmitter {
   public source: DrawSource;
   public scene: Scene;
+  public type: string;
+
   protected options: {
     [key: string]: any;
   } = {
@@ -29,6 +31,7 @@ export default abstract class DrawMode extends EventEmitter {
   };
   protected drawStatus: DrawStatus = 'Drawing';
   protected currentFeature: Feature | null;
+  protected currentVertex: Feature | null;
   protected isEnable: boolean = false;
   protected popup: IPopup;
   constructor(scene: Scene, options: Partial<IDrawOption> = {}) {
@@ -70,6 +73,14 @@ export default abstract class DrawMode extends EventEmitter {
     this.source.setFeatureActive(feature);
   }
 
+  public setCurrentVertex(feature: Feature) {
+    this.currentVertex = feature;
+  }
+
+  public getCurrentVertex(feature: Feature) {
+    return this.currentVertex;
+  }
+
   public getOption(key: string) {
     return this.options[key];
   }

packages/draw/src/modes/draw_point.ts

@@ -1,25 +1,12 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
+import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7';
 import {
   Feature,
   FeatureCollection,
   featureCollection,
   point,
 } from '@turf/helpers';
-import selectRender from '../render/selected';
 import { DrawEvent, DrawModes, unitsType } from '../util/constant';
-import { createPoint, createPolygon } from '../util/create_geometry';
-import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
-import { renderFeature } from '../util/renderFeature';
+import moveFeatures from '../util/move_featrues';
 import DrawFeature, { IDrawFeatureOption } from './draw_feature';
 export interface IDrawRectOption extends IDrawFeatureOption {
   units: unitsType;
@@ -30,6 +17,7 @@ export default class DrawPoint extends DrawFeature {
 
   constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
     super(scene, options);
+    this.type = 'point';
   }
 
   public drawFinish() {
@@ -87,14 +75,4 @@ export default class DrawPoint extends DrawFeature {
   protected hideOtherLayer() {
     return null;
   }
-
-  private addDrawLayer(drawLayers: ILayer[], fc: FeatureCollection) {
-    if (drawLayers.length !== 0) {
-      drawLayers.map((layer) => this.scene.removeLayer(layer));
-    }
-    const style = this.getStyle('active');
-    drawLayers = renderFeature(fc, style);
-    drawLayers.map((layer) => this.scene.addLayer(layer));
-    return drawLayers;
-  }
 }

packages/draw/src/modes/draw_polygon.ts

@@ -1,28 +1,17 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
+import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7';
 import {
   Feature,
   FeatureCollection,
   featureCollection,
   Geometries,
   point,
+  Position,
+  Properties,
 } from '@turf/helpers';
-import drawRender from '../render/draw';
 import DrawMidVertex from '../render/draw_mid_vertex';
-import selectRender from '../render/selected';
 import { DrawEvent, DrawModes, unitsType } from '../util/constant';
 import { createPoint, createPolygon } from '../util/create_geometry';
-import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
-import { renderFeature } from '../util/renderFeature';
+import moveFeatures from '../util/move_featrues';
 import DrawFeature, { IDrawFeatureOption } from './draw_feature';
 export interface IDrawRectOption extends IDrawFeatureOption {
   units: unitsType;
@@ -37,9 +26,9 @@ export default class DrawPolygon extends DrawFeature {
 
   constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
     super(scene, options);
+    this.type = 'polygon';
     this.drawMidVertexLayer = new DrawMidVertex(this);
     this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
-    // this.editMode.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
   }
   public enable() {
     super.enable();
@@ -64,6 +53,40 @@ export default class DrawPolygon extends DrawFeature {
     this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
     this.disable();
   }
+
+  public addVertex(vertex: Feature<Geometries, Properties>) {
+    // @ts-ignore
+    const id = vertex.properties.id;
+    const coord = vertex.geometry.coordinates as Position;
+    const feature = this.currentFeature as Feature<Geometries, Properties>;
+    const type = feature.geometry.type;
+    const points = [];
+    if (type === 'Polygon') {
+      const coords = feature.geometry.coordinates as Position[][];
+      coords[0].splice(id + 1, 0, coord);
+      for (let i = 0; i < coords[0].length - 1; i++) {
+        points.push({
+          lng: coords[0][i][0],
+          lat: coords[0][i][1],
+        });
+      }
+    } else {
+      const coords = feature.geometry.coordinates as Position[];
+      coords.splice(id + 1, 0, coord);
+      for (const coor of coords) {
+        points.push({
+          lng: coor[0],
+          lat: coor[1],
+        });
+      }
+    }
+    const pointfeatures = createPoint(points);
+    this.pointFeatures = pointfeatures.features;
+    this.drawRender.updateData(featureCollection([feature]));
+    this.drawVertexLayer.updateData(pointfeatures);
+    this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
+    this.setCurrentFeature(feature);
+  }
   protected onDragStart = (e: IInteractionTarget) => {
     return null;
   };
@@ -129,9 +152,28 @@ export default class DrawPolygon extends DrawFeature {
     };
   }
 
-  protected editFeature(endPoint: ILngLat): FeatureCollection {
-    this.endPoint = endPoint;
-    return this.createFeature(this.points);
+  protected editFeature(vertex: ILngLat): FeatureCollection {
+    const selectVertexed = this.currentVertex as Feature<
+      Geometries,
+      Properties
+    >;
+    if (selectVertexed === null) {
+      return featureCollection([]);
+    } else {
+      // @ts-ignore
+      const id = selectVertexed.properties.id;
+      selectVertexed.geometry.coordinates = [vertex.lng, vertex.lat];
+      // @ts-ignore
+      this.pointFeatures[id].geometry.coordinates = [vertex.lng, vertex.lat];
+      this.drawVertexLayer.updateData(featureCollection(this.pointFeatures));
+      this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
+      this.editPolygonVertex(id, vertex);
+      this.drawRender.updateData(
+        featureCollection([this.currentFeature as Feature]),
+      );
+    }
+
+    return featureCollection([]);
   }
 
   protected onDraw = () => {
@@ -159,12 +201,32 @@ export default class DrawPolygon extends DrawFeature {
     switch (mode) {
       case DrawModes.DIRECT_SELECT:
         this.drawMidVertexLayer.update(featureCollection(this.pointFeatures));
+        this.drawMidVertexLayer.show();
         break;
       case DrawModes.STATIC:
         this.drawMidVertexLayer.hide();
         break;
     }
   }
+
+  private editPolygonVertex(id: number, vertex: ILngLat) {
+    const feature = this.currentFeature as Feature<Geometries, Properties>;
+    const type = feature.geometry.type;
+    if (type === 'Polygon') {
+      const coords = feature.geometry.coordinates as Position[][];
+      coords[0][id] = [vertex.lng, vertex.lat];
+      if (-id === 0) {
+        coords[0][coords[0].length - 1] = [vertex.lng, vertex.lat];
+      }
+    } else {
+      const coords = feature.geometry.coordinates as Position[];
+      coords[id] = [vertex.lng, vertex.lat];
+    }
+    this.setCurrentFeature(feature);
+    this.drawRender.updateData(
+      featureCollection([this.currentFeature as Feature]),
+    );
+  }
 }
 /**
  * draw 端点响应事件

packages/draw/src/modes/draw_rect.ts

@@ -1,25 +1,14 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
+import { Scene } from '@antv/l7';
 import {
   Feature,
   FeatureCollection,
   featureCollection,
   point,
 } from '@turf/helpers';
-import { DrawEvent, DrawModes, unitsType } from '../util/constant';
-import { createPoint, createRect } from '../util/create_geometry';
-import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
+import { unitsType } from '../util/constant';
+import { createRect } from '../util/create_geometry';
 import DrawCircle from './draw_circle';
-import DrawFeature, { IDrawFeatureOption } from './draw_feature';
+import { IDrawFeatureOption } from './draw_feature';
 export interface IDrawRectOption extends IDrawFeatureOption {
   units: unitsType;
   steps: number;
@@ -27,6 +16,7 @@ export interface IDrawRectOption extends IDrawFeatureOption {
 export default class DrawRect extends DrawCircle {
   constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
     super(scene, options);
+    this.type = 'rect';
   }
   public drawFinish() {
     return null;

packages/draw/src/modes/draw_selected.ts

@@ -9,10 +9,7 @@ import {
   Popup,
   Scene,
 } from '@antv/l7';
-import turfCircle from '@turf/circle';
-import turfDistance from '@turf/distance';
 import { Feature, featureCollection, point } from '@turf/helpers';
-import EditRender from '../render/selected';
 import { DrawEvent, DrawModes } from '../util/constant';
 import moveFeatures from '../util/move_featrues';
 import DrawFeature, { IDrawOption } from './draw_mode';
@@ -29,7 +26,6 @@ export default class DrawSelect extends DrawFeature {
   private center: ILngLat;
   private dragStartPoint: ILngLat;
   // 绘制完成之后显示
-  private editLayer: EditRender;
   constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
     super(scene, options);
     // this.editLayer = new EditRender(this);
@@ -37,11 +33,6 @@ export default class DrawSelect extends DrawFeature {
 
   public setSelectedFeature(feature: Feature) {
     this.currentFeature = feature;
-    // this.editLayer.updateData({
-    //   type: 'FeatureCollection',
-    //   features: [feature],
-    // });
-    // this.editLayer.show();
   }
 
   protected onDragStart = (e: IInteractionTarget) => {

packages/draw/src/render/base_render.ts

@@ -7,10 +7,12 @@ type CallBack = (...args: any[]) => any;
 import { FeatureCollection } from '@turf/helpers';
 import Draw from '../modes/draw_feature';
 import { DrawEvent, DrawModes } from '../util/constant';
-import { renderFeature } from '../util/renderFeature';
+import { renderFeature } from './renderFeature';
 export default class BaseRenderLayer {
   public drawLayers: ILayer[] = [];
   protected draw: Draw;
+  protected isEnableDrag: boolean;
+  protected isEnableEdit: boolean;
   constructor(draw: Draw) {
     this.draw = draw;
   }

packages/draw/src/render/draw.ts

@@ -6,8 +6,8 @@ const InitFeature = {
 import { FeatureCollection } from '@turf/helpers';
 import Draw from '../modes/draw_feature';
 import { DrawEvent, DrawModes } from '../util/constant';
-import { renderFeature } from '../util/renderFeature';
 import BaseRender from './base_render';
+import { renderFeature } from './renderFeature';
 export default class DrawLayer extends BaseRender {
   public update(feature: FeatureCollection) {
     this.removeLayers();
@@ -17,28 +17,44 @@ export default class DrawLayer extends BaseRender {
   }
   public enableDrag() {
     this.show();
+    if (this.isEnableDrag) {
+      return;
+    }
     const layer = this.drawLayers[0];
     layer.on('mouseenter', this.onMouseMove);
     layer.on('mouseout', this.onUnMouseMove);
     layer.on('click', this.onClick);
     layer.on('unclick', this.onUnClick);
+    this.isEnableDrag = true;
   }
   public disableDrag() {
+    if (!this.isEnableDrag) {
+      return;
+    }
     const layer = this.drawLayers[0];
     layer.off('mouseenter', this.onMouseMove);
     layer.off('mouseout', this.onUnMouseMove);
     layer.off('click', this.onClick);
     layer.off('unclick', this.onUnClick);
+    this.isEnableDrag = false;
   }
 
   public enableEdit() {
+    if (this.isEnableEdit) {
+      return;
+    }
     const layer = this.drawLayers[0];
     layer.on('unclick', this.onUnClick);
+    this.isEnableDrag = true;
   }
 
   public disableEdit() {
+    if (!this.isEnableEdit) {
+      return;
+    }
     const layer = this.drawLayers[0];
     layer.off('unclick', this.onUnClick);
+    this.isEnableDrag = false;
   }
 
   private onMouseMove = (e: any) => {
@@ -51,15 +67,19 @@ export default class DrawLayer extends BaseRender {
   };
   private onClick = (e: any) => {
     this.draw.selectMode.disable();
-    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.DIRECT_SELECT);
+    this.draw.editMode.enable();
     this.disableDrag();
     this.draw.resetCursor();
     this.enableEdit();
+    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.DIRECT_SELECT);
   };
+
   private onUnClick = (e: any) => {
-    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
     this.draw.selectMode.disable();
+    this.draw.editMode.disable();
     this.disableDrag();
+    this.disableEdit();
     this.hide();
+    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
   };
 }

packages/draw/src/render/draw_mid_vertex.ts

@@ -7,8 +7,8 @@ import {
   Properties,
 } from '@turf/helpers';
 import midPoint from '@turf/midpoint';
-import { renderFeature } from '../util/renderFeature';
 import BaseRender from './base_render';
+import { renderFeature } from './renderFeature';
 export default class DrawVertexLayer extends BaseRender {
   public update(pointFeatures: FeatureCollection) {
     this.removeLayers();
@@ -45,6 +45,7 @@ export default class DrawVertexLayer extends BaseRender {
     // this.draw.editMode.disable();
   };
   private onClick = (e: any) => {
+    this.draw.addVertex(e.feature);
     // 添加一个顶点 1.更新顶点 2.更新重点
   };
 
@@ -52,12 +53,21 @@ export default class DrawVertexLayer extends BaseRender {
     const midFeatures: Feature[] = [];
     fe.features.forEach((item, index) => {
       const preFeature = (item as unknown) as Feature<Point, Properties>;
+      if (this.draw.type === 'line' && index === fe.features.length - 1) {
+        return;
+      }
       const nextFeature =
         index !== fe.features.length - 1
           ? ((fe.features[index + 1] as unknown) as Feature<Point, Properties>)
           : ((fe.features[0] as unknown) as Feature<Point, Properties>);
       // @ts-ignore
-      midFeatures.push(midPoint(preFeature, nextFeature));
+      const point = midPoint(preFeature, nextFeature) as Feature<
+        Point,
+        Properties
+      >;
+      // @ts-ignore
+      point.properties.id = index;
+      midFeatures.push(point);
     });
     return featureCollection(midFeatures);
   }

packages/draw/src/render/draw_result.ts

@@ -1,7 +1,7 @@
 import { FeatureCollection } from '@turf/helpers';
 import { DrawEvent, DrawModes } from '../util/constant';
-import { renderFeature } from '../util/renderFeature';
 import BaseRender from './base_render';
+import { renderFeature } from './renderFeature';
 export default class DrawResultLayer extends BaseRender {
   public update(feature: FeatureCollection) {
     this.removeLayers();

packages/draw/src/render/draw_vertex.ts

@@ -1,7 +1,6 @@
 import { FeatureCollection } from '@turf/helpers';
-import { DrawEvent, DrawModes } from '../util/constant';
-import { renderFeature } from '../util/renderFeature';
 import BaseRender from './base_render';
+import { renderFeature } from './renderFeature';
 export default class DrawVertexLayer extends BaseRender {
   public update(feature: FeatureCollection) {
     this.removeLayers();
@@ -10,32 +9,37 @@ export default class DrawVertexLayer extends BaseRender {
     this.addLayers();
   }
   public enableDrag() {
-    // const layer = this.drawLayers[0];
-    // layer.on('mousemove', this.onMouseEnter);
-    // layer.on('mouseout', this.onMouseOut);
-    // layer.on('click', this.onClick);
+    return;
   }
   public disableDrag() {
-    // const layer = this.drawLayers[0];
-    // layer.off('mousemove', this.onMouseEnter);
-    // layer.off('mouseout', this.onMouseOut);
-    // layer.off('click', this.onClick);
+    return;
   }
 
   public enableEdit() {
+    if (this.isEnableEdit) {
+      return;
+    }
     const layer = this.drawLayers[0];
     layer.on('mouseenter', this.onMouseEnter);
     layer.on('mouseout', this.onMouseOut);
+    layer.on('click', this.onClick);
+    this.isEnableEdit = true;
   }
 
   public disableEdit() {
+    if (!this.isEnableEdit) {
+      return;
+    }
     const layer = this.drawLayers[0];
     layer.off('mouseenter', this.onMouseEnter);
     layer.off('mouseout', this.onMouseOut);
+    layer.off('click', this.onClick);
+    this.isEnableEdit = false;
   }
 
   private onMouseEnter = (e: any) => {
     this.draw.setCursor('move');
+    this.draw.setCurrentVertex(e.feature);
     this.draw.editMode.enable();
   };
   private onMouseOut = (e: any) => {
@@ -43,9 +47,7 @@ export default class DrawVertexLayer extends BaseRender {
     this.draw.editMode.disable();
   };
   private onClick = (e: any) => {
-    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.DIRECT_SELECT);
-    this.draw.selectMode.disable();
-    // this.disableDrag();
-    // this.draw.editMode.enable();
+    this.draw.setCurrentVertex(e.feature);
+    this.draw.editMode.enable();
   };
 }

packages/draw/src/render/edit.ts

@@ -1,145 +0,0 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
-const InitFeature = {
-  type: 'FeatureCollection',
-  features: [],
-};
-import { Feature } from '@turf/helpers';
-import Draw from '../modes/draw_feature';
-import { DrawEvent, DrawModes } from '../util/constant';
-export default class EditRenderLayer {
-  private polygonLayer: ILayer;
-  private lineLayer: ILayer;
-  private centerLayer: ILayer;
-  private endPointLayer: ILayer;
-  private draw: Draw;
-  private currentFeature: Feature;
-  constructor(draw: Draw) {
-    this.draw = draw;
-    this.init();
-  }
-  public init() {
-    const style = this.draw.getStyle('active_fill');
-    const linestyle = this.draw.getStyle('active_line');
-    const centerStyle = this.draw.getStyle('active_point');
-    this.polygonLayer = new PolygonLayer()
-      .source(InitFeature)
-      .shape('fill')
-      .color(style.color)
-      .style(style.style);
-
-    this.lineLayer = new LineLayer()
-      .source(InitFeature)
-      .shape('line')
-      .size(linestyle.size)
-      .color(linestyle.color)
-      .style(linestyle.style);
-    this.centerLayer = new PointLayer({
-      zIndex: 3,
-      blend: 'normal',
-    })
-      .source([], {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .shape('circle')
-      .color(centerStyle.color)
-      .size(centerStyle.size)
-      .style(centerStyle.style);
-    this.endPointLayer = new PointLayer({
-      zIndex: 4,
-      blend: 'normal',
-    })
-      .source([], {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .shape('circle')
-      .color(centerStyle.color)
-      .size(centerStyle.size)
-      .style(centerStyle.style);
-
-    this.draw.scene.addLayer(this.polygonLayer);
-    this.draw.scene.addLayer(this.lineLayer);
-    this.draw.scene.addLayer(this.centerLayer);
-    this.draw.scene.addLayer(this.endPointLayer);
-  }
-  public updateData(data: any) {
-    if (this.currentFeature === undefined) {
-      this.addLayerEvent();
-    }
-    this.currentFeature = data.features[0];
-    this.lineLayer.setData(data);
-    this.polygonLayer.setData(data);
-    const properties = data.features[0].properties;
-    if (properties.startPoint) {
-      this.centerLayer.setData([
-        {
-          lng: properties.startPoint[0],
-          lat: properties.startPoint[1],
-        },
-      ]);
-    }
-    if (properties.endPoint) {
-      this.endPointLayer.setData([
-        {
-          lng: properties.endPoint[0],
-          lat: properties.endPoint[1],
-        },
-      ]);
-    }
-  }
-
-  public destroy() {
-    this.draw.scene.removeLayer(this.lineLayer);
-    this.draw.scene.removeLayer(this.polygonLayer);
-    this.draw.scene.removeLayer(this.centerLayer);
-    this.draw.scene.removeLayer(this.endPointLayer);
-  }
-
-  public show() {
-    this.lineLayer.show();
-    this.polygonLayer.show();
-    this.centerLayer.show();
-    this.endPointLayer.show();
-  }
-
-  public hide() {
-    this.lineLayer.hide();
-    this.polygonLayer.hide();
-    this.centerLayer.hide();
-    this.endPointLayer.hide();
-  }
-
-  private addLayerEvent() {
-    this.endPointLayer.on('mousemove', (e) => {
-      this.draw.setCursor('move');
-      this.draw.editMode.enable();
-    });
-    this.endPointLayer.on('unmousemove', (e) => {
-      this.draw.resetCursor();
-      this.draw.editMode.disable();
-    });
-    this.polygonLayer.on('unclick', (e) => {
-      // 取消选中 回到初始态
-      this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
-      this.draw.editMode.disable();
-      this.hide();
-    });
-  }
-}

packages/draw/src/render/renderFeature.ts

@@ -28,7 +28,9 @@ function drawPoint(fe: FeatureCollection, style: any) {
 }
 
 function drawLine(fe: FeatureCollection, style: any) {
-  const layer = new LineLayer()
+  const layer = new LineLayer({
+    pickingBuffer: 3,
+  })
     .source(fe)
     .shape('line')
     .color(style.color)

packages/draw/src/render/selected.ts

@@ -1,149 +0,0 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
-const InitFeature = {
-  type: 'FeatureCollection',
-  features: [],
-};
-import { Feature } from '@turf/helpers';
-import Draw from '../modes/draw_feature';
-import { DrawEvent, DrawModes } from '../util/constant';
-export default class EditRenderLayer {
-  private polygonLayer: ILayer;
-  private lineLayer: ILayer;
-  private centerLayer: ILayer;
-  private endPointLayer: ILayer;
-  private draw: Draw;
-  private currentFeature: Feature;
-  constructor(draw: Draw) {
-    this.draw = draw;
-    this.init();
-  }
-  public init() {
-    const style = this.draw.getStyle('active_fill');
-    const linestyle = this.draw.getStyle('active_line');
-    const centerStyle = this.draw.getStyle('active_point');
-    this.polygonLayer = new PolygonLayer()
-      .source(InitFeature)
-      .shape('fill')
-      .color(style.color)
-      .style(style.style);
-
-    this.lineLayer = new LineLayer()
-      .source(InitFeature)
-      .shape('line')
-      .size(linestyle.size)
-      .color(linestyle.color)
-      .style(linestyle.style);
-    this.centerLayer = new PointLayer({
-      zIndex: 3,
-      blend: 'normal',
-    })
-      .source([], {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .shape('circle')
-      .color(centerStyle.color)
-      .size(centerStyle.size)
-      .style(centerStyle.style);
-
-    this.endPointLayer = new PointLayer({
-      zIndex: 4,
-      blend: 'normal',
-    })
-      .source([], {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .shape('circle')
-      .color(centerStyle.color)
-      .size(centerStyle.size)
-      .style(centerStyle.style);
-
-    this.draw.scene.addLayer(this.polygonLayer);
-    this.draw.scene.addLayer(this.lineLayer);
-    this.draw.scene.addLayer(this.centerLayer);
-  }
-
-  public updateData(data: any) {
-    if (this.currentFeature === undefined) {
-      this.addLayerEvent();
-    }
-    this.currentFeature = data.features[0];
-    this.lineLayer.setData(data);
-    this.polygonLayer.setData(data);
-    const properties = data.features[0].properties;
-    if (properties.startPoint) {
-      this.centerLayer.setData([
-        {
-          lng: properties.startPoint[0],
-          lat: properties.startPoint[1],
-        },
-      ]);
-    }
-    if (properties.endPoint) {
-      this.endPointLayer.setData([
-        {
-          lng: properties.endPoint[0],
-          lat: properties.endPoint[1],
-        },
-      ]);
-    }
-  }
-
-  public destroy() {
-    this.draw.scene.removeLayer(this.lineLayer);
-    this.draw.scene.removeLayer(this.polygonLayer);
-    // this.draw.scene.removeLayer(this.centerLayer);
-  }
-
-  public show() {
-    this.lineLayer.show();
-    this.polygonLayer.show();
-    // this.centerLayer.show();
-  }
-
-  public hide() {
-    this.lineLayer.hide();
-    this.polygonLayer.hide();
-    // this.centerLayer.hide();
-  }
-  private addLayerEvent() {
-    this.polygonLayer.on('mousemove', (e) => {
-      this.draw.setCursor('move');
-      this.draw.selectMode.enable();
-    });
-    this.polygonLayer.on('unmousemove', (e) => {
-      this.draw.resetCursor();
-      this.draw.selectMode.disable();
-    });
-
-    this.polygonLayer.on('click', (e) => {
-      // 进入编辑态
-      this.draw.selectMode.disable();
-      this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.DIRECT_SELECT);
-      this.hide();
-    });
-    this.polygonLayer.on('unclick', (e) => {
-      // 取消选中 回到初始态
-      this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
-      this.draw.selectMode.disable();
-      this.hide();
-    });
-  }
-}

packages/layers/src/core/BaseLayer.ts

@@ -853,15 +853,18 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     if ((type === 'click' || type === 'dblclick') && enableSelect) {
       isPick = true;
     }
+    if (type === 'click' && this.eventNames().indexOf('unclick') !== -1) {
+      isPick = true;
+    }
     if (
       type === 'mousemove' &&
       (enableHighlight ||
         this.eventNames().indexOf('mouseenter') !== -1 ||
+        this.eventNames().indexOf('unmousemove') !== -1 ||
         this.eventNames().indexOf('mouseout') !== -1)
     ) {
       isPick = true;
     }
-
     return this.isVisible() && isPick;
   }
 

stories/Components/components/Marker.tsx

@@ -25,7 +25,6 @@ export default class MarkerComponent extends React.Component {
       }),
     });
 
-
     const popup = new Popup({
       offsets: [0, 20],
     }).setText('hello');
@@ -72,7 +71,6 @@ export default class MarkerComponent extends React.Component {
     scene.addLayer(pointLayer);
     scene.addMarker(marker);
 
-
     scene.on('loaded', () => {
       // @ts-ignore
       marker.on('click', (e) => {