diff --git a/src/map/tool/AreaTool.ts b/src/map/tool/AreaTool.ts
index b81627027a..fb7130b958 100644
--- a/src/map/tool/AreaTool.ts
+++ b/src/map/tool/AreaTool.ts
@@ -1,6 +1,6 @@
 import Size from '../../geo/Size';
 import { Geometry, Marker, Label } from '../../geometry';
-import DistanceTool from './DistanceTool';
+import DistanceTool, { DistanceToolOptions } from './DistanceTool';
 import Translator from '../../lang/translator';
 
 
@@ -12,7 +12,7 @@ export type AreaToolOptions = {
     vertexSymbol?: any,
     labelOptions?: any,
     mode?: string
-}
+} & DistanceToolOptions;
 
 /**
  * options 配置项说明
@@ -67,7 +67,8 @@ const options: AreaToolOptions = {
  *    'language' : 'en-US'
  *  }).addTo(map);
  */
-class AreaTool extends DistanceTool {    
+class AreaTool extends DistanceTool {
+    options: AreaToolOptions;
     /**
      * 配置项
      * 
@@ -80,17 +81,17 @@ class AreaTool extends DistanceTool {
      * @param options.vertexSymbol=null   - symbol of the vertice
      * @param options.labelOptions=null   - construct options of the vertice labels.
      */
-    constructor(options:AreaToolOptions) {
+    constructor(options: AreaToolOptions) {
         super(options);
         // this.on('enable', this._afterEnable, this)
         //     .on('disable', this._afterDisable, this);
-        this.translator = new Translator(this.options['language']);
+        this.translator = new Translator(this.options['language'] as any);
         this._measureLayers = [];
     }
 
-    _measure(toMeasure:Geometry|Array<any>) {
-        const map:any = this.getMap();
-        let area:number;
+    _measure(toMeasure: Geometry | Array<any>) {
+        const map: any = this.getMap();
+        let area: number;
         if (toMeasure instanceof Geometry) {
             area = map.computeGeometryArea(toMeasure);
         } else if (Array.isArray(toMeasure)) {
@@ -108,7 +109,7 @@ class AreaTool extends DistanceTool {
             this.translator.translate('areatool.units.feet'),
             this.translator.translate('areatool.units.mile')];
 
-        let content:string = '';
+        let content: string = '';
         const decimals = this.options['decimalPlaces'];
         if (this.options['metric']) {
             content += area < 1E6 ? area.toFixed(decimals) + units[0] : (area / 1E6).toFixed(decimals) + units[1];
@@ -124,11 +125,11 @@ class AreaTool extends DistanceTool {
         return content;
     }
 
-    _msGetCoordsToMeasure(param:any) {
+    _msGetCoordsToMeasure(param: any) {
         return param['geometry'].getShell().concat([param['coordinate']]);
     }
 
-    _msOnDrawVertex(param:any) {
+    _msOnDrawVertex(param: any) {
         // const prjCoord = this.getMap()._pointToPrj(param['point2d']);
         const lastCoordinate = this._getLasttCoordinate() || param.coordinate;
         const vertexMarker = new Marker(lastCoordinate.copy(), {
@@ -140,10 +141,10 @@ class AreaTool extends DistanceTool {
         this._addVertexMarker(vertexMarker);
     }
 
-    _msOnDrawEnd(param:any) {
+    _msOnDrawEnd(param: any) {
         this._clearTailMarker();
         let prjCoord;
-        const map:any = this.getMap()
+        const map: any = this.getMap()
         if (param['point2d']) {
             prjCoord = map._pointToPrj(param['point2d']);
         } else {
diff --git a/src/map/tool/DistanceTool.ts b/src/map/tool/DistanceTool.ts
index 77ea8cb5ba..723d3671c8 100644
--- a/src/map/tool/DistanceTool.ts
+++ b/src/map/tool/DistanceTool.ts
@@ -6,7 +6,7 @@ import Marker from '../../geometry/Marker';
 import Label from '../../geometry/Label';
 import VectorLayer from '../../layer/VectorLayer';
 import Translator from '../../lang/translator';
-import DrawTool from './DrawTool';
+import DrawTool, { DrawToolOptions } from './DrawTool';
 import Coordinate from '../../geo/Coordinate';
 import { VectorMarkerSymbol } from '../../symbol';
 
@@ -22,7 +22,7 @@ export type DistanceToolOptions = {
     formatLabelContent?: any,
     clearButtonSymbol?: any,
     zIndex?: number
-}
+} & DrawToolOptions;
 
 /**
  * 配置项说明
@@ -40,7 +40,7 @@ export type DistanceToolOptions = {
  * @memberOf DistanceTool
  * @instance
  */
-const options:DistanceToolOptions = {
+const options: DistanceToolOptions = {
     'formatLabelContent': null,
     'decimalPlaces': 2,
     'mode': 'LineString',
@@ -121,6 +121,7 @@ const options:DistanceToolOptions = {
  *
  */
 class DistanceTool extends DrawTool {
+    options: DistanceToolOptions;
     _measureLayers: Array<any>;
     translator: Translator;
     _tailMarker?: any;
@@ -146,7 +147,7 @@ class DistanceTool extends DrawTool {
         this.on('enable', this._afterEnable, this)
             .on('disable', this._afterDisable, this);
         this._measureLayers = [];
-        this.translator = new Translator(this.options['language']);
+        this.translator = new Translator(this.options['language'] as any);
     }
 
     /**
@@ -236,7 +237,7 @@ class DistanceTool extends DrawTool {
         return this;
     }
 
-    _formatLabelContent(params:any) {
+    _formatLabelContent(params: any) {
         const formatLabelContent = this.options.formatLabelContent;
         if (formatLabelContent && isFunction(formatLabelContent)) {
             return formatLabelContent.call(this, params) + '';
@@ -244,8 +245,8 @@ class DistanceTool extends DrawTool {
         return null;
     }
 
-    _measure(toMeasure:any) {
-        const map:any = this.getMap();
+    _measure(toMeasure: any) {
+        const map: any = this.getMap();
         let length;
         if (toMeasure instanceof Geometry) {
             length = map.computeGeometryLength(toMeasure);
@@ -297,8 +298,8 @@ class DistanceTool extends DrawTool {
             .off('drawend', this._msOnDrawEnd, this);
     }
 
-    _msOnDrawStart(param:any) {
-        const map:any = this.getMap();
+    _msOnDrawStart(param: any) {
+        const map: any = this.getMap();
         // const prjCoord = map._pointToPrj(param['point2d']);
         const uid = UID();
         const layerId = 'distancetool_' + uid;
@@ -335,7 +336,7 @@ class DistanceTool extends DrawTool {
         this._addVertexMarker(marker, startLabel);
     }
 
-    _msOnMouseMove(param:any) {
+    _msOnMouseMove(param: any) {
         const ms = this._measure(this._msGetCoordsToMeasure(param));
         if (!this._tailMarker) {
             const symbol = extendSymbol(this.options['vertexSymbol']);
@@ -357,11 +358,11 @@ class DistanceTool extends DrawTool {
         // this._tailLabel._setPrjCoordinates(lastCoord);
     }
 
-    _msGetCoordsToMeasure(param:any) {
+    _msGetCoordsToMeasure(param: any) {
         return param['geometry'].getCoordinates().concat([param['coordinate']]);
     }
 
-    _msOnDrawVertex(param:any) {
+    _msOnDrawVertex(param: any) {
         // const prjCoords = this._geometry._getPrjCoordinates();
         // const lastCoord = prjCoords[prjCoords.length - 1];
 
@@ -381,7 +382,7 @@ class DistanceTool extends DrawTool {
         this._lastVertex = vertexLabel;
     }
 
-    _addVertexMarker(marker:Marker, vertexLabel?:any) {
+    _addVertexMarker(marker: Marker, vertexLabel?: any) {
         if (!this._vertexes) {
             this._vertexes = [];
         }
@@ -395,7 +396,7 @@ class DistanceTool extends DrawTool {
         }
     }
 
-    _msOnDrawEnd(param:any) {
+    _msOnDrawEnd(param: any) {
         this._clearTailMarker();
         if (param['geometry'].getCoordinates().length < 2) {
             this._lastMeasure = 0;
@@ -416,7 +417,7 @@ class DistanceTool extends DrawTool {
         this._lastMeasure = geo.getLength();
     }
 
-    _addClearMarker(coordinates:Coordinate, prjCoord:any, dx:number|string) {
+    _addClearMarker(coordinates: Coordinate, prjCoord: any, dx: number | string) {
         let symbol = this.options['clearButtonSymbol'];
         let dxSymbol: any | Array<any> = {
             'markerDx': (symbol['markerDx'] || 0) + dx,
@@ -434,7 +435,7 @@ class DistanceTool extends DrawTool {
             });
         }
         symbol = extendSymbol(symbol, dxSymbol);
-        const endMarker:any = new Marker(coordinates, {
+        const endMarker: any = new Marker(coordinates, {
             'symbol': symbol
         });
         const measureLineLayer = this._measureLineLayer,
diff --git a/src/map/tool/DrawTool.ts b/src/map/tool/DrawTool.ts
index e61ac35a7d..2528e622dc 100644
--- a/src/map/tool/DrawTool.ts
+++ b/src/map/tool/DrawTool.ts
@@ -18,15 +18,17 @@ export type DrawToolOptions = {
     zIndex?: number,
     doubleClickZoom?: boolean,
     ignoreMouseleave?: boolean,
-    enableAltitude?: boolean
+    enableAltitude?: boolean,
+    interactive?: boolean,
+    edgeAutoComplete?: boolean
 }
 
 export type modeActionType = {
-    action?: string|Array<string>,
+    action?: string | Array<string>,
     create?: any,
     update?: any,
     generate?: any,
-    clickLimit?: number|string
+    clickLimit?: number | string
 }
 
 /**
@@ -40,6 +42,8 @@ export type modeActionType = {
  * @property {Boolean} [options.autoPanAtEdge=false]  - Whether to make edge judgement or not.
  * @property {Boolean} [options.blockGeometryEvents=false]  - Whether Disable geometryEvents when drawing.
  * @property {Number} [options.zIndex=Number.MAX_VALUE]  - drawlayer zIndex.The default drawn layer will be at the top
+ * @property {Boolean} [options.enableAltitude=true]  - enable altitude
+ * @property {Boolean} [options.interactive=true] - whether the mouse can be interactived.
  * @memberOf DrawTool
  * @instance
  */
@@ -58,7 +62,8 @@ const options: DrawToolOptions = {
     'ignoreMouseleave': true,
     'blockGeometryEvents': false,
     'zIndex': Number.MAX_VALUE,
-    'enableAltitude': true
+    'enableAltitude': true,
+    'interactive': true
 };
 
 const registeredMode = {};
@@ -81,6 +86,7 @@ const registeredMode = {};
  * }).addTo(map);
  */
 class DrawTool extends MapTool {
+    options: DrawToolOptions;
     _vertexes: Array<any>;
     _historyPointer: any;
     _events: any;
@@ -117,7 +123,7 @@ class DrawTool extends MapTool {
        }
      });
      */
-    static registerMode(name: string, modeAction:modeActionType) {
+    static registerMode(name: string, modeAction: modeActionType) {
         registeredMode[name.toLowerCase()] = modeAction;
     }
 
@@ -129,7 +135,7 @@ class DrawTool extends MapTool {
      * @param name      DrawTool mode name
      * @return          mode actions
      */
-    static getRegisterMode(name: string):any {
+    static getRegisterMode(name: string): any {
         return registeredMode[name.toLowerCase()];
     }
 
@@ -173,7 +179,7 @@ class DrawTool extends MapTool {
      * Get current mode of draw tool
      * @return mode
      */
-    getMode():string {
+    getMode(): string {
         if (this.options['mode']) {
             return this.options['mode'].toLowerCase();
         }
@@ -189,7 +195,7 @@ class DrawTool extends MapTool {
      * @returns {DrawTool} this
      * @expose
      */
-    setMode(mode:string):DrawTool {
+    setMode(mode: string): DrawTool {
         if (this._geometry) {
             this._geometry.remove();
             delete this._geometry;
@@ -213,7 +219,7 @@ class DrawTool extends MapTool {
      * Get symbol of the draw tool
      * @return symbol
      */
-    getSymbol():any {
+    getSymbol(): any {
         const symbol = this.options['symbol'];
         if (symbol) {
             return extendSymbol(symbol);
@@ -230,7 +236,7 @@ class DrawTool extends MapTool {
      * @param symbol - symbol set
      * @returns {DrawTool} this
      */
-    setSymbol(symbol:any):DrawTool {
+    setSymbol(symbol: any): DrawTool {
         if (!symbol) {
             return this;
         }
@@ -248,7 +254,7 @@ class DrawTool extends MapTool {
      * Get geometry is currently drawing
      * @return geometry currently drawing
      */
-    getCurrentGeometry():Geometry {
+    getCurrentGeometry(): Geometry {
         return this._geometry;
     }
 
@@ -300,7 +306,7 @@ class DrawTool extends MapTool {
      * Undo drawing, only applicable for click/dblclick mode
      * @return this
      */
-    undo():DrawTool {
+    undo() {
         const registerMode = this._getRegisterMode();
         const action = registerMode.action;
         if (!this._shouldRecordHistory(action) || !this._historyPointer) {
@@ -318,7 +324,7 @@ class DrawTool extends MapTool {
      * Redo drawing, only applicable for click/dblclick mode
      * @return this
      */
-    redo():DrawTool {
+    redo() {
         const registerMode = this._getRegisterMode();
         const action = registerMode.action;
         if (!this._shouldRecordHistory(action) || isNil(this._historyPointer) || this._historyPointer === this._clickCoords.length) {
@@ -423,7 +429,7 @@ class DrawTool extends MapTool {
      * @param event
      * @private
      */
-    _mouseDownHandler(event:any) {
+    _mouseDownHandler(event: any) {
         this._createGeometry(event);
     }
 
@@ -435,7 +441,7 @@ class DrawTool extends MapTool {
      * @param event
      * @private
      */
-    _mouseUpHandler(event:any) {
+    _mouseUpHandler(event: any) {
         this.endDraw(event);
     }
 
@@ -447,9 +453,12 @@ class DrawTool extends MapTool {
      * @param event
      * @private
      */
-    _clickHandler(event:any) {
+    _clickHandler(event: any) {
+        if (!this.options.interactive) {
+            return this;
+        }
         event.enableAltitude = this.options.enableAltitude;
-        const map:any = this.getMap();
+        const map: any = this.getMap();
         const registerMode = this._getRegisterMode();
         // const coordinate = event['coordinate'];
         //dbclick will trigger two click
@@ -521,9 +530,9 @@ class DrawTool extends MapTool {
      * @param event
      * @private
      */
-    _createGeometry(event:any) {
+    _createGeometry(event: any) {
         const mode = this.getMode();
-        const map:any = this.getMap()
+        const map: any = this.getMap()
         const registerMode = this._getRegisterMode();
         const prjCoord = map._pointToPrj(event['point2d']);
         const symbol = this.getSymbol();
@@ -596,8 +605,11 @@ class DrawTool extends MapTool {
      * @private
      */
     _mouseMoveHandler(event) {
+        if (!this.options.interactive) {
+            return this;
+        }
         event.enableAltitude = this.options.enableAltitude;
-        const map:any = this.getMap();
+        const map: any = this.getMap();
         if (!map || map.isInteracting()) {
             return;
         }
@@ -662,6 +674,9 @@ class DrawTool extends MapTool {
      * @private
      */
     _doubleClickHandler(event) {
+        if (!this.options.interactive) {
+            return this;
+        }
         event.enableAltitude = this.options.enableAltitude;
         if (!this._geometry) {
             return;
@@ -709,7 +724,7 @@ class DrawTool extends MapTool {
      * @param [param=null] params of drawend event
      * @returns this
      */
-    endDraw(param:any):DrawTool {
+    endDraw(param: any): DrawTool {
         if (!this._geometry || this._ending) {
             return this;
         }
@@ -761,7 +776,7 @@ class DrawTool extends MapTool {
      * @return
      * @private
      */
-    _getMouseContainerPoint(event:Event):Point {
+    _getMouseContainerPoint(event: Event): Point {
         const action = this._getRegisterMode()['action'];
         if (action[0].indexOf('mousedown') >= 0 || action[0].indexOf('touchstart') >= 0) {
             //prevent map's event propogation
@@ -783,7 +798,7 @@ class DrawTool extends MapTool {
     }
 
     _getSnapResult(snapTo, containerPoint) {
-        const map:any = this.getMap();
+        const map: any = this.getMap();
         const lastContainerPoints = [];
         if (this.options.edgeAutoComplete) {
             const lastCoord = this._clickCoords[(this._historyPointer || 1) - 1];
@@ -807,7 +822,7 @@ class DrawTool extends MapTool {
 
     _getDrawLayer() {
         const drawLayerId = INTERNAL_LAYER_PREFIX + 'drawtool';
-        let drawToolLayer:any = this._map.getLayer(drawLayerId);
+        let drawToolLayer: any = this._map.getLayer(drawLayerId);
         if (!drawToolLayer) {
             drawToolLayer = new VectorLayer(drawLayerId, {
                 'enableSimplify': false,
@@ -874,7 +889,7 @@ class DrawTool extends MapTool {
     * @param  {Number} zIndex -  draw layer zIndex
     * @return this
     */
-    setLayerZIndex(zIndex):DrawTool {
+    setLayerZIndex(zIndex: number) {
         if (!isNumber(zIndex)) {
             return this;
         }