From ddd256b4cf114ed76d8b65f9a3ad2b0fa3392bd0 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Wed, 19 Jun 2024 10:29:41 +0800 Subject: [PATCH] DrawTool support interactive control (#2345) * DrawTool support block mouse Interaction * fix typing * fix typing * rename blockMouseInteraction to interactive --- src/map/tool/AreaTool.ts | 27 +++++++-------- src/map/tool/DistanceTool.ts | 33 +++++++++--------- src/map/tool/DrawTool.ts | 65 ++++++++++++++++++++++-------------- 3 files changed, 71 insertions(+), 54 deletions(-) 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) { - const map:any = this.getMap(); - let area:number; + _measure(toMeasure: Geometry | Array) { + 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; 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 = { '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, + action?: string | Array, 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; _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; }