feat: add draw point line polygon

packages/core/src/services/map/IMapService.ts

@@ -46,8 +46,8 @@ export interface IMapService<RawMap = {}> {
 
   // control with raw map
   setRotation(rotation: number): void;
-  zoomIn(): void;
-  zoomOut(): void;
+  zoomIn(option?: any, eventData?: any): void;
+  zoomOut(option?: any, eventData?: any): void;
   panTo(p: Point): void;
   panBy(pixel: Point): void;
   fitBounds(bound: Bounds): void;

packages/draw/src/modes/draw_circle.ts

@@ -27,6 +27,10 @@ export default class DrawCircle extends DrawFeature {
     super(scene, options);
     this.selectLayer = new selectRender(this);
   }
+
+  public drawFinish() {
+    return null;
+  }
   protected onDragStart = (e: IInteractionTarget) => {
     this.startPoint = e.lngLat;
     this.setCursor('grabbing');

packages/draw/src/modes/draw_feature.ts

@@ -17,6 +17,8 @@ import {
   featureCollection,
   point,
 } from '@turf/helpers';
+import DrawRender from '../render/draw';
+import DrawVertexLayer from '../render/draw_vertex';
 import EditLayer from '../render/edit';
 import RenderLayer from '../render/render';
 import SelectLayer from '../render/selected';
@@ -39,6 +41,8 @@ export default abstract class DrawFeature extends DrawMode {
   public selectMode: DrawSelected;
   public editMode: DrawEdit;
   protected renderLayer: RenderLayer;
+  protected drawRender: DrawRender;
+  protected drawVertexLayer: DrawVertexLayer;
   protected selectLayer: SelectLayer;
   protected editLayer: EditLayer;
   protected centerLayer: ILayer;
@@ -48,6 +52,8 @@ export default abstract class DrawFeature extends DrawMode {
   protected drawLineLayer: ILayer;
   constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
     super(scene, options);
+    this.drawRender = new DrawRender(this);
+    this.drawVertexLayer = new DrawVertexLayer(this);
     this.renderLayer = new RenderLayer(this);
     this.selectLayer = new SelectLayer(this);
     this.editLayer = new EditLayer(this);
@@ -62,6 +68,7 @@ export default abstract class DrawFeature extends DrawMode {
     this.on(DrawEvent.CREATE, this.onDrawCreate);
     this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
   }
+  public abstract drawFinish(): void;
   protected getDefaultOptions() {
     return {
       steps: 64,
@@ -75,7 +82,7 @@ export default abstract class DrawFeature extends DrawMode {
 
   protected abstract onDragEnd(e: IInteractionTarget): void;
 
-  protected abstract createFeature(e: ILngLat): FeatureCollection;
+  protected abstract createFeature(e?: any): FeatureCollection;
 
   protected abstract moveFeature(e: ILngLat): Feature;
 
@@ -166,13 +173,17 @@ export default abstract class DrawFeature extends DrawMode {
       case DrawModes.SIMPLE_SELECT:
         this.renderLayer.updateData();
         this.selectMode.setSelectedFeature(this.currentFeature as Feature);
-        this.selectLayer.updateData(
-          featureCollection([this.currentFeature as Feature]),
-        );
-        this.selectLayer.show();
+        this.drawRender.enableDrag();
+        this.drawVertexLayer.enableDrag();
+        this.drawVertexLayer.show();
         break;
+      // this.selectLayer.updateData(
+      //   featureCollection([this.currentFeature as Feature]),
+      // );
+      // this.selectLayer.show();
       case DrawModes.STATIC:
         this.source.setFeatureUnActive(this.currentFeature as Feature);
+        this.drawVertexLayer.hide();
         this.renderLayer.updateData();
         break;
     }
@@ -183,7 +194,7 @@ export default abstract class DrawFeature extends DrawMode {
     if (this.popup) {
       this.popup.remove();
     }
-    this.removeDrawLayer();
+    // this.removeDrawLayer();
   };
 
   private onDrawUpdate = (feature: Feature) => {
@@ -191,9 +202,11 @@ export default abstract class DrawFeature extends DrawMode {
   };
 
   private onDrawMove = (delta: ILngLat) => {
-    const feature = this.moveFeature(delta);
-    this.currentFeature = feature;
-    this.selectLayer.updateData(featureCollection([feature]));
+    // const feature =
+    this.moveFeature(delta);
+    // this.currentFeature = feature;
+    // this.selectLayer.updateData(featureCollection([feature]));
+    // this.drawRender.updateData(featureCollection([feature]));
   };
 
   private onDrawEdit = (endpoint: ILngLat) => {

packages/draw/src/modes/draw_line.ts

@@ -0,0 +1,160 @@
+import {
+  IInteractionTarget,
+  ILayer,
+  ILngLat,
+  IPopup,
+  LineLayer,
+  PointLayer,
+  PolygonLayer,
+  Popup,
+  Scene,
+} from '@antv/l7';
+import { Feature, FeatureCollection, Geometries, point } from '@turf/helpers';
+import selectRender from '../render/selected';
+import { DrawEvent, DrawModes, unitsType } from '../util/constant';
+import { createLine, createPoint } from '../util/create_geometry';
+import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
+import { renderFeature } from '../util/renderFeature';
+import DrawFeature, { IDrawFeatureOption } from './draw_feature';
+export interface IDrawRectOption extends IDrawFeatureOption {
+  units: unitsType;
+  steps: number;
+}
+export default class DrawLine extends DrawFeature {
+  private startPoint: ILngLat;
+  private endPoint: ILngLat;
+  private points: ILngLat[] = [];
+  private drawLayers: ILayer[] = [];
+  private drawPointLayers: ILayer[] = [];
+
+  constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
+    super(scene, options);
+    this.selectLayer = new selectRender(this);
+  }
+  public enable() {
+    super.enable();
+    this.scene.on('mousemove', this.onMouseMove);
+    this.scene.on('dblclick', this.onDblClick);
+    // 关闭双击放大
+  }
+
+  public disable() {
+    super.disable();
+    this.scene.off('mousemove', this.onMouseMove);
+    this.scene.off('dblclick', this.onDblClick);
+  }
+
+  public drawFinish() {
+    const feature = this.createFeature(this.points);
+    this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
+    const pointfeatures = createPoint(this.points);
+    this.drawPointLayers = this.addDrawLayer(
+      this.drawPointLayers,
+      pointfeatures,
+    );
+    this.emit(DrawEvent.CREATE, this.currentFeature);
+    this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
+    this.disable();
+  }
+
+  protected onDragStart = (e: IInteractionTarget) => {
+    return null;
+  };
+  protected onDragging = (e: IInteractionTarget) => {
+    return null;
+  };
+
+  protected onDragEnd = () => {
+    return null;
+  };
+
+  protected onClick = (e: any) => {
+    const lngLat = e.lngLat;
+    this.endPoint = lngLat;
+    this.points.push(lngLat);
+    const feature = this.createFeature(this.points);
+    const pointfeatures = createPoint([this.endPoint]);
+    this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
+    this.drawPointLayers = this.addDrawLayer(
+      this.drawPointLayers,
+      pointfeatures,
+    );
+    this.drawPointLayers[0].on('mousemove', () => {
+      this.setCursor('pointer');
+    });
+    this.drawPointLayers[0].on('unmousemove', () => {
+      this.setCursor('crosshair');
+    });
+    this.drawPointLayers[0].on('click', () => {
+      this.resetCursor();
+      this.drawFinish();
+    });
+  };
+
+  protected onMouseMove = (e: any) => {
+    const lngLat = e.lngLat;
+    if (this.points.length === 0) {
+      return;
+    }
+    const tmpPoints = this.points.slice();
+    tmpPoints.push(lngLat);
+    const feature = this.createFeature(tmpPoints);
+    this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
+  };
+
+  protected onDblClick = (e: any) => {
+    const lngLat = e.lngLat;
+    if (this.points.length < 1) {
+      // TODO: 清空图层
+      return;
+    }
+    this.points.push(lngLat);
+    this.drawFinish();
+  };
+
+  protected moveFeature(delta: ILngLat): Feature {
+    const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
+    const properties = newFeature.properties as {
+      startPoint: [number, number];
+      endPoint: [number, number];
+    };
+    const { startPoint, endPoint } = properties;
+    properties.startPoint = movePoint(startPoint, delta);
+    properties.endPoint = movePoint(endPoint, delta);
+    newFeature.properties = properties;
+    this.startPoint = {
+      lat: startPoint[1],
+      lng: startPoint[0],
+    };
+    this.endPoint = {
+      lat: endPoint[1],
+      lng: endPoint[0],
+    };
+    return newFeature;
+  }
+  protected createFeature(points: ILngLat[]): FeatureCollection {
+    const feature = createLine(points, {
+      id: this.getUniqId(),
+    });
+    this.setCurrentFeature(feature as Feature);
+    return {
+      type: 'FeatureCollection',
+      features: [feature],
+    };
+  }
+
+  protected editFeature(endPoint: ILngLat): FeatureCollection {
+    this.endPoint = endPoint;
+    return this.createFeature(this.points);
+  }
+
+  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_mode.ts

@@ -17,6 +17,8 @@ export type DrawStatus =
   | 'DrawFinish'
   | 'EditFinish';
 
+let DrawFeatureId = 0;
+
 export default abstract class DrawMode extends EventEmitter {
   public source: DrawSource;
   public scene: Scene;
@@ -45,6 +47,7 @@ export default abstract class DrawMode extends EventEmitter {
     this.scene.on('dragstart', this.onDragStart);
     this.scene.on('dragging', this.onDragging);
     this.scene.on('dragend', this.onDragEnd);
+    this.scene.on('click', this.onClick);
     this.setCursor(this.getOption('cursor'));
     this.isEnable = true;
   }
@@ -56,7 +59,7 @@ export default abstract class DrawMode extends EventEmitter {
     this.scene.off('dragstart', this.onDragStart);
     this.scene.off('dragging', this.onDragging);
     this.scene.off('dragend', this.onDragEnd);
-    // this.scene.off('click', this.onClick);
+    this.scene.off('click', this.onClick);
     this.resetCursor();
     // @ts-ignore
     this.scene.map.dragPan.enable();
@@ -70,10 +73,15 @@ export default abstract class DrawMode extends EventEmitter {
   public getOption(key: string) {
     return this.options[key];
   }
+
   public getStyle(id: string) {
     return this.getOption('style')[id];
   }
 
+  public getUniqId() {
+    return DrawFeatureId++;
+  }
+
   public setCursor(cursor: string) {
     const container = this.scene.getContainer();
     if (container) {
@@ -96,4 +104,8 @@ export default abstract class DrawMode extends EventEmitter {
   protected abstract onDragging(e: IInteractionTarget): void;
 
   protected abstract onDragEnd(e: IInteractionTarget): void;
+
+  protected onClick(e: IInteractionTarget): any {
+    return null;
+  }
 }

packages/draw/src/modes/draw_point.ts

@@ -0,0 +1,85 @@
+import {
+  IInteractionTarget,
+  ILayer,
+  ILngLat,
+  IPopup,
+  LineLayer,
+  PointLayer,
+  PolygonLayer,
+  Popup,
+  Scene,
+} from '@antv/l7';
+import { Feature, FeatureCollection, Geometries, 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 DrawFeature, { IDrawFeatureOption } from './draw_feature';
+export interface IDrawRectOption extends IDrawFeatureOption {
+  units: unitsType;
+  steps: number;
+}
+export default class DrawPoint extends DrawFeature {
+  private drawLayers: ILayer[] = [];
+  private drawPointLayers: ILayer[] = [];
+
+  constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
+    super(scene, options);
+    this.selectLayer = new selectRender(this);
+  }
+
+  public drawFinish() {
+    this.emit(DrawEvent.CREATE, this.currentFeature);
+    this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
+    this.disable();
+  }
+
+  protected onDragStart = (e: IInteractionTarget) => {
+    return null;
+  };
+  protected onDragging = (e: IInteractionTarget) => {
+    return null;
+  };
+
+  protected onDragEnd = () => {
+    return null;
+  };
+
+  protected onClick = (e: any) => {
+    const lngLat = e.lngLat;
+    const feature = this.createFeature(lngLat);
+    this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
+    this.disable();
+    // this.drawFinish();
+  };
+
+  protected moveFeature(delta: ILngLat): Feature {
+    const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
+    return newFeature;
+  }
+  protected createFeature(p: ILngLat): FeatureCollection {
+    const feature = point([p.lng, p.lat], {
+      id: this.getUniqId(),
+    });
+    this.setCurrentFeature(feature as Feature);
+    return {
+      type: 'FeatureCollection',
+      features: [feature],
+    };
+  }
+
+  protected editFeature(endPoint: ILngLat): FeatureCollection {
+    return this.createFeature(endPoint);
+  }
+
+  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

@@ -0,0 +1,180 @@
+import {
+  IInteractionTarget,
+  ILayer,
+  ILngLat,
+  IPopup,
+  LineLayer,
+  PointLayer,
+  PolygonLayer,
+  Popup,
+  Scene,
+} from '@antv/l7';
+import {
+  Feature,
+  FeatureCollection,
+  featureCollection,
+  Geometries,
+  point,
+} from '@turf/helpers';
+import drawRender from '../render/draw';
+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 DrawFeature, { IDrawFeatureOption } from './draw_feature';
+export interface IDrawRectOption extends IDrawFeatureOption {
+  units: unitsType;
+  steps: number;
+}
+export default class DrawPolygon extends DrawFeature {
+  private startPoint: ILngLat;
+  private endPoint: ILngLat;
+  private points: ILngLat[] = [];
+  private pointFeatures: Feature[];
+  private drawLayers: ILayer[] = [];
+  private drawPointLayers: ILayer[] = [];
+
+  constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
+    super(scene, options);
+  }
+  public enable() {
+    super.enable();
+    this.scene.on('mousemove', this.onMouseMove);
+    this.scene.on('dblclick', this.onDblClick);
+    // 关闭双击放大
+  }
+
+  public disable() {
+    super.disable();
+    this.scene.off('mousemove', this.onMouseMove);
+    this.scene.off('dblclick', this.onDblClick);
+  }
+
+  public drawFinish() {
+    const feature = this.createFeature(this.points);
+    // this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
+    this.drawRender.update(feature);
+    const pointfeatures = createPoint(this.points);
+    this.pointFeatures = pointfeatures.features;
+    this.drawVertexLayer.update(pointfeatures);
+    // this.drawPointLayers = this.addDrawLayer(
+    //   this.drawPointLayers,
+    //   pointfeatures,
+    // );
+    this.emit(DrawEvent.CREATE, this.currentFeature);
+    this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
+    this.disable();
+  }
+  protected onDragStart = (e: IInteractionTarget) => {
+    return null;
+  };
+  protected onDragging = (e: IInteractionTarget) => {
+    return null;
+  };
+
+  protected onDragEnd = () => {
+    return null;
+  };
+
+  protected onClick = (e: any) => {
+    const lngLat = e.lngLat;
+    this.endPoint = lngLat;
+    this.points.push(lngLat);
+    const feature = this.createFeature(this.points);
+    const pointfeatures = createPoint([this.points[0], this.endPoint]);
+    this.pointFeatures = pointfeatures.features;
+    // this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
+    this.drawRender.update(feature);
+    this.drawVertexLayer.update(pointfeatures);
+    this.onDraw();
+    // this.drawPointLayers = this.addDrawLayer(
+    //   this.drawPointLayers,
+    //   pointfeatures,
+    // );
+    // this.drawPointLayers[0].on('mousemove', () => {
+    //   this.setCursor('pointer');
+    // });
+    // this.drawPointLayers[0].on('unmousemove', () => {
+    //   this.setCursor('crosshair');
+    // });
+    // this.drawPointLayers[0].on('click', () => {
+    //   this.resetCursor();
+    //   this.drawFinish();
+    // });
+  };
+
+  protected onMouseMove = (e: any) => {
+    const lngLat = e.lngLat;
+    if (this.points.length === 0) {
+      return;
+    }
+    const tmpPoints = this.points.slice();
+    tmpPoints.push(lngLat);
+    const feature = this.createFeature(tmpPoints);
+    this.drawRender.update(feature);
+    // this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
+  };
+
+  protected onDblClick = (e: any) => {
+    const lngLat = e.lngLat;
+    if (this.points.length < 2) {
+      return;
+    }
+    this.points.push(lngLat);
+    this.drawFinish();
+  };
+
+  protected moveFeature(delta: ILngLat): Feature {
+    const newFeature = moveFeatures([this.currentFeature as Feature], delta);
+    const newPointFeture = moveFeatures(this.pointFeatures, delta);
+    this.drawRender.updateData(featureCollection(newFeature));
+    this.drawVertexLayer.updateData(featureCollection(newPointFeture));
+    this.currentFeature = newFeature[0];
+    this.pointFeatures = newPointFeture;
+    return this.currentFeature;
+  }
+  protected createFeature(points: ILngLat[]): FeatureCollection {
+    const feature = createPolygon(points, {
+      id: this.getUniqId(),
+      active: true,
+    });
+    this.setCurrentFeature(feature as Feature);
+    return {
+      type: 'FeatureCollection',
+      features: [feature],
+    };
+  }
+
+  protected editFeature(endPoint: ILngLat): FeatureCollection {
+    this.endPoint = endPoint;
+    return this.createFeature(this.points);
+  }
+
+  protected onDraw = () => {
+    this.drawVertexLayer.on('mousemove', (e: any) => {
+      this.setCursor('pointer');
+    });
+    this.drawVertexLayer.on('mouseout', () => {
+      this.setCursor('crosshair');
+    });
+    this.drawVertexLayer.on('click', () => {
+      this.resetCursor();
+      this.drawFinish();
+    });
+  };
+  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;
+  }
+}
+/**
+ * draw 端点响应事件
+ * select Polyon 响应事件
+ * edit 端点 中心点响应事件
+ */

packages/draw/src/modes/draw_rect.ts

@@ -12,7 +12,7 @@ import {
 import { Feature, FeatureCollection, point } from '@turf/helpers';
 import selectRender from '../render/selected';
 import { DrawEvent, DrawModes, unitsType } from '../util/constant';
-import { creatRect } from '../util/create_geometry';
+import { createRect } from '../util/create_geometry';
 import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
 import DrawFeature, { IDrawFeatureOption } from './draw_feature';
 export interface IDrawRectOption extends IDrawFeatureOption {
@@ -26,6 +26,9 @@ export default class DrawRect extends DrawFeature {
     super(scene, options);
     this.selectLayer = new selectRender(this);
   }
+  public drawFinish() {
+    return null;
+  }
   protected onDragStart = (e: IInteractionTarget) => {
     this.startPoint = e.lngLat;
     this.setCursor('grabbing');
@@ -67,7 +70,7 @@ export default class DrawRect extends DrawFeature {
   }
 
   protected createFeature(): FeatureCollection {
-    const feature = creatRect(
+    const feature = createRect(
       [this.startPoint.lng, this.startPoint.lat],
       [this.endPoint.lng, this.endPoint.lat],
     );

packages/draw/src/modes/draw_selected.ts

@@ -74,42 +74,4 @@ export default class DrawSelect extends DrawFeature {
   protected onClick = () => {
     return null;
   };
-
-  private createCircleData(center: ILngLat, endPoint: ILngLat) {
-    const radius = turfDistance(
-      point([center.lng, center.lat]),
-      point([endPoint.lng, endPoint.lat]),
-      this.getOption('units'),
-    );
-    const feature = turfCircle([center.lng, center.lat], radius, {
-      units: this.getOption('units'),
-      steps: this.getOption('steps'),
-      properties: {
-        id: `${this.currentFeature?.properties?.id}`,
-        active: true,
-        radius,
-        center,
-        endPoint,
-      },
-    });
-    this.currentFeature = feature as Feature;
-    return featureCollection([feature]);
-  }
-
-  private moveCircle(feature: Feature, delta: ILngLat) {
-    const preCenter = feature?.properties?.center as ILngLat;
-    const preEndPoint = feature?.properties?.endPoint as ILngLat;
-    const newCenter = {
-      lng: preCenter.lng + delta.lng,
-      lat: preCenter.lat + delta.lat,
-    };
-    const newEndPoint = {
-      lng: preEndPoint.lng + delta.lng,
-      lat: preEndPoint.lat + delta.lat,
-    };
-
-    const newCircle = this.createCircleData(newCenter, newEndPoint);
-    // this.centerLayer.setData([newCenter]);
-    this.editLayer.updateData(newCircle);
-  }
 }

packages/draw/src/modes/index.ts

@@ -1,3 +1,6 @@
 import DrawCircle from './draw_circle';
+import DrawLine from './draw_line';
+import DrawPoint from './draw_point';
+import DrawPolygon from './draw_polygon';
 import DrawRect from './draw_rect';
-export { DrawCircle, DrawRect };
+export { DrawCircle, DrawRect, DrawPolygon, DrawPoint, DrawLine };

packages/draw/src/render/draw.ts

@@ -1,82 +1,83 @@
-import {
-  IInteractionTarget,
-  ILayer,
-  ILngLat,
-  IPopup,
-  LineLayer,
-  PointLayer,
-  PolygonLayer,
-  Popup,
-  Scene,
-} from '@antv/l7';
+import { IInteractionTarget, ILayer, Scene } from '@antv/l7';
 const InitFeature = {
   type: 'FeatureCollection',
   features: [],
 };
-import Draw from '../modes/draw_mode';
+import { FeatureCollection } from '@turf/helpers';
+import Draw from '../modes/draw_feature';
 import { DrawEvent, DrawModes } from '../util/constant';
+import { renderFeature } from '../util/renderFeature';
 export default class DrawLayer {
-  private polygonLayer: ILayer;
-  private lineLayer: ILayer;
+  private drawLayers: ILayer[] = [];
   private draw: Draw;
   constructor(draw: Draw) {
     this.draw = draw;
-    this.init();
   }
-  public init() {
-    const style = this.draw.getStyle('normal_fill');
-    const linestyle = this.draw.getStyle('normal_line');
-    this.polygonLayer = new PolygonLayer({
-      zIndex: 0,
-    })
-      .source(InitFeature)
-      .filter('active', (active) => {
-        return !active;
-      })
-      .shape('fill')
-      .active(true)
-      .color(style.color)
-      .style(style.style);
-
-    this.lineLayer = new LineLayer({
-      zIndex: 1,
-    })
-      .source(InitFeature)
-      .shape('line')
-      .filter('active', (active) => {
-        return !active;
-      })
-      .size(linestyle.size)
-      .color(linestyle.color)
-      .style(linestyle.style);
-    this.draw.scene.addLayer(this.polygonLayer);
-    this.draw.scene.addLayer(this.lineLayer);
-    this.addLayerEvent();
+  public update(feature: FeatureCollection) {
+    this.removeLayers();
+    const style = this.draw.getStyle('active');
+    this.drawLayers = renderFeature(feature, style);
+    this.addLayers();
   }
-  public updateData() {
-    this.lineLayer.setData(this.draw.source.data);
-    this.polygonLayer.setData(this.draw.source.data);
+  public updateData(data: any) {
+    this.drawLayers.forEach((layer) => layer.setData(data));
   }
 
   public destroy() {
-    this.draw.scene.removeLayer(this.lineLayer);
-    this.draw.scene.removeLayer(this.polygonLayer);
+    this.removeLayers();
+  }
+
+  public removeLayers() {
+    if (this.drawLayers.length !== 0) {
+      this.drawLayers.forEach((layer) => this.draw.scene.removeLayer(layer));
+    }
+  }
+  public addLayers() {
+    this.drawLayers.forEach((layer) => this.draw.scene.addLayer(layer));
   }
 
   public show() {
-    this.lineLayer.show();
-    this.polygonLayer.show();
+    this.drawLayers.forEach((layer) => layer.show());
   }
 
   public hide() {
-    this.lineLayer.hide();
-    this.polygonLayer.hide();
+    this.drawLayers.forEach((layer) => layer.hide());
   }
 
-  private addLayerEvent() {
-    this.polygonLayer.on('click', (e) => {
-      this.draw.setCurrentFeature(e.feature);
-      this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
-    });
+  public enableDrag() {
+    this.show();
+    const layer = this.drawLayers[0];
+    layer.on('mousemove', this.onMouseMove);
+    layer.on('mouseout', this.onUnMouseMove);
+    layer.on('click', this.onClick);
+    layer.on('unclick', this.onUnClick);
   }
+  public disableDrag() {
+    const layer = this.drawLayers[0];
+    layer.off('mousemove', this.onMouseMove);
+    layer.off('mouseout', this.onUnMouseMove);
+    layer.off('click', this.onClick);
+    layer.off('unclick', this.onUnClick);
+  }
+
+  private onMouseMove = (e: any) => {
+    this.draw.setCursor('move');
+    this.draw.selectMode.enable();
+  };
+  private onUnMouseMove = (e: any) => {
+    this.draw.resetCursor();
+    this.draw.selectMode.disable();
+  };
+  private onClick = (e: any) => {
+    this.draw.selectMode.disable();
+    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.DIRECT_SELECT);
+    this.disableDrag();
+    this.hide();
+  };
+  private onUnClick = (e: any) => {
+    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
+    this.draw.selectMode.disable();
+    this.disableDrag();
+    this.hide();
+  };
 }

packages/draw/src/render/draw_vertex.ts

@@ -0,0 +1,83 @@
+import { IInteractionTarget, ILayer, Scene } from '@antv/l7';
+const InitFeature = {
+  type: 'FeatureCollection',
+  features: [],
+};
+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';
+export default class DrawVertexLayer {
+  public drawLayers: ILayer[] = [];
+  private draw: Draw;
+  constructor(draw: Draw) {
+    this.draw = draw;
+  }
+  public update(feature: FeatureCollection) {
+    this.removeLayers();
+    const style = this.draw.getStyle('active');
+    this.drawLayers = renderFeature(feature, style);
+    this.addLayers();
+  }
+  public on(type: any, handler: CallBack) {
+    const layer = this.drawLayers[0];
+    layer.on(type, handler);
+  }
+  public off(type: any, handler: CallBack) {
+    const layer = this.drawLayers[0];
+    layer.off(type, handler);
+  }
+  public updateData(data: any) {
+    this.drawLayers.forEach((layer) => layer.setData(data));
+  }
+
+  public destroy() {
+    this.removeLayers();
+  }
+
+  public removeLayers() {
+    if (this.drawLayers.length !== 0) {
+      this.drawLayers.forEach((layer) => this.draw.scene.removeLayer(layer));
+    }
+  }
+  public addLayers() {
+    this.drawLayers.forEach((layer) => this.draw.scene.addLayer(layer));
+  }
+
+  public show() {
+    this.drawLayers.forEach((layer) => layer.show());
+  }
+
+  public hide() {
+    this.drawLayers.forEach((layer) => layer.hide());
+  }
+
+  public enableDrag() {
+    const layer = this.drawLayers[0];
+    layer.on('mousemove', this.onMouseMove);
+    layer.on('mouseout', this.onUnMouseMove);
+    layer.on('click', this.onClick);
+  }
+  public disableDrag() {
+    const layer = this.drawLayers[0];
+    layer.off('mousemove', this.onMouseMove);
+    layer.off('mouseout', this.onUnMouseMove);
+    layer.off('click', this.onClick);
+  }
+
+  private onMouseMove = (e: any) => {
+    this.draw.setCursor('pointer');
+    // this.draw.editMode.enable();
+  };
+  private onUnMouseMove = (e: any) => {
+    this.draw.resetCursor();
+    // 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();
+  };
+}

packages/draw/src/util/create_geometry.ts

@@ -1,6 +1,12 @@
 import turfCircle from '@turf/circle';
 import turfDistance from '@turf/distance';
-import { Feature, featureCollection, point } from '@turf/helpers';
+import {
+  Feature,
+  featureCollection,
+  lineString,
+  point,
+  polygon,
+} from '@turf/helpers';
 import { unitsType } from './constant';
 
 export function createCircle(
@@ -28,7 +34,7 @@ export function createCircle(
   return feature as Feature;
 }
 
-export function creatRect(
+export function createRect(
   startPoint: [number, number],
   endPoint: [number, number],
 ): Feature {
@@ -58,3 +64,40 @@ export function creatRect(
   };
   return feature as Feature;
 }
+
+export function createPolygon(
+  points: Array<{ lng: number; lat: number }>,
+  options: any,
+): any {
+  const coords = points.map((p) => [p.lng, p.lat]);
+  if (points.length < 2) {
+    return point(coords[0], options);
+  } else if (points.length < 3) {
+    return lineString(coords, options);
+  } else {
+    coords.push(coords[0]);
+    return polygon([coords], options);
+  }
+}
+
+export function createLine(
+  points: Array<{ lng: number; lat: number }>,
+  options: any,
+): any {
+  const coords = points.map((p) => [p.lng, p.lat]);
+  if (points.length < 2) {
+    return point(coords[0], options);
+  } else {
+    return lineString(coords, options);
+  }
+}
+
+export function createPoint(points: Array<{ lng: number; lat: number }>) {
+  const features = points.map((p, index) =>
+    point([p.lng, p.lat], {
+      active: true,
+      id: index.toString(),
+    }),
+  );
+  return featureCollection(features);
+}

packages/draw/src/util/layerstyle.ts

@@ -1,4 +1,39 @@
 const LayerStyles = {
+  active: {
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#fbb03b',
+      size: 5,
+      style: {
+        stroke: '#fff',
+        strokeWidth: 2,
+      },
+    },
+    line: {
+      type: 'LineLayer',
+      shape: 'line',
+      color: '#fbb03b',
+      size: 1,
+      style: {
+        opacity: 1,
+        lineType: 'dash',
+        dashArray: [2, 2],
+      },
+    },
+    polygon: {
+      shape: 'fill',
+      color: '#fbb03b',
+      style: {
+        opacity: 0.1,
+        stroke: '#fbb03b',
+        strokeWidth: 1,
+        strokeOpacity: 1,
+        lineType: 'dash',
+        dashArray: [2, 2],
+      },
+    },
+  },
   // 正常显示样式
   normal_fill: {
     type: 'PolygonLayer',

packages/draw/src/util/renderFeature.ts

@@ -0,0 +1,64 @@
+import { ILayer, LineLayer, PointLayer, PolygonLayer } from '@antv/l7';
+import { FeatureCollection } from '@turf/helpers';
+export function renderFeature(fe: FeatureCollection, style: any): ILayer[] {
+  const type = fe.features[0].geometry.type;
+  let layers;
+  switch (type) {
+    case 'Point':
+      layers = drawPoint(fe, style.point);
+      break;
+    case 'LineString':
+      layers = drawLine(fe, style.line);
+      break;
+    case 'Polygon':
+      layers = drawPolyon(fe, style.polygon);
+      break;
+  }
+  return layers as ILayer[];
+}
+
+function drawPoint(fe: FeatureCollection, style: any) {
+  const layer = new PointLayer()
+    .source(fe)
+    .shape('circle')
+    .color(style.color)
+    .size(style.size)
+    .style({
+      opacity: style.style.opacity,
+      stroke: style.style.stroke,
+      strokeWidth: style.style.strokeWidth,
+    });
+  return [layer];
+}
+
+function drawLine(fe: FeatureCollection, style: any) {
+  const layer = new LineLayer()
+    .source(fe)
+    .shape('line')
+    .color(style.color)
+    .size(style.size)
+    .style(style.style);
+  return [layer];
+}
+
+function drawPolyon(fe: FeatureCollection, style: any) {
+  const fill = new PolygonLayer()
+    .source(fe)
+    .shape('fill')
+    .color(style.color)
+    .size(style.size)
+    .style({
+      opacity: style.style.opacity,
+    });
+  const line = new PolygonLayer()
+    .source(fe)
+    .shape('line')
+    .color(style.style.stroke)
+    .size(style.style.strokeWidth)
+    .style({
+      opacity: style.style.strokeOpacity,
+      lineType: style.style.lineType,
+      dashArray: style.style.dashArray,
+    });
+  return [fill, line];
+}

packages/maps/src/mapbox/map.ts

@@ -26,7 +26,7 @@ const EventMap: {
 } = {
   mapmove: 'move',
   camerachange: 'move',
-  zoomChange: 'zoom',
+  zoomchange: 'zoom',
   dragging: 'drag',
 };
 import { MapTheme } from './theme';
@@ -137,18 +137,16 @@ export default class MapboxService
     this.map.setBearing(rotation);
   }
 
-  public zoomIn(): void {
-    this.map.zoomIn();
+  public zoomIn(option?: any, eventData?: any): void {
+    this.map.zoomIn(option, eventData);
+  }
+  public zoomOut(option?: any, eventData?: any): void {
+    this.map.zoomOut(option, eventData);
   }
-
   public setPitch(pitch: number) {
     return this.map.setPitch(pitch);
   }
 
-  public zoomOut(): void {
-    this.map.zoomOut();
-  }
-
   public panTo(p: [number, number]): void {
     this.map.panTo(p);
   }

stories/Components/components/Scale.tsx

@@ -85,6 +85,9 @@ export default class ScaleComponent extends React.Component {
 
     scene.addControl(scaleControl);
     scene.addControl(layerControl);
+    scene.on('zoomchange', () => {
+      console.log(scene.getCenter(), scene.getZoom());
+    });
     const zoomControl = new Zoom({
       position: 'bottomright',
     });

stories/Draw/Components/DrawLine.tsx

@@ -0,0 +1,45 @@
+import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
+import { DrawLine } from '@antv/l7-draw';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+
+import * as React from 'react';
+export default class Circle extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        pitch: 0,
+        style: 'light',
+        center: [113.775374, 28.31067],
+        zoom: 12,
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      const drawLine = new DrawLine(scene);
+      drawLine.enable();
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Draw/Components/DrawPoint.tsx

@@ -0,0 +1,45 @@
+import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
+import { DrawPoint } from '@antv/l7-draw';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+
+import * as React from 'react';
+export default class Circle extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        pitch: 0,
+        style: 'light',
+        center: [113.775374, 28.31067],
+        zoom: 12,
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      const drawPoint = new DrawPoint(scene);
+      drawPoint.enable();
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Draw/Components/Polygon.tsx

@@ -0,0 +1,45 @@
+import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
+import { DrawPolygon } from '@antv/l7-draw';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+
+import * as React from 'react';
+export default class Circle extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        pitch: 0,
+        style: 'light',
+        center: [113.775374, 28.31067],
+        zoom: 12,
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      const drawPolygon = new DrawPolygon(scene);
+      drawPolygon.enable();
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Draw/Draw.stories.tsx

@@ -2,11 +2,17 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Circle from './Components/Circle';
 import DrawCircle from './Components/DrawCircle';
+import Line from './Components/DrawLine';
+import Point from './Components/DrawPoint';
 import DrawPolygon from './Components/DrawPolygon';
 import DrawRect from './Components/DrawRect';
+import Polygon from './Components/Polygon';
 
 storiesOf('绘制', module)
   .add('圆', () => <Circle />, {})
+  .add('矩形', () => <DrawRect />, {})
+  .add('多边形', () => <Polygon />, {})
+  .add('点', () => <Point />, {})
+  .add('路径', () => <Line />, {})
   .add('绘制圆', () => <DrawCircle />, {})
-  .add('四边形', () => <DrawRect />, {})
   .add('绘制面', () => <DrawPolygon />, {});