DrawTool support interactive control (#2345)

* DrawTool support block mouse Interaction * fix typing * fix typing * rename blockMouseInteraction to interactive
maptalks · Jun 19, 2024 · ddd256b · ddd256b
1 parent cf102c7
commit ddd256b
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 54 deletions.
diff --git 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
@@ -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,16 +237,16 @@ 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) + '';
         }
         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,