improvement: update control

.gitignore

@@ -79,3 +79,4 @@ node_modules/
 packages/l7/package_bak.json
 
 stories/Test
+packages/draw/node_modules/@turf

packages/core/src/shaders/picking.frag.glsl

@@ -34,7 +34,7 @@ vec4 filterPickingColor(vec4 color) {
   if (u_PickingStage == PICKING_ENCODE && length(pickingColor) < 0.001) {
     discard;
   }
-  return u_PickingStage == PICKING_ENCODE ? vec4(pickingColor, 1.0) : color;
+  return u_PickingStage == PICKING_ENCODE ? vec4(pickingColor, step(0.001,color.a)): color;
 }
 
 /*

packages/draw/__tests__/util/create_geometry.spec.ts

@@ -0,0 +1,50 @@
+import { Feature, Geometry, point, Properties } from '@turf/helpers';
+import {
+  createCircle,
+  createPoint,
+  createPolygon,
+  createRect,
+} from '../../src/util/create_geometry';
+const circleData = {
+  type: 'Feature',
+  properties: {
+    units: 'kilometers',
+    steps: 4,
+    id: '1',
+    pointFeatures: [
+      {
+        type: 'Feature',
+        properties: {},
+        geometry: { type: 'Point', coordinates: [113, 40] },
+      },
+    ],
+    active: true,
+    type: 'circle',
+    radius: 1115.6518229264275,
+    startPoint: { lng: 112, lat: 30 },
+    endPoint: { lng: 113, lat: 40 },
+  },
+  geometry: {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [112, 40.03328403184138],
+        [100.45355724910682, 29.495378543228927],
+        [112, 19.966715968158613],
+        [123.54644275089319, 29.495378543228927],
+        [112, 40.03328403184138],
+      ],
+    ],
+  },
+};
+describe('creat_geometry', () => {
+  it('creatCircle', () => {
+    const circle = createCircle([112, 30], [113, 40], {
+      units: 'kilometers',
+      steps: 4,
+      id: '1',
+      pointFeatures: [point([113, 40])],
+    });
+    expect(circleData).toEqual(circle);
+  });
+});

packages/draw/src/css/draw.less

@@ -3,7 +3,7 @@
   background: #fff;
   box-shadow: 0 0 0 1px rgba(0,0,0,.1);
   display: flex;
-  a {
+  button {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 20px 20px;
@@ -17,11 +17,11 @@
     box-sizing: border-box;
     cursor: pointer;
   }
-  a:not(:disabled):hover {
+ button:not(:disabled):hover {
     background-color: rgba(0, 0, 0, 0.05);
   }
 
-  a:focus {
+ button:focus {
     box-shadow: 0 0 2px 2px #0096ff;
   }
   .draw-point {
@@ -46,25 +46,25 @@
 }
 .horizontal {
   flex-direction: row;
-  a:focus:first-child {
+ button:focus:first-child {
     border-radius: 4px 0px 0px 4px;
   }
-  a:focus:last-child {
+ button:focus:last-child {
     border-radius: 0px 4px 4px 4px;
   }
-  a+a {
+ button+button {
     border-left: 1px solid #eee;
   }
 }
 .vertical {
   flex-direction: column;
-  a:focus:first-child {
+ button:focus:first-child {
     border-radius: 4px 4px 0 0;
   }
-  a:focus:last-child {
+ button:focus:last-child {
     border-radius: 0px 0px 4px 4px;
   }
-  a+a {
+ button+button {
     border-top: 1px solid #eee;
   }
 }

packages/draw/src/draw_control.ts

@@ -1,3 +1,9 @@
+/*
+ * @Author: lzxue
+ * @Date: 2020-04-03 19:24:16
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2020-04-03 19:30:39
+ */
 import { Control, IControlOption, PositionType, Scene } from '@antv/l7';
 import { DOM } from '@antv/l7-utils';
 import './css/draw.less';
@@ -10,6 +16,15 @@ import {
   DrawPolygon,
   DrawRect,
 } from './modes';
+const DrawType: {
+  [key: string]: any;
+} = {
+  point: DrawPoint,
+  line: DrawLine,
+  polygon: DrawPolygon,
+  circle: DrawCircle,
+  rect: DrawRect,
+};
 import { DrawEvent, DrawModes } from './util/constant';
 export interface IControls {
   [key: string]: boolean;
@@ -47,64 +62,34 @@ export class DrawControl extends Control {
     const controlClass = 'l7-control-draw' + ' ' + layout;
     const { controls } = this.controlOption as IDrawControlOption;
     const container = DOM.create('div', controlClass) as HTMLElement;
-    if (controls.point) {
-      this.draw.point = new DrawPoint(this.scene);
-      this.createButton(
-        '绘制点',
-        'draw-point',
-        container,
-        this.onButtonClick.bind(null, 'point'),
-      );
-    }
-    if (controls.line) {
-      this.draw.line = new DrawLine(this.scene);
-      this.createButton(
-        '绘制线',
-        'draw-line',
-        container,
-        this.onButtonClick.bind(null, 'line'),
-      );
-    }
-    if (controls.polygon) {
-      this.createButton(
-        '绘制面',
-        'draw-polygon',
-        container,
-        this.onButtonClick.bind(null, 'polygon'),
-      );
-      this.draw.polygon = new DrawPolygon(this.scene);
-    }
-    if (controls.rect) {
-      this.draw.rect = new DrawRect(this.scene);
-      this.createButton(
-        '绘制矩形',
-        'draw-rect',
-        container,
-        this.onButtonClick.bind(null, 'rect'),
-      );
-    }
-    if (controls.circle) {
-      this.draw.circle = new DrawCircle(this.scene);
-      this.createButton(
-        '绘制圆',
-        'draw-circle',
-        container,
-        this.onButtonClick.bind(null, 'circle'),
-      );
-    }
-
-    if (controls.delete) {
-      this.drawDelete = new DrawDelete(this.scene);
-      this.createButton(
-        '删除',
-        'draw-delete',
-        container,
-        this.onDeleteMode.bind(null, 'delete'),
-      );
-    }
+    this.addControls(controls, container);
     // 监听组件 选中, 编辑
     return container;
   }
+  private addControls(controls: IControls, container: HTMLElement) {
+    for (const type in controls) {
+      if (DrawType[type]) {
+        const draw = new DrawType[type](this.scene);
+        draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
+        this.draw[type] = draw;
+        this.createButton(
+          draw.title,
+          'draw-' + type,
+          container,
+          this.onButtonClick.bind(null, type),
+        );
+      } else if (type === 'delete') {
+        const draw = new DrawDelete(this.scene);
+        draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
+        this.createButton(
+          draw.title,
+          'draw-' + type,
+          container,
+          this.onDeleteMode.bind(null, type),
+        );
+      }
+    }
+  }
 
   private createButton(
     tile: string,
@@ -112,10 +97,9 @@ export class DrawControl extends Control {
     container: HTMLElement,
     fn: (...arg: any[]) => any,
   ) {
-    const link = DOM.create('a', className, container) as HTMLLinkElement;
-    link.href = 'javascript:void(0)';
+    const link = DOM.create('button', className, container);
     link.title = tile;
-    link.addEventListener('mousedown', fn, true);
+    link.addEventListener('mousedown', fn, false);
     return link;
   }
 
@@ -124,7 +108,6 @@ export class DrawControl extends Control {
     for (const draw in this.draw) {
       if (draw === type) {
         this.draw[draw].enable();
-        this.currentDraw = this.draw[draw];
       } else {
         this.draw[draw].disable();
       }
@@ -139,4 +122,10 @@ export class DrawControl extends Control {
     this.currentDraw.deleteMode.enable();
     return false;
   };
+
+  private onModeChange = (type: string, mode: string) => {
+    if (mode === DrawModes.SIMPLE_SELECT) {
+      this.currentDraw = this.draw[type];
+    }
+  };
 }

packages/draw/src/modes/draw_circle.ts

@@ -39,6 +39,13 @@ export default class DrawCircle extends DrawFeature {
     this.source.setFeatureActive(feature);
   }
 
+  protected getDefaultOptions() {
+    return {
+      ...super.getDefaultOptions(),
+      title: '绘制圆',
+    };
+  }
+
   protected onDragStart = (e: IInteractionTarget) => {
     this.startPoint = e.lngLat;
     this.setCursor('grabbing');

packages/draw/src/modes/draw_delete.ts

@@ -21,6 +21,12 @@ export default class DrawDelete extends DrawFeature {
   public disable() {
     return null;
   }
+  protected getDefaultOptions() {
+    return {
+      ...super.getDefaultOptions(),
+      title: '删除图形',
+    };
+  }
 
   protected onDragStart(e: any): void {
     throw new Error('Method not implemented.');

packages/draw/src/modes/draw_line.ts

@@ -14,6 +14,13 @@ export default class DrawLine extends DrawPolygon {
     super(scene, options);
     this.type = 'line';
   }
+
+  protected getDefaultOptions() {
+    return {
+      ...super.getDefaultOptions(),
+      title: '绘制线',
+    };
+  }
   protected moveFeature(delta: ILngLat): Feature {
     const newFeature = moveFeatures([this.currentFeature as Feature], delta);
     const newPointFeture = moveFeatures(this.pointFeatures, delta);

packages/draw/src/modes/draw_mode.ts

@@ -7,6 +7,7 @@ import LayerStyles from '../util/layerstyle';
 
 export interface IDrawOption {
   data: FeatureCollection;
+  title: string;
   style: any;
 }
 
@@ -23,6 +24,7 @@ export default abstract class DrawMode extends EventEmitter {
   public source: DrawSource;
   public scene: Scene;
   public type: string;
+  public title: string;
   public isEnable: boolean = false;
 
   protected options: {
@@ -40,6 +42,7 @@ export default abstract class DrawMode extends EventEmitter {
     this.scene = scene;
     this.source = new DrawSource(data);
     this.options = merge(this.options, this.getDefaultOptions(), options);
+    this.title = this.getOption('title');
   }
   public enable() {
     if (this.isEnable) {

packages/draw/src/modes/draw_point.ts

@@ -19,13 +19,19 @@ export default class DrawPoint extends DrawFeature {
     super(scene, options);
     this.type = 'point';
   }
-
   public drawFinish() {
     this.emit(DrawEvent.CREATE, this.currentFeature);
     this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
     this.disable();
   }
 
+  protected getDefaultOptions() {
+    return {
+      ...super.getDefaultOptions(),
+      title: '绘制点',
+    };
+  }
+
   protected onDragStart = (e: IInteractionTarget) => {
     return null;
   };

packages/draw/src/modes/draw_polygon.ts

@@ -91,6 +91,13 @@ export default class DrawPolygon extends DrawFeature {
     feature.properties.pointFeatures = pointfeatures.features;
     this.setCurrentFeature(feature);
   }
+
+  protected getDefaultOptions() {
+    return {
+      ...super.getDefaultOptions(),
+      title: '绘制多边形',
+    };
+  }
   protected onDragStart = (e: IInteractionTarget) => {
     return null;
   };
@@ -108,10 +115,10 @@ export default class DrawPolygon extends DrawFeature {
     this.points.push(lngLat);
     const feature = this.createFeature(this.points);
     const properties = feature.properties as { pointFeatures: Feature[] };
-    // const pointfeatures = createPoint([this.points[0], this.endPoint]);
+    const pointfeatures = createPoint([this.points[0], this.endPoint]);
     // this.pointFeatures = pointfeatures.features;
     this.drawRender.update(featureCollection([feature]));
-    this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
+    this.drawVertexLayer.update(featureCollection(pointfeatures.features));
     this.onDraw();
   };
 

packages/draw/src/modes/draw_rect.ts

@@ -21,6 +21,12 @@ export default class DrawRect extends DrawCircle {
   public drawFinish() {
     return null;
   }
+  protected getDefaultOptions() {
+    return {
+      ...super.getDefaultOptions(),
+      title: '绘制矩形',
+    };
+  }
 
   protected createFeature(id: string = '0'): Feature {
     const points = createPoint([this.endPoint]);

packages/draw/src/util/create_geometry.ts

@@ -36,7 +36,6 @@ export function createCircle(
         lng: endPoint[0],
         lat: endPoint[1],
       },
-      path: [center, endPoint],
     },
   });
   return feature as Feature;

stories/Layers/components/Point.tsx

@@ -37,7 +37,9 @@ export default class Point3D extends React.Component {
             })
             .shape('circle')
             .size(8)
-            .active(true)
+            .active({
+              color: 'red',
+            })
             .color('Magnitude', [
               '#0A3663',
               '#1558AC',

yarn.lock

@@ -4179,7 +4179,7 @@
   dependencies:
     "@turf/helpers" "^5.1.5"
 
-"@turf/midpoint@5.1.x":
+"@turf/midpoint@5.1.x", "@turf/midpoint@^5.1.5":
   version "5.1.5"
   resolved "https://registry.npmjs.org/@turf/midpoint/-/midpoint-5.1.5.tgz#e261f6b2b0ea8124cceff552a262dd465c9d05f0"
   integrity sha1-4mH2srDqgSTM7/VSomLdRlydBfA=