Merge pull request #279 from antvis/l7-draw

L7 draw
2020-04-10 15:29:59 +08:00 · 2020-04-10 15:29:59 +08:00 · 5bb647a365
parent f7ab0c0ec5 021a1253c3
commit 5bb647a365
57 changed files with 853 additions and 196 deletions
--- a/docs/api/draw/index.en.md
+++ b/docs/api/draw/index.en.md
@ -0,0 +1,4 @@
+---
+title: Draw Component
+order: 2
+---
--- a/docs/api/draw/index.zh.md
+++ b/docs/api/draw/index.zh.md
@ -0,0 +1,274 @@
+---
+title: 地图绘制组件
+order: 2
+---
+
+地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
+
+# 使用
+
+**using modules**
+
+```javascript
+import { DrawControl } from '@antv/l7-draw';
+```
+
+**CDN 版本引用**
+
+```html
+<head>
+  <! --引入最新版的L7-Draw -->
+  <script src="https://unpkg.com/@antv/l7-draw"></script>
+</head>
+```
+
+### 参数
+
+```javascript
+const control = new DrawControl(scene, option);
+```
+
+#### scene
+
+scene 对象
+
+#### options
+
+control 配置项
+
+| name     | Type                                          | Default    | Description                     |
+| -------- | --------------------------------------------- | ---------- | ------------------------------- |
+| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置                        |
+| layout   | `horizontal、 vertical`                       | `vertical` | 组件布局 支持水平和垂直两种布局 |
+| controls | `controlOptions`                              |            | 设置 UI 组件添加哪些绘制工具    |
+| style    |                                               |            | 地图绘制样式                    |
+
+**controlOptions**
+UI 组件配置项
+
+- point `boolean | drawOption` 绘制点工具配置
+- line `boolean | drawOption` 绘制线工具配置
+- polygon `boolean | drawOption` 绘制面工具配置
+- circle `boolean | drawOption` 绘制圆工具配置
+- rect `boolean | drawOption` 绘制矩形工具配置
+- delete `boolean | drawOption` 添加删除工具
+
+默认配置
+
+```
+  {
+    point: true,
+    line: true,
+    polygon: true,
+    rect: true,
+    circle: true,
+    delete: true
+  }
+```
+
+示例
+
+```
+{
+    point: false,
+    line: {
+      editEnable: false,
+    },
+    polygon: true,
+    rect: true,
+    circle: true,
+    delete: false
+```
+
+### 添加到地图
+
+```javascript
+scene.addControl(control);
+```
+
+### 从地图中移除
+
+```javascript
+scene.removeControl(control);
+```
+
+### Draw Type
+
+可以不依赖 Draw UI 组件，独立的使用每一个 Draw
+
+#### DrawCircle
+
+绘制圆形
+
+```javascript
+import { DrawCircle } from '@antv/l7-draw';
+const drawCircle = new DrawCircle(scene);
+drawCircle.enable();
+```
+
+#### DrawRect
+
+绘制四边形
+
+```javascript
+import { DrawRect } from '@antv/l7-draw';
+const drawRect = new DrawRect(scene);
+drawRect.enable();
+```
+
+#### DrawLine
+
+绘制路径
+
+```javascript
+import { DrawLine } from '@antv/l7-draw';
+const drawLine = new DrawLine(scene);
+drawLine.enable();
+```
+
+#### DrawPoint
+
+绘制点
+
+```javascript
+import { DrawPoint } from '@antv/l7-draw';
+const drawPoint = new DrawPoint(scene);
+drawPoint.enable();
+```
+
+#### DrawPolygon
+
+绘制多边形
+
+```javascript
+import { DrawPolygon } from '@antv/l7-draw';
+const drawPoint = new DrawPolygon(scene);
+drawPoint.enable();
+```
+
+### 配置项 DrawOption
+
+- editEnable boolean 是否允许编辑
+- selectEnable boolean 是否允许选中
+
+### 方法
+
+#### enable
+
+开始编辑，绘制完成之后会自动结束。
+
+#### disable
+
+结束编辑
+
+### 事件
+
+#### draw.create
+
+绘制完成时触发该事件
+
+#### draw.delete
+
+图形删除时触发该事件
+
+#### draw.update
+
+图形更新时触发该事件，图形的平移，顶点的编辑
+
+### style
+
+- active 绘制过程中高亮颜色
+- normal 正常显示状态
+
+```javascript
+const style = {
+  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: {
+    polygon: {
+      type: 'PolygonLayer',
+      shape: 'fill',
+      color: '#3bb2d0',
+      style: {
+        opacity: 0.1,
+        stroke: '#3bb2d0',
+        strokeWidth: 1,
+        strokeOpacity: 1,
+        lineType: 'solid',
+        dashArray: [2, 2],
+      },
+    },
+    line: {
+      type: 'LineLayer',
+      shape: 'line',
+      size: 1,
+      color: '#3bb2d0',
+      style: {
+        opacity: 1,
+      },
+    },
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#3bb2d0',
+      size: 3,
+      style: {
+        stroke: '#fff',
+        strokeWidth: 2,
+      },
+    },
+  },
+  normal_point: {
+    type: 'PointLayer',
+    shape: 'circle',
+    color: '#3bb2d0',
+    size: 3,
+    style: {
+      stroke: '#fff',
+      strokeWidth: 2,
+    },
+  },
+  mid_point: {
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#fbb03b',
+      size: 3,
+      style: {},
+    },
+  },
+};
+```
--- a/docs/api/react/popup.en.md
+++ b/docs/api/react/popup.en.md
@ -23,6 +23,7 @@ order: 4

 ```jsx
 import { Popup } from '@antv/l7-react';
-
 <Popup option={{}} lnglat={[]} />;
 ```
+
+[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
--- a/docs/api/react/popup.zh.md
+++ b/docs/api/react/popup.zh.md
@ -26,3 +26,5 @@ import { Popup } from '@antv/l7-react';

 <Popup option={{}} lnglat={[]} />;
 ```
+
+[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
--- a/package.json
+++ b/package.json
@ -32,7 +32,7 @@
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/gl": "^4.1.0",
    "@types/jest": "^24.0.18",
-    "@types/node": "^12.12.22",
+    "@types/node": "^13.11.1",
    "@types/storybook__react": "^4.0.2",
    "@types/supercluster": "^5.0.1",
    "awesome-typescript-loader": "^5.2.1",
--- a/packages/component/src/control/BaseControl.ts
+++ b/packages/component/src/control/BaseControl.ts
@ -83,6 +83,10 @@ export default class Control extends EventEmitter {
  public onAdd(): HTMLElement {
    throw new Error('Method not implemented.');
  }
+
+  public onRemove(): void {
+    throw new Error('Method not implemented.');
+  }
  public hide() {
    const container = this.container;
    DOM.addClass(container, 'l7-control-hide');
@ -98,6 +102,7 @@ export default class Control extends EventEmitter {
      return this;
    }
    DOM.remove(this.container);
+    this.onRemove();
  }
  public _refocusOnMap(e: MouseEvent) {
    // if map exists and event is not a keyboard event
--- a/packages/component/src/control/layer.ts
+++ b/packages/component/src/control/layer.ts
@ -89,13 +89,22 @@ export default class Layers extends Control {
    return this;
  }

+  public onRemove() {
+    if (!this.mapsService) {
+      return;
+    }
+    this.mapsService.off('click', this.collapse);
+    this.layers.forEach((layerItem) => {
+      layerItem.layer.off('remove', this.onLayerChange);
+      layerItem.layer.off('add', this.onLayerChange);
+    });
+  }
  private initLayout() {
    const className = 'l7-control-layers';
    const container = (this.container = DOM.create('div', className));
    const { collapsed } = this.controlOption;
    // makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released
    container.setAttribute('aria-haspopup', 'true');
-
    const form = (this.form = DOM.create(
      'form',
      className + '-list',
--- a/packages/component/src/control/logo.ts
+++ b/packages/component/src/control/logo.ts
@ -23,4 +23,8 @@ export default class Logo extends Control {
    container.appendChild(anchor);
    return container;
  }
+
+  public onRemove() {
+    return null;
+  }
 }
--- a/packages/core/src/services/camera/CameraService.ts
+++ b/packages/core/src/services/camera/CameraService.ts
@ -67,6 +67,10 @@ export default class CameraService implements ICameraService {
    return this.viewport.getViewMatrixUncentered();
  }

+  public getViewProjectionMatrixUncentered(): number[] {
+    return this.viewport.getViewProjectionMatrixUncentered();
+  }
+
  public getViewProjectionMatrix(): number[] {
    return (
      this.overridedViewProjectionMatrix ||
--- a/packages/core/src/services/camera/ICameraService.ts
+++ b/packages/core/src/services/camera/ICameraService.ts
@ -16,6 +16,7 @@ export interface IViewport {
  getProjectionMatrix(): number[];
  getViewMatrix(): number[];
  getViewMatrixUncentered(): number[];
+  getViewProjectionMatrixUncentered(): number[];
  getViewProjectionMatrix(): number[];
  getZoom(): number;
  getZoomScale(): number;
--- a/packages/core/src/services/component/IControlService.ts
+++ b/packages/core/src/services/component/IControlService.ts
@ -27,6 +27,7 @@ export interface IControl {
  setPosition(pos: PositionType): void;
  addTo(sceneContainer: Container): void;
  onAdd(): HTMLElement;
+  onRemove(): void;
  hide(): void;
  show(): void;
  remove(): void;
--- a/packages/core/src/services/interaction/PickingService.ts
+++ b/packages/core/src/services/interaction/PickingService.ts
@ -98,7 +98,6 @@ export default class PickingService implements IPickingService {
          layer.hooks.afterPickingEncode.call();
          const isPicked = this.pickFromPickingFBO(layer, target);
          return isPicked && !layer.getLayerConfig().enablePropagation;
-          // return false;
        });
    });
  }
--- a/packages/draw/README.md
+++ b/packages/draw/README.md
@ -1,9 +1,56 @@
 # `draw`
+ 地图绘制组件，支持点、线、面的绘制编辑,

+## 使用

-## Usage
+l7-draw 需要引用

 ```
-const draw = require('l7-draw');
+import { DrawControl } from '@antv/l7-draw';
+
+```
+CDN 版本引用
+
+```html
+<head>
+<! --引入最新版的L7-Draw --> 
+<script src = 'https://unpkg.com/@antv/l7-draw'></script>
+</head>
+```
+
+### example
+
+```javascript
+
+import { Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { DrawControl } from '@antv/l7-draw';
+const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark', // hosted style id
+        center: [112.874, 32.76], // starting position
+        zoom: 12, // starting zoom
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+
+      const drawControl = new DrawControl(scene, {
+        position: 'topright',
+        layout: 'horizontal', // horizontal vertical
+        controls: {
+          point: true,
+          polygon: true,
+          line: true,
+          circle: true,
+          rect: true,
+          delete: true,
+        },
+      });
+      scene.addControl(drawControl);
+    });

 ```
--- a/packages/draw/package.json
+++ b/packages/draw/package.json
@ -11,6 +11,7 @@
  "types": "es/index.d.ts",
  "sideEffects": true,
  "files": [
+    "dist",
    "lib",
    "es",
    "README.md"
@ -29,6 +30,7 @@
    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:cdn": "node_modules/.bin/rollup -c",
    "lint:ts": "run-p -c lint:ts-*",
    "test": "jest"
  },
@ -45,5 +47,11 @@
  "bugs": {
    "url": "https://github.com/antvis/L7/issues"
  },
-  "homepage": "https://github.com/antvis/L7#readme"
+  "homepage": "https://github.com/antvis/L7#readme",
+  "devDependencies": {
+    "postcss": "^7.0.27",
+    "postcss-url": "^8.0.0",
+    "rollup": "^2.3.3",
+    "rollup-plugin-less": "^1.1.2"
+  }
 }
--- a/packages/draw/rollup.config.js
+++ b/packages/draw/rollup.config.js
@ -3,26 +3,48 @@ import typescript from 'rollup-plugin-typescript';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import buble from 'rollup-plugin-buble';
-
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+import url from 'postcss-url';
 export default {
  input: './src/index.ts',
  plugins: [
+    // less(),
    typescript({
      exclude: 'node_modules/**',
      typescript: require('typescript')
    }),
-    resolve(),
-    commonjs(),
+    resolve({
+      preferBuiltins: false
+    }),
+    postcss({
+      plugins: [
+        url({ url: 'inline' })
+      ]
+    }),
+    commonjs({
+      namedExports: {
+        eventemitter3: [ 'EventEmitter' ],
+        lodash: [ 'merge' ]
+      }
+    }),
    buble({
      transforms: { generator: false }
-    })
+    }),
+    terser()
+  ],
+  external: [
+    '@antv/l7'
  ],
  output: [
    {
      format: 'umd',
      name: 'L7-Draw',
      file: pkg.unpkg,
-      sourcemap: true
+      sourcemap: true,
+      globals: {
+        '@antv/l7': 'L7'
+      }
    }
  ]
 };
--- a/packages/draw/src/draw_control.ts
+++ b/packages/draw/src/draw_control.ts
@ -2,10 +2,9 @@
 * @Author: lzxue
 * @Date: 2020-04-03 19:24:16
 * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2020-04-03 19:30:39
+ * @Last Modified time: 2020-04-09 19:34:41
 */
-import { Control, IControlOption, PositionType, Scene } from '@antv/l7';
-import { DOM } from '@antv/l7-utils';
+import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
 import './css/draw.less';
 import {
  DrawCircle,
@ -16,6 +15,7 @@ import {
  DrawPolygon,
  DrawRect,
 } from './modes';
+import { IDrawFeatureOption } from './modes/draw_feature';
 const DrawType: {
  [key: string]: any;
 } = {
@ -25,9 +25,10 @@ const DrawType: {
  circle: DrawCircle,
  rect: DrawRect,
 };
+import { isObject, polygon } from '@turf/helpers';
 import { DrawEvent, DrawModes } from './util/constant';
 export interface IControls {
-  [key: string]: boolean;
+  [key: string]: boolean | IDrawFeatureOption;
 }

 export interface IDrawControlOption extends IControlOption {
@ -39,7 +40,6 @@ export class DrawControl extends Control {
  private draw: {
    [key: string]: DrawFeature;
  } = {};
-  private drawDelete: DrawDelete;
  private currentDraw: DrawFeature;
  private scene: Scene;
  constructor(scene: Scene, options: Partial<IDrawControlOption>) {
@ -52,6 +52,11 @@ export class DrawControl extends Control {
      position: PositionType.TOPLEFT,
      controls: {
        point: true,
+        line: true,
+        polygon: true,
+        rect: true,
+        circle: true,
+        delete: true,
      },
      name: 'draw',
    };
@ -66,10 +71,19 @@ export class DrawControl extends Control {
    // 监听组件 选中, 编辑
    return container;
  }
+
+  public onRemove() {
+    for (const draw in this.draw) {
+      if (this.draw[draw]) {
+        this.draw[draw].destroy();
+      }
+    }
+  }
  private addControls(controls: IControls, container: HTMLElement) {
    for (const type in controls) {
-      if (DrawType[type]) {
-        const draw = new DrawType[type](this.scene);
+      if (DrawType[type] && controls[type] !== false) {
+        const drawOption = isObject(controls[type]) ? controls[type] : false;
+        const draw = new DrawType[type](this.scene, drawOption);
        draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
        this.draw[type] = draw;
        this.createButton(
@ -78,7 +92,7 @@ export class DrawControl extends Control {
          container,
          this.onButtonClick.bind(null, type),
        );
-      } else if (type === 'delete') {
+      } else if (type === 'delete' && controls[type] !== false) {
        const draw = new DrawDelete(this.scene);
        draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
        this.createButton(
@ -99,12 +113,11 @@ export class DrawControl extends Control {
  ) {
    const link = DOM.create('button', className, container);
    link.title = tile;
-    link.addEventListener('mousedown', fn, false);
+    link.addEventListener('mouseup', fn, false);
    return link;
  }

  private onButtonClick = (type: string, e: MouseEvent) => {
-    e.stopPropagation();
    for (const draw in this.draw) {
      if (draw === type) {
        this.draw[draw].enable();
--- a/packages/draw/src/modes/draw_circle.ts
+++ b/packages/draw/src/modes/draw_circle.ts
@ -1,7 +1,12 @@
-import { IInteractionTarget, ILngLat, PointLayer, Scene } from '@antv/l7';
+import {
+  IInteractionTarget,
+  ILayer,
+  ILngLat,
+  PointLayer,
+  Scene,
+} from '@antv/l7';
 import {
  Feature,
-  FeatureCollection,
  featureCollection,
  Geometries,
  Properties,
@ -10,15 +15,12 @@ import { DrawEvent, DrawModes, unitsType } from '../util/constant';
 import { createCircle, createPoint } from '../util/create_geometry';
 import moveFeatures, { movePoint } from '../util/move_featrues';
 import DrawFeature, { IDrawFeatureOption } from './draw_feature';
-export interface IDrawRectOption extends IDrawFeatureOption {
-  units: unitsType;
-  steps: number;
-}
 export default class DrawCircle extends DrawFeature {
  protected startPoint: ILngLat;
  protected endPoint: ILngLat;
  protected pointFeatures: Feature[];
-  constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
+  protected centerLayer: ILayer;
+  constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
    super(scene, options);
    this.type = 'circle';
  }
@ -30,7 +32,6 @@ export default class DrawCircle extends DrawFeature {
  public setCurrentFeature(feature: Feature) {
    this.currentFeature = feature as Feature;
    // @ts-ignore
-    // @ts-ignore
    this.pointFeatures = feature.properties.pointFeatures;
    // @ts-ignore
    this.startPoint = feature.properties.startPoint;
@ -39,7 +40,7 @@ export default class DrawCircle extends DrawFeature {
    this.source.setFeatureActive(feature);
  }

-  protected getDefaultOptions() {
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      ...super.getDefaultOptions(),
      title: '绘制圆',
@ -47,6 +48,9 @@ export default class DrawCircle extends DrawFeature {
  }

  protected onDragStart = (e: IInteractionTarget) => {
+    if (this.drawStatus !== 'Drawing') {
+      this.drawLayer.emit('unclick', null);
+    }
    this.startPoint = e.lngLat;
    this.setCursor('grabbing');
    this.initCenterLayer();
@ -57,14 +61,14 @@ export default class DrawCircle extends DrawFeature {
    this.endPoint = e.lngLat;
    const feature = this.createFeature() as Feature<Geometries, Properties>;
    const properties = feature.properties as { pointFeatures: Feature[] };
-    this.drawRender.update(featureCollection([feature]));
+    this.drawLayer.update(featureCollection([feature]));
    this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
  };

  protected onDragEnd = () => {
    const feature = this.createFeature(`${this.getUniqId()}`);
    const properties = feature.properties as { pointFeatures: Feature[] };
-    this.drawRender.update(featureCollection([feature]));
+    this.drawLayer.update(featureCollection([feature]));
    this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
    this.emit(DrawEvent.CREATE, this.currentFeature);
    this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
@ -73,7 +77,7 @@ export default class DrawCircle extends DrawFeature {

  protected moveFeature(delta: ILngLat): void {
    const newFeature = moveFeatures([this.currentFeature as Feature], delta);
-    this.drawRender.updateData(featureCollection(newFeature));
+    this.drawLayer.updateData(featureCollection(newFeature));
    const newPointFeture = moveFeatures(this.pointFeatures, delta);
    this.drawVertexLayer.updateData(featureCollection(newPointFeture));
    const newStartPoint = movePoint(
@ -113,7 +117,7 @@ export default class DrawCircle extends DrawFeature {
    this.endPoint = endPoint;
    const newFeature = this.createFeature();
    const properties = newFeature.properties as { pointFeatures: Feature[] };
-    this.drawRender.updateData(featureCollection([newFeature]));
+    this.drawLayer.updateData(featureCollection([newFeature]));
    this.drawVertexLayer.updateData(
      featureCollection(properties.pointFeatures),
    );
--- a/packages/draw/src/modes/draw_delete.ts
+++ b/packages/draw/src/modes/draw_delete.ts
@ -1,17 +1,11 @@
 import { IInteractionTarget, ILngLat, Scene } from '@antv/l7';
 import { Feature } from '@turf/helpers';
 import { DrawEvent } from '../util/constant';
+import { IDrawFeatureOption } from './draw_feature';
 import DrawFeature, { IDrawOption } from './draw_mode';
-export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
-export interface IDrawCircleOption extends IDrawOption {
-  units: unitsType;
-  steps: number;
-}
-
 export default class DrawDelete extends DrawFeature {
-  private endPoint: ILngLat;
  // 绘制完成之后显示
-  constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
+  constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
    super(scene, options);
  }

@ -21,7 +15,7 @@ export default class DrawDelete extends DrawFeature {
  public disable() {
    return null;
  }
-  protected getDefaultOptions() {
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      ...super.getDefaultOptions(),
      title: '删除图形',
--- a/packages/draw/src/modes/draw_edit.ts
+++ b/packages/draw/src/modes/draw_edit.ts
@ -1,21 +1,12 @@
 import { IInteractionTarget, ILngLat, Scene } from '@antv/l7';
 import { Feature } from '@turf/helpers';
 import { DrawEvent } from '../util/constant';
+import { IDrawFeatureOption } from './draw_feature';
 import DrawFeature, { IDrawOption } from './draw_mode';
-export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
-export interface IDrawCircleOption extends IDrawOption {
-  units: unitsType;
-  steps: number;
-}
-const InitFeature = {
-  type: 'FeatureCollection',
-  features: [],
-};
 export default class DrawEdit extends DrawFeature {
-  private center: ILngLat;
  private endPoint: ILngLat;
  // 绘制完成之后显示
-  constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
+  constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
    super(scene, options);
  }

@ -26,6 +17,7 @@ export default class DrawEdit extends DrawFeature {
  protected onDragStart = (e: IInteractionTarget) => {
    // @ts-ignore
  };
+
  protected getDefaultOptions() {
    return {
      steps: 64,
@ -41,7 +33,7 @@ export default class DrawEdit extends DrawFeature {
  };

  protected onDragEnd = () => {
-    this.emit(DrawEvent.UPDATE, null);
+    this.emit(DrawEvent.UPDATE, this.currentFeature);
    this.resetCursor();
    this.disable();
  };
--- a/packages/draw/src/modes/draw_feature.ts
+++ b/packages/draw/src/modes/draw_feature.ts
@ -4,42 +4,43 @@ import {
  FeatureCollection,
  featureCollection,
  point,
+  Units,
+  unitsFactors,
 } from '@turf/helpers';
 import DrawRender from '../render/draw';
 import RenderLayer from '../render/draw_result';
 import DrawVertexLayer from '../render/draw_vertex';
-import { DrawEvent, DrawModes, unitsType } from '../util/constant';
+import { DrawEvent, DrawModes } from '../util/constant';
 import DrawDelete from './draw_delete';
 import DrawEdit from './draw_edit';
 import DrawMode, { IDrawOption } from './draw_mode';
 import DrawSelected from './draw_selected';
 export interface IDrawFeatureOption extends IDrawOption {
-  units: unitsType;
+  units: Units;
  steps: number;
+  editEnable: boolean;
+  selectEnable: boolean;
+  cursor: string;
 }
-const InitFeature = {
-  type: 'FeatureCollection',
-  features: [],
-};
 export default abstract class DrawFeature extends DrawMode {
  // 绘制完成之后显示
  public selectMode: DrawSelected;
  public editMode: DrawEdit;
  public deleteMode: DrawDelete;
+  public editEnable: boolean;
+  public selectEnable: boolean;

-  protected renderLayer: RenderLayer;
-  protected drawRender: DrawRender;
+  protected normalLayer: RenderLayer;
+  protected drawLayer: DrawRender;
  protected drawVertexLayer: DrawVertexLayer;
-  protected centerLayer: ILayer;

-  // 编辑过程中显示
-  protected drawLayer: ILayer;
-  protected drawLineLayer: ILayer;
  constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
    super(scene, options);
-    this.drawRender = new DrawRender(this);
+    this.drawLayer = new DrawRender(this);
    this.drawVertexLayer = new DrawVertexLayer(this);
-    this.renderLayer = new RenderLayer(this);
+    this.normalLayer = new RenderLayer(this);
+    this.selectEnable = this.getOption('selectEnable');
+    this.editEnable = this.getOption('editEnable');

    // this.editLayer = new EditLayer(this);
    this.selectMode = new DrawSelected(this.scene, {});
@ -56,6 +57,7 @@ export default abstract class DrawFeature extends DrawMode {
    this.deleteMode.on(DrawEvent.DELETE, this.onDrawDelete);
    this.on(DrawEvent.CREATE, this.onDrawCreate);
    this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
+    document.addEventListener('keydown', this.addKeyDownEvent);
  }
  public abstract drawFinish(): void;
  public setCurrentFeature(feature: Feature) {
@ -71,19 +73,19 @@ export default abstract class DrawFeature extends DrawMode {
  }
  public disableLayer() {
    // this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
-    this.drawRender.disableDrag();
+    this.drawLayer.disableSelect();
  }
  public enableLayer() {
-    this.drawRender.enableDrag();
+    this.drawLayer.enableSelect();
  }
  public clear() {
-    this.drawRender.hide();
+    this.drawLayer.hide();
    this.drawVertexLayer.hide();
    this.hideOtherLayer();
    this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
  }
  public reset() {
-    this.drawRender.show();
+    this.drawLayer.show();
    this.drawVertexLayer.show();
    this.showOtherLayer();
  }
@ -91,11 +93,24 @@ export default abstract class DrawFeature extends DrawMode {
  public addVertex(feature: Feature): void {
    throw new Error('子类未实现该方法');
  }
-  protected getDefaultOptions() {
+
+  public onRemove() {
+    this.destroy();
+    this.selectMode.destroy();
+    this.editMode.destroy();
+    this.source.destroy();
+    this.drawLayer.destroy();
+    this.drawVertexLayer.destroy();
+    this.normalLayer.destroy();
+    document.removeEventListener('keydown', this.addKeyDownEvent);
+  }
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      steps: 64,
-      units: 'kilometres',
+      units: 'kilometers',
      cursor: 'crosshair',
+      editEnable: true,
+      selectEnable: true,
    };
  }
  protected abstract onDragStart(e: IInteractionTarget): void;
@ -128,9 +143,12 @@ export default abstract class DrawFeature extends DrawMode {
  private onModeChange = (mode: DrawModes[any]) => {
    switch (mode) {
      case DrawModes.DIRECT_SELECT:
+        if (!this.editEnable) {
+          return;
+        }
        this.editMode.enable();
        this.editMode.setEditFeature(this.currentFeature as Feature);
-        this.drawRender.updateData(
+        this.drawLayer.updateData(
          featureCollection([this.currentFeature as Feature]),
        );
        this.drawVertexLayer.updateData(
@ -142,10 +160,17 @@ export default abstract class DrawFeature extends DrawMode {
        this.drawStatus = 'DrawEdit';
        break;
      case DrawModes.SIMPLE_SELECT:
+        if (!this.selectEnable) {
+          this.drawLayer.hide();
+          this.drawVertexLayer.hide();
+          this.hideOtherLayer();
+          this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
+          return;
+        }
        this.selectMode.setSelectedFeature(this.currentFeature as Feature);
        this.selectMode.enable();
-        this.drawRender.enableDrag();
-        this.drawRender.updateData(
+        this.drawLayer.enableSelect();
+        this.drawLayer.updateData(
          featureCollection([this.currentFeature as Feature]),
        );
        this.drawVertexLayer.updateData(
@ -153,7 +178,7 @@ export default abstract class DrawFeature extends DrawMode {
        );
        this.drawVertexLayer.disableEdit();
        this.drawVertexLayer.show();
-        this.drawRender.show();
+        this.drawLayer.show();
        this.showOtherLayer();
        this.drawStatus = 'DrawSelected';
        break;
@ -163,8 +188,8 @@ export default abstract class DrawFeature extends DrawMode {
        this.drawVertexLayer.hide();
        this.drawVertexLayer.disableEdit();
        this.hideOtherLayer();
-        this.renderLayer.update(this.source.data);
-        this.renderLayer.enableDrag();
+        this.normalLayer.update(this.source.data);
+        this.normalLayer.enableSelect();
        this.drawStatus = 'DrawFinish';
        break;
    }
@ -176,6 +201,7 @@ export default abstract class DrawFeature extends DrawMode {

  private onDrawUpdate = (feature: Feature) => {
    this.source.updateFeature(this.currentFeature as Feature);
+    this.emit(DrawEvent.UPDATE, this.currentFeature);
  };

  private onDrawMove = (delta: ILngLat) => {
@ -190,10 +216,15 @@ export default abstract class DrawFeature extends DrawMode {
    if (this.drawStatus === 'DrawSelected') {
      this.clear();
      this.source.removeFeature(this.currentFeature as Feature);
-      this.renderLayer.update(this.source.data);
-      // this.reset();
+      this.normalLayer.update(this.source.data);
    }
+  };

-    // this.source.removeFeature(this.currentFeature as Feature
+  private addKeyDownEvent = (event: KeyboardEvent) => {
+    // tslint:disable-next-line:no-arg
+    const e = event || window.event;
+    if (e && e.keyCode === 8) {
+      this.deleteMode.enable();
+    }
  };
 }
--- a/packages/draw/src/modes/draw_line.ts
+++ b/packages/draw/src/modes/draw_line.ts
@ -15,7 +15,7 @@ export default class DrawLine extends DrawPolygon {
    this.type = 'line';
  }

-  protected getDefaultOptions() {
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      ...super.getDefaultOptions(),
      title: '绘制线',
@ -24,7 +24,7 @@ export default class DrawLine extends DrawPolygon {
  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.drawLayer.updateData(featureCollection(newFeature));
    this.drawVertexLayer.updateData(featureCollection(newPointFeture));
    this.currentFeature = newFeature[0];
    this.pointFeatures = newPointFeture;
--- a/packages/draw/src/modes/draw_mode.ts
+++ b/packages/draw/src/modes/draw_mode.ts
@ -1,7 +1,8 @@
 import { IInteractionTarget, IPopup, Scene } from '@antv/l7';
 import { Feature, FeatureCollection } from '@turf/helpers';
 import { EventEmitter } from 'eventemitter3';
-import { merge } from 'lodash';
+// tslint:disable-next-line:no-submodule-imports
+import merge from 'lodash/merge';
 import DrawSource from '../source';
 import LayerStyles from '../util/layerstyle';

@ -49,7 +50,9 @@ export default abstract class DrawMode extends EventEmitter {
      return;
    }
    // @ts-ignore
-    this.scene.map.dragPan.disable();
+    this.scene.setMapStatus({
+      dragEnable: false,
+    });
    this.scene.on('dragstart', this.onDragStart);
    this.scene.on('dragging', this.onDragging);
    this.scene.on('dragend', this.onDragEnd);
@ -68,7 +71,9 @@ export default abstract class DrawMode extends EventEmitter {
    this.scene.off('click', this.onClick);
    this.resetCursor();
    // @ts-ignore
-    this.scene.map.dragPan.enable();
+    this.scene.setMapStatus({
+      dragEnable: true,
+    });
    this.isEnable = false;
  }
  public setCurrentFeature(feature: Feature) {
@ -83,11 +88,11 @@ export default abstract class DrawMode extends EventEmitter {
    throw new Error('子类未实现该方法');
  }

-  public getCurrentVertex() {
-    return this.currentVertex;
+  public getCurrentVertex(): Feature {
+    return this.currentVertex as Feature;
  }
-  public getCurrentFeature() {
-    return this.currentVertex;
+  public getCurrentFeature(): Feature {
+    return this.currentFeature as Feature;
  }

  public getOption(key: string) {
@ -114,8 +119,13 @@ export default abstract class DrawMode extends EventEmitter {
      container.removeAttribute('style');
    }
  }
+  public destroy() {
+    DrawFeatureId = 0;
+    this.removeAllListeners();
+    this.disable();
+  }

-  protected getDefaultOptions() {
+  protected getDefaultOptions(): any {
    return {};
  }

--- a/packages/draw/src/modes/draw_point.ts
+++ b/packages/draw/src/modes/draw_point.ts
@ -1,21 +1,12 @@
 import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7';
-import {
-  Feature,
-  FeatureCollection,
-  featureCollection,
-  point,
-} from '@turf/helpers';
+import { Feature, featureCollection, point } from '@turf/helpers';
 import { DrawEvent, DrawModes, unitsType } from '../util/constant';
 import moveFeatures from '../util/move_featrues';
 import DrawFeature, { IDrawFeatureOption } from './draw_feature';
-export interface IDrawRectOption extends IDrawFeatureOption {
-  units: unitsType;
-  steps: number;
-}
 export default class DrawPoint extends DrawFeature {
  protected pointFeatures: Feature[];

-  constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
+  constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
    super(scene, options);
    this.type = 'point';
  }
@ -25,7 +16,7 @@ export default class DrawPoint extends DrawFeature {
    this.disable();
  }

-  protected getDefaultOptions() {
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      ...super.getDefaultOptions(),
      title: '绘制点',
@ -44,16 +35,19 @@ export default class DrawPoint extends DrawFeature {
  };

  protected onClick = (e: any) => {
-    const lngLat = e.lngLat;
+    if (this.drawStatus !== 'Drawing') {
+      this.drawLayer.emit('unclick', null);
+    }
+    const lngLat = e.lngLat || e.lnglat;
    const feature = this.createFeature(lngLat);
-    this.drawRender.update(featureCollection([feature]));
+    this.drawLayer.update(featureCollection([feature]));
    this.drawVertexLayer.update(featureCollection([feature]));
    this.drawFinish();
  };

  protected moveFeature(delta: ILngLat): Feature {
    const newFeature = moveFeatures([this.currentFeature as Feature], delta);
-    this.drawRender.updateData(featureCollection(newFeature));
+    this.drawLayer.updateData(featureCollection(newFeature));
    this.drawVertexLayer.updateData(featureCollection(newFeature));
    this.currentFeature = newFeature[0];
    this.pointFeatures = newFeature;
--- a/packages/draw/src/modes/draw_polygon.ts
+++ b/packages/draw/src/modes/draw_polygon.ts
@ -46,10 +46,9 @@ export default class DrawPolygon extends DrawFeature {
  public drawFinish() {
    const feature = this.createFeature(this.points);
    const properties = feature.properties as { pointFeatures: Feature[] };
-    this.drawRender.update(featureCollection([feature]));
+    this.drawLayer.update(featureCollection([feature]));
    this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
    // @ts-ignore
-    // feature.properties.pointFeatures = pointfeatures;
    this.emit(DrawEvent.CREATE, this.currentFeature);
    this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
    this.points = [];
@ -84,7 +83,7 @@ export default class DrawPolygon extends DrawFeature {
    }
    const pointfeatures = createPoint(points);
    this.pointFeatures = pointfeatures.features;
-    this.drawRender.updateData(featureCollection([feature]));
+    this.drawLayer.updateData(featureCollection([feature]));
    this.drawVertexLayer.updateData(pointfeatures);
    this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
    // @ts-ignore
@ -92,7 +91,7 @@ export default class DrawPolygon extends DrawFeature {
    this.setCurrentFeature(feature);
  }

-  protected getDefaultOptions() {
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      ...super.getDefaultOptions(),
      title: '绘制多边形',
@ -110,31 +109,34 @@ export default class DrawPolygon extends DrawFeature {
  };

  protected onClick = (e: any) => {
-    const lngLat = e.lngLat;
+    if (this.drawStatus !== 'Drawing') {
+      this.drawLayer.emit('unclick', null);
+    }
+    const lngLat = e.lngLat || e.lnglat;
    this.endPoint = lngLat;
    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]);
    // this.pointFeatures = pointfeatures.features;
-    this.drawRender.update(featureCollection([feature]));
+    this.drawLayer.update(featureCollection([feature]));
    this.drawVertexLayer.update(featureCollection(pointfeatures.features));
    this.onDraw();
  };

  protected onMouseMove = (e: any) => {
-    const lngLat = e.lngLat;
+    const lngLat = e.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(featureCollection([feature]));
+    this.drawLayer.update(featureCollection([feature]));
  };

  protected onDblClick = (e: any) => {
-    const lngLat = e.lngLat;
+    const lngLat = e.lngLat || e.lnglat;
    if (this.points.length < 2) {
      return;
    }
@ -145,7 +147,7 @@ export default class DrawPolygon extends DrawFeature {
  protected moveFeature(delta: ILngLat): void {
    const newFeature = moveFeatures([this.currentFeature as Feature], delta);
    const newPointFeture = moveFeatures(this.pointFeatures, delta);
-    this.drawRender.updateData(featureCollection(newFeature));
+    this.drawLayer.updateData(featureCollection(newFeature));
    this.drawVertexLayer.updateData(featureCollection(newPointFeture));
    newFeature[0].properties = {
      ...newFeature[0].properties,
@ -166,13 +168,13 @@ export default class DrawPolygon extends DrawFeature {
    return feature;
  }

-  protected editFeature(vertex: ILngLat) {
+  protected editFeature(vertex: ILngLat): void {
    const selectVertexed = this.currentVertex as Feature<
      Geometries,
      Properties
    >;
    if (selectVertexed === null) {
-      return featureCollection([]);
+      return;
    } else {
      // @ts-ignore
      const id = selectVertexed.properties.id * 1;
@ -183,7 +185,7 @@ export default class DrawPolygon extends DrawFeature {
      this.drawVertexLayer.updateData(featureCollection(this.pointFeatures));
      this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
      this.editPolygonVertex(id, vertex);
-      this.drawRender.updateData(
+      this.drawLayer.updateData(
        featureCollection([this.currentFeature as Feature]),
      );
      const feature = this.currentFeature as Feature;
@ -246,7 +248,7 @@ export default class DrawPolygon extends DrawFeature {
      coords[id] = [vertex.lng, vertex.lat];
    }
    this.setCurrentFeature(feature);
-    this.drawRender.updateData(
+    this.drawLayer.updateData(
      featureCollection([this.currentFeature as Feature]),
    );
  }
--- a/packages/draw/src/modes/draw_rect.ts
+++ b/packages/draw/src/modes/draw_rect.ts
@ -9,19 +9,15 @@ import { unitsType } from '../util/constant';
 import { createPoint, createRect } from '../util/create_geometry';
 import DrawCircle from './draw_circle';
 import { IDrawFeatureOption } from './draw_feature';
-export interface IDrawRectOption extends IDrawFeatureOption {
-  units: unitsType;
-  steps: number;
-}
 export default class DrawRect extends DrawCircle {
-  constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
+  constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
    super(scene, options);
    this.type = 'rect';
  }
  public drawFinish() {
    return null;
  }
-  protected getDefaultOptions() {
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      ...super.getDefaultOptions(),
      title: '绘制矩形',
--- a/packages/draw/src/modes/draw_selected.ts
+++ b/packages/draw/src/modes/draw_selected.ts
@ -12,12 +12,8 @@ import {
 import { Feature, featureCollection, point } from '@turf/helpers';
 import { DrawEvent, DrawModes } from '../util/constant';
 import moveFeatures from '../util/move_featrues';
+import { IDrawFeatureOption } from './draw_feature';
 import DrawFeature, { IDrawOption } from './draw_mode';
-export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
-export interface IDrawCircleOption extends IDrawOption {
-  units: unitsType;
-  steps: number;
-}
 const InitFeature = {
  type: 'FeatureCollection',
  features: [],
@ -26,9 +22,8 @@ export default class DrawSelect extends DrawFeature {
  private center: ILngLat;
  private dragStartPoint: ILngLat;
  // 绘制完成之后显示
-  constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
+  constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
    super(scene, options);
-    // this.editLayer = new EditRender(this);
  }

  public setSelectedFeature(feature: Feature) {
@ -36,14 +31,14 @@ export default class DrawSelect extends DrawFeature {
  }

  protected onDragStart = (e: IInteractionTarget) => {
-    // @ts-ignore
-    this.scene.map.dragPan.disable();
+    this.scene.setMapStatus({ dragEnable: false });
    this.dragStartPoint = e.lngLat;
  };
-  protected getDefaultOptions() {
+
+  protected getDefaultOptions(): Partial<IDrawFeatureOption> {
    return {
      steps: 64,
-      units: 'kilometres',
+      units: 'kilometers',
      cursor: 'move',
    };
  }
--- a/packages/draw/src/render/base_render.ts
+++ b/packages/draw/src/render/base_render.ts
@ -33,6 +33,12 @@ export default class BaseRenderLayer {
    const layer = this.drawLayers[0];
    layer.off(type, handler);
  }
+
+  public emit(type: string, e: any) {
+    const layer = this.drawLayers[0];
+    layer.emit(type, e);
+  }
+
  public updateData(data: any) {
    this.drawLayers.forEach((layer) => layer.setData(data));
  }
--- a/packages/draw/src/render/draw.ts
+++ b/packages/draw/src/render/draw.ts
@ -15,7 +15,7 @@ export default class DrawLayer extends BaseRender {
    this.drawLayers = renderFeature(feature, style);
    this.addLayers();
  }
-  public enableDrag() {
+  public enableSelect() {
    this.show();
    if (this.isEnableDrag) {
      return;
@ -23,11 +23,13 @@ export default class DrawLayer extends BaseRender {
    const layer = this.drawLayers[0];
    layer.on('mouseenter', this.onMouseMove);
    layer.on('mouseout', this.onUnMouseMove);
-    layer.on('click', this.onClick);
-    layer.on('unmousedown', this.onUnClick);
+    if (this.draw.editEnable) {
+      layer.on('click', this.onClick);
+    }
+    layer.on('unclick', this.onUnClick);
    this.isEnableDrag = true;
  }
-  public disableDrag() {
+  public disableSelect() {
    if (!this.isEnableDrag) {
      return;
    }
@ -35,7 +37,7 @@ export default class DrawLayer extends BaseRender {
    layer.off('mouseenter', this.onMouseMove);
    layer.off('mouseout', this.onUnMouseMove);
    layer.off('click', this.onClick);
-    layer.off('unmousedown', this.onUnClick);
+    layer.off('unclick', this.onUnClick);
    this.isEnableDrag = false;
  }

@ -68,7 +70,7 @@ export default class DrawLayer extends BaseRender {
  private onClick = (e: any) => {
    this.draw.selectMode.disable();
    this.draw.editMode.enable();
-    this.disableDrag();
+    this.disableSelect();
    this.draw.resetCursor();
    this.enableEdit();
    this.draw.setCurrentFeature(e.feature);
@ -81,7 +83,7 @@ export default class DrawLayer extends BaseRender {
    this.draw.source.setFeatureUnActive(
      this.draw.getCurrentFeature() as Feature,
    );
-    this.disableDrag();
+    this.disableSelect();
    this.disableEdit();
    this.hide();
    this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
--- a/packages/draw/src/render/draw_mid_vertex.ts
+++ b/packages/draw/src/render/draw_mid_vertex.ts
@ -38,11 +38,9 @@ export default class DrawVertexLayer extends BaseRender {

  private onMouseEnter = (e: any) => {
    this.draw.setCursor('pointer');
-    // this.draw.editMode.enable();
  };
  private onMouseOut = (e: any) => {
    this.draw.resetCursor();
-    // this.draw.editMode.disable();
  };
  private onClick = (e: any) => {
    this.draw.addVertex(e.feature);
--- a/packages/draw/src/render/draw_result.ts
+++ b/packages/draw/src/render/draw_result.ts
@ -14,15 +14,18 @@ export default class DrawResultLayer extends BaseRender {
    this.addFilter();
    this.addLayers();
  }
-  public enableDrag() {
+  public enableSelect() {
    if (this.isEnableDrag) {
      return;
    }
+    if (!this.draw.selectEnable) {
+      return;
+    }
    const layer = this.drawLayers[0];
    layer.on('click', this.onClick);
    this.isEnableDrag = true;
  }
-  public disableDrag() {
+  public disableSelect() {
    if (!this.isEnableDrag) {
      return;
    }
@ -31,7 +34,7 @@ export default class DrawResultLayer extends BaseRender {
    this.isEnableDrag = false;
  }
  public enableDelete() {
-    this.disableDrag();
+    this.disableSelect();
    const layer = this.drawLayers[0];
    layer.on('click', this.onDeleteClick);
  }
--- a/packages/draw/src/render/draw_vertex.ts
+++ b/packages/draw/src/render/draw_vertex.ts
@ -8,10 +8,10 @@ export default class DrawVertexLayer extends BaseRender {
    this.drawLayers = renderFeature(feature, style);
    this.addLayers();
  }
-  public enableDrag() {
+  public enableSelect() {
    return;
  }
-  public disableDrag() {
+  public disableSelect() {
    return;
  }

--- a/packages/draw/src/render/renderFeature.ts
+++ b/packages/draw/src/render/renderFeature.ts
@ -18,7 +18,9 @@ export function renderFeature(fe: FeatureCollection, style: any): ILayer[] {
 }

 function drawPoint(fe: FeatureCollection, style: any) {
-  const layer = new PointLayer()
+  const layer = new PointLayer({
+    zIndex: 2,
+  })
    .source(fe)
    .shape('circle')
    .color(style.color)
--- a/packages/draw/src/source.ts
+++ b/packages/draw/src/source.ts
@ -46,6 +46,9 @@ export default class DrawSource {
    this.removeFeature(feature);
    this.addFeature(feature);
  }
+  public destroy() {
+    this.data = this.getDefaultData();
+  }
  private getDefaultData(): FeatureCollection {
    return {
      type: 'FeatureCollection',
--- a/packages/draw/src/util/create_geometry.ts
+++ b/packages/draw/src/util/create_geometry.ts
@ -3,6 +3,7 @@ import turfDistance from '@turf/distance';
 import {
  Feature,
  featureCollection,
+  FeatureCollection,
  lineString,
  point,
  polygon,
@ -116,7 +117,9 @@ export function createLine(
  }
 }

-export function createPoint(points: Array<{ lng: number; lat: number }>) {
+export function createPoint(
+  points: Array<{ lng: number; lat: number }>,
+): FeatureCollection {
  const features = points.map((p, index) =>
    point([p.lng, p.lat], {
      active: true,
--- a/packages/l7/tests/version.spec.ts
+++ b/packages/l7/tests/version.spec.ts
@ -0,0 +1,7 @@
+import { version } from '../src/version';
+describe('version', () => {
+  it('should match the `version` field of package.json', () => {
+    const expected = require('../package.json').version;
+    expect(version).toBe(expected);
+  });
+});
--- a/packages/l7/package.json
+++ b/packages/l7/package.json
@ -28,6 +28,7 @@
    "@antv/l7-core": "^2.1.11",
    "@antv/l7-layers": "^2.1.11",
    "@antv/l7-maps": "^2.1.11",
+    "@antv/l7-utils": "^2.1.11",
    "@antv/l7-scene": "^2.1.11",
    "@babel/runtime": "^7.7.7"
  },
--- a/packages/l7/src/index.ts
+++ b/packages/l7/src/index.ts
@ -3,4 +3,5 @@ export * from '@antv/l7-scene';
 export * from '@antv/l7-maps';
 export * from '@antv/l7-layers';
 export * from '@antv/l7-component';
-export const version = '2.1.11';
+export * from '@antv/l7-utils';
+export * from './version';
--- a/packages/l7/src/version.ts
+++ b/packages/l7/src/version.ts
@ -0,0 +1,2 @@
+const version = '2.1.11';
+export { version };
--- a/packages/layers/src/heatmap/models/heatmap.ts
+++ b/packages/layers/src/heatmap/models/heatmap.ts
@ -93,9 +93,8 @@ export default class HeatMapModel extends BaseModel {
    });

    // 初始化颜色纹理
-
    this.colorTexture = createTexture2D({
-      data: imageData.data,
+      data: new Uint8Array(imageData.data),
      width: imageData.width,
      height: imageData.height,
      wrapS: gl.CLAMP_TO_EDGE,
@ -261,14 +260,17 @@ export default class HeatMapModel extends BaseModel {
    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
    const invert = mat4.invert(
      mat4.create(),
-      // @ts-ignore
-      mat4.fromValues(...this.cameraService.getViewProjectionMatrix()),
+      mat4.fromValues(
+        // @ts-ignore
+        ...this.cameraService.getViewProjectionMatrixUncentered(),
+      ),
    ) as mat4;
    this.colorModel.draw({
      uniforms: {
        u_opacity: opacity || 1.0,
        u_colorTexture: this.colorTexture,
        u_texture: this.heatmapFramerBuffer,
+        u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
        u_InverseViewProjectionMatrix: [...invert],
      },
    });
--- a/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl
+++ b/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl
@ -5,6 +5,7 @@ uniform sampler2D u_texture;
 varying vec2 v_texCoord;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_InverseViewProjectionMatrix;
+uniform mat4 u_ViewProjectionMatrixUncentered;
 varying float v_intensity;

 vec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) {
@ -26,8 +27,8 @@ void main() {
  vec4 p1 = vec4(pos, 0.0, 1.0);
 	vec4 p2 = vec4(pos, 1.0, 1.0);

-	vec4 inverseP1 = unproject_clipspace_to_position(p1, u_InverseViewProjectionMatrix);
-	vec4 inverseP2 = unproject_clipspace_to_position(p2, u_InverseViewProjectionMatrix) ;
+	vec4 inverseP1 = u_InverseViewProjectionMatrix * p1;
+	vec4 inverseP2 = u_InverseViewProjectionMatrix * p2;

  inverseP1 = inverseP1 / inverseP1.w;
 	inverseP2 = inverseP2 / inverseP2.w;
@ -40,6 +41,6 @@ void main() {

  v_intensity = texture2D(u_texture, v_texCoord).r;
  fh = toBezier(v_intensity, b).y;
-  gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * project_pixel(50.), 1.0));
+  gl_Position = u_ViewProjectionMatrixUncentered * vec4(position.xy, fh * project_pixel(50.), 1.0);

 }
--- a/packages/layers/src/utils/polylineNormal.ts
+++ b/packages/layers/src/utils/polylineNormal.ts
@ -1,4 +1,4 @@
-import { aProjectFlat, lngLatToMeters, Point } from '@antv/l7-utils';
+import { aProjectFlat, lngLatToMeters } from '@antv/l7-utils';
 import { vec2 } from 'gl-matrix';
 export function computeMiter(
  tangent: vec2,
--- a/packages/maps/src/amap/Viewport.ts
+++ b/packages/maps/src/amap/Viewport.ts
@ -7,6 +7,7 @@ export default class Viewport implements IViewport {
  private projectionMatrix: mat4 = mat4.create();
  private viewMatrix: mat4 = mat4.create();
  private viewProjectionMatrix: mat4 = mat4.create();
+  private ViewProjectionMatrixUncentered: mat4 = mat4.create();
  private viewUncenteredMatrix: mat4 = mat4.create();
  private zoom: number;
  private center: number[];
@ -60,6 +61,11 @@ export default class Viewport implements IViewport {
      this.projectionMatrix,
      this.viewMatrix,
    );
+    mat4.multiply(
+      this.ViewProjectionMatrixUncentered,
+      this.projectionMatrix,
+      this.viewMatrix,
+    );
  }

  public getZoom(): number {
@ -95,6 +101,11 @@ export default class Viewport implements IViewport {
    return this.viewProjectionMatrix;
  }

+  public getViewProjectionMatrixUncentered(): number[] {
+    // @ts-ignore
+    return this.ViewProjectionMatrixUncentered;
+  }
+
  public getFocalDistance() {
    return 1;
  }
--- a/packages/maps/src/amap/logo.css
+++ b/packages/maps/src/amap/logo.css
@ -0,0 +1,3 @@
+.amap-logo{
+ display: none !important;
+}
--- a/packages/maps/src/amap/map.ts
+++ b/packages/maps/src/amap/map.ts
@ -20,6 +20,7 @@ import {
 import { DOM } from '@antv/l7-utils';
 import { inject, injectable } from 'inversify';
 import { IAMapEvent, IAMapInstance } from '../../typings/index';
+import './logo.css';
 import { MapTheme } from './theme';
 import Viewport from './Viewport';
 let mapdivCount = 0;
@ -109,7 +110,9 @@ export default class AMapService
  }

  public getMapCanvasContainer(): HTMLElement {
-    return this.map.getContainer() as HTMLElement;
+    return this.map
+      .getContainer()
+      ?.getElementsByClassName('amap-maps')[0] as HTMLElement;
  }

  public getSize(): [number, number] {
@ -256,7 +259,6 @@ export default class AMapService
        if (mapInstance) {
          this.map = mapInstance as AMap.Map & IAMapInstance;
          this.$mapContainer = this.map.getContainer();
-          this.removeLogoControl();
          setTimeout(() => {
            this.map.on('camerachange', this.handleCameraChanged);
            resolve();
@ -272,10 +274,6 @@ export default class AMapService
            viewMode: '3D',
            ...rest,
          });
-          map.on('complete', () => {
-            this.removeLogoControl();
-          });
-
          // 监听地图相机事件
          map.on('camerachange', this.handleCameraChanged);
          // @ts-ignore
@ -423,12 +421,4 @@ export default class AMapService
      document.head.appendChild(script);
    });
  }
-
-  private removeLogoControl(): void {
-    // @ts-ignore
-    const logo = document.getElementsByClassName('amap-logo');
-    if (logo && logo[0]) {
-      logo[0].setAttribute('style', 'display: none !important');
-    }
-  }
 }
--- a/packages/maps/src/mapbox/Viewport.ts
+++ b/packages/maps/src/mapbox/Viewport.ts
@ -58,6 +58,10 @@ export default class Viewport implements IViewport {
    return this.viewport.viewProjectionMatrix;
  }

+  public getViewProjectionMatrixUncentered(): number[] {
+    // @ts-ignore
+    return this.viewport.viewProjectionMatrix;
+  }
  public getFocalDistance() {
    return 1;
  }
--- a/packages/scene/src/index.ts
+++ b/packages/scene/src/index.ts
@ -308,7 +308,7 @@ class Scene
    this.mapService.setMapStyle(style);
  }

-  public setMapStatus(options: IStatusOptions) {
+  public setMapStatus(options: Partial<IStatusOptions>) {
    this.mapService.setMapStatus(options);
  }

--- a/packages/utils/src/geo.ts
+++ b/packages/utils/src/geo.ts
@ -8,16 +8,16 @@ import {
 } from '@turf/helpers';

 export type IBounds = [[number, number], [number, number]];
-export interface ILngLat {
+interface ILngLat {
  lng: number;
  lat: number;
 }
-export interface IPoint {
+interface IPoint {
  x: number;
  y: number;
 }
 const originShift = (2 * Math.PI * 6378137) / 2.0;
-export type Point = number[];
+type Point = number[];
 /**
 * 计算地理数据范围
 * @param {dataArray} data 地理坐标数据
--- a/stories/Draw/Components/AmapDraw.tsx
+++ b/stories/Draw/Components/AmapDraw.tsx
@ -0,0 +1,59 @@
+import { Scene } from '@antv/l7';
+import { DrawControl } from '@antv/l7-draw';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+
+import * as React from 'react';
+export default class AMapDraw extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark', // hosted style id
+        center: [112.874, 32.76], // starting position
+        zoom: 12, // starting zoom
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      const drawControl = new DrawControl(scene, {
+        position: 'topright',
+        layout: 'horizontal', // horizontal vertical
+        controls: {
+          point: true,
+          polygon: true,
+          line: true,
+          circle: true,
+          rect: true,
+          delete: true,
+        },
+      });
+      scene.on('click', () => {
+        console.log('click');
+      });
+      scene.addControl(drawControl);
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
--- a/stories/Draw/Components/Circle.tsx
+++ b/stories/Draw/Components/Circle.tsx
@ -25,6 +25,12 @@ export default class Circle extends React.Component {
    scene.on('loaded', () => {
      const drawCircle = new DrawCircle(scene);
      drawCircle.enable();
+      drawCircle.on('draw.create', (e: any) => {
+        console.log(e);
+      });
+      drawCircle.on('draw.update', (e: any) => {
+        console.log(e);
+      });
    });
  }

--- a/stories/Draw/Components/DrawRect.tsx
+++ b/stories/Draw/Components/DrawRect.tsx
@ -23,7 +23,10 @@ export default class Circle extends React.Component {
    this.scene = scene;

    scene.on('loaded', () => {
-      const drawRect = new DrawRect(scene);
+      const drawRect = new DrawRect(scene, {
+        editEnable: false,
+        selectEnable: false,
+      });
      drawRect.enable();
    });
  }
--- a/stories/Draw/Draw.stories.tsx
+++ b/stories/Draw/Draw.stories.tsx
@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
+import AMapDraw from './Components/AmapDraw';
 import Circle from './Components/Circle';
 import DrawCircle from './Components/DrawCircle';
 import DrawControl from './Components/DrawControl';
@ -17,4 +18,5 @@ storiesOf('绘制', module)
  .add('路径', () => <Line />, {})
  .add('绘制组件', () => <DrawControl />, {})
  .add('绘制圆', () => <DrawCircle />, {})
+  .add('高德地图', () => <AMapDraw />, {})
  .add('绘制面', () => <DrawPolygon />, {});
--- a/stories/Layers/Layers.stories.tsx
+++ b/stories/Layers/Layers.stories.tsx
@ -9,6 +9,7 @@ import DashLineDemo from './components/dash';
 import DataUpdate from './components/data_update';
 import HeatMapDemo from './components/HeatMap';
 import HeatMapDemo3D from './components/heatmap3d';
+import HeatMap3D_2 from './components/heatmap2';
 import HexagonLayerDemo from './components/hexagon';
 import LightDemo from './components/light';
 import LineLayer from './components/Line';
@ -42,6 +43,7 @@ storiesOf('图层', module)
  .add('2D弧线', () => <Arc2DLineDemo />)
  .add('热力图', () => <HeatMapDemo />)
  .add('热力图3D', () => <HeatMapDemo3D />)
+  .add('热力图2', () => <HeatMap3D_2 />)
  .add('网格热力图', () => <HexagonLayerDemo />)
  .add('栅格', () => <RasterLayerDemo />)
  .add('图片', () => <ImageLayerDemo />)
--- a/stories/Layers/components/HeatMap.tsx
+++ b/stories/Layers/components/HeatMap.tsx
@ -1,5 +1,5 @@
 import { HeatmapLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 // @ts-ignore
 import * as React from 'react';

@ -21,7 +21,7 @@ export default class HeatMapLayerDemo extends React.Component {
        center: [121.268, 30.3628],
        pitch: 0,
        style: 'dark',
-        zoom: 2,
+        zoom: 12,
      }),
    });
    const data = await response.json();
@ -48,8 +48,8 @@ export default class HeatMapLayerDemo extends React.Component {
        },
      });
    scene.addLayer(layer);
-    scene.on('loaded', () => {
-      console.log('scene loaded');
+    scene.on('zoom', () => {
+      console.log(scene.getZoom());
    });
    this.scene = scene;
  }
--- a/stories/Layers/components/heatmap2.tsx
+++ b/stories/Layers/components/heatmap2.tsx
@ -0,0 +1,78 @@
+import { HeatmapLayer, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+// @ts-ignore
+import * as React from 'react';
+
+export default class HeatMapLayerDemo extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        pitch: 8.5,
+        center: [116.49434030056, 39.868073421167621],
+        zoom: 13,
+      }),
+    });
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const layer = new HeatmapLayer({})
+            .source(data, {
+              parser: {
+                type: 'json',
+                x: 'lng',
+                y: 'lat',
+              },
+            })
+            .size('count', [0, 1])
+            .shape('heatmap3D')
+            // weight映射通道
+            .style({
+              intensity: 10,
+              radius: 20,
+              opacity: 1.0,
+              rampColors: {
+                colors: [
+                  '#2E8AE6',
+                  '#69D1AB',
+                  '#DAF291',
+                  '#FFD591',
+                  '#FF7A45',
+                  '#CF1D49',
+                ],
+                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+              },
+            });
+          scene.addLayer(layer);
+        });
+    });
+
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
--- a/stories/React/components/world_ncov_bubble.tsx
+++ b/stories/React/components/world_ncov_bubble.tsx
@ -104,6 +104,9 @@ export default React.memo(function Map() {
      feature: args.feature,
    });
  }
+  function hidePopup(args: any): void {
+    setPopupInfo(undefined);
+  }

  return (
    <>
@ -235,6 +238,7 @@ export default React.memo(function Map() {
            }}
          >
            <LayerEvent type="mousemove" handler={showPopup} />
+            <LayerEvent type="mouseout" handler={hidePopup} />
          </PointLayer>,
          <PointLayer
            key={'5'}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -7,7 +7,7 @@
    "jsx": "react",
    "target": "es5",
    "lib": ["es6", "dom"],
-    "types": ["reflect-metadata", "jest" ],
+    "types": ["reflect-metadata", "jest", "node"],
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
@ -20,7 +20,7 @@
      "@antv/l7-*": ["packages/*/src"],
      "@antv/l7": ["packages/l7/src"],
      "*": ["node_modules", "packages", "typings/*"]
-    }
+    },
  },
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
--- a/yarn.lock
+++ b/yarn.lock
@ -4990,10 +4990,10 @@
  resolved "https://registry.npmjs.org/@types/node/-/node-10.17.17.tgz#7a183163a9e6ff720d86502db23ba4aade5999b8"
  integrity sha512-gpNnRnZP3VWzzj5k3qrpRC6Rk3H/uclhAVo1aIvwzK5p5cOrs9yEyQ8H/HBsBY0u5rrWxXEiVPQ0dEB6pkjE8Q==

-"@types/node@^12.12.22":
-  version "12.12.30"
-  resolved "https://registry.npmjs.org/@types/node/-/node-12.12.30.tgz#3501e6f09b954de9c404671cefdbcc5d9d7c45f6"
-  integrity sha512-sz9MF/zk6qVr3pAnM0BSQvYIBK44tS75QC5N+VbWSE4DjCV/pJ+UzCW/F+vVnl7TkOPcuwQureKNtSSwjBTaMg==
+"@types/node@^13.11.1":
+  version "13.11.1"
+  resolved "https://registry.npmjs.org/@types/node/-/node-13.11.1.tgz#49a2a83df9d26daacead30d0ccc8762b128d53c7"
+  integrity sha512-eWQGP3qtxwL8FGneRrC5DwrJLGN4/dH1clNTuLfN81HCrxVtxRjygDTUoZJ5ASlDEeo0ppYFQjQIlXhtXpOn6g==

 "@types/node@^8.5.7":
  version "8.10.59"
@ -10886,6 +10886,11 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==

+estree-walker@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
+  integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
+
 estree-walker@^0.6.1:
  version "0.6.1"
  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
@ -13412,6 +13417,11 @@ grid-index@^1.1.0:
  resolved "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
  integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==

+growl@>=1.10.0:
+  version "1.10.5"
+  resolved "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
+  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
+
 growly@^1.3.0:
  version "1.3.0"
  resolved "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@ -16088,7 +16098,7 @@ less@3.0.2:
    request "^2.83.0"
    source-map "^0.5.3"

-less@^3.10.3:
+less@^3.10.3, less@^3.9.0:
  version "3.11.1"
  resolved "https://registry.npmjs.org/less/-/less-3.11.1.tgz#c6bf08e39e02404fe6b307a3dfffafdc55bd36e2"
  integrity sha512-tlWX341RECuTOvoDIvtFqXsKj072hm3+9ymRBe76/mD6O5ZZecnlAOVDlWAleF2+aohFrxNidXhv2773f6kY7g==
@ -22033,6 +22043,19 @@ rollup-plugin-buble@^0.19.8:
    buble "^0.19.8"
    rollup-pluginutils "^2.3.3"

+rollup-plugin-less@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/rollup-plugin-less/-/rollup-plugin-less-1.1.2.tgz#c4bffacc24928b7f657a7a06e09930a3e2ebdfad"
+  integrity sha512-tRyUEc7dqzrmwDNKWbKyPN9vxmr2l+4G+2BqqLIccfoowuNwa/IfRMrfs892Mr9EjotDO/KDV1KC+AXXNNCYKA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    fs-extra "^0.30.0"
+    growl ">=1.10.0"
+    less "^3.9.0"
+    mkdirp "^0.5.1"
+    rollup "^0.34.7"
+    rollup-pluginutils "^1.5.1"
+
 rollup-plugin-node-resolve@^5.2.0:
  version "5.2.0"
  resolved "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz#730f93d10ed202473b1fb54a5997a7db8c6d8523"
@ -22083,6 +22106,14 @@ rollup-plugin-typescript@^1.0.1:
    resolve "^1.10.0"
    rollup-pluginutils "^2.5.0"

+rollup-pluginutils@^1.5.1:
+  version "1.5.2"
+  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
+  integrity sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=
+  dependencies:
+    estree-walker "^0.2.1"
+    minimatch "^3.0.2"
+
 rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.3.3, rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
  version "2.8.2"
  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
@ -22099,6 +22130,13 @@ rollup@^0.25.8:
    minimist "^1.2.0"
    source-map-support "^0.3.2"

+rollup@^0.34.7:
+  version "0.34.13"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-0.34.13.tgz#a211cdde31f96cb39e7cb4e35becb15ddc3efa19"
+  integrity sha1-ohHN3jH5bLOefLTjW+yxXdw++hk=
+  dependencies:
+    source-map-support "^0.4.0"
+
 rollup@^1.27.14:
  version "1.32.1"
  resolved "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz#4480e52d9d9e2ae4b46ba0d9ddeaf3163940f9c4"
@ -22108,6 +22146,13 @@ rollup@^1.27.14:
    "@types/node" "*"
    acorn "^7.1.0"

+rollup@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.3.3.tgz#5982df700d7aae8907075ba68122bb57d98e9cd0"
+  integrity sha512-uJ9VNWk80mb4wDCSfd1AyHoSc9TrWbkZtnO6wbsMTp9muSWkT26Dvc99MX1yGCOTvUN1Skw/KpFzKdUDuZKTXA==
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 rst-selector-parser@^2.2.3:
  version "2.2.3"
  resolved "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
@ -23013,6 +23058,13 @@ source-map-support@^0.3.2:
  dependencies:
    source-map "0.1.32"

+source-map-support@^0.4.0:
+  version "0.4.18"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
+  dependencies:
+    source-map "^0.5.6"
+
 source-map-support@^0.5.3, source-map-support@^0.5.6, source-map-support@~0.5.12:
  version "0.5.16"
  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"