diff --git a/src/map/constants.ts b/src/map/constants.ts new file mode 100644 index 0000000..ccd4df1 --- /dev/null +++ b/src/map/constants.ts @@ -0,0 +1,28 @@ +export const PolygonStroke = "#a5a5a5"; +export const PolylineStroke = "#4CBDD9"; +export const PolygonFill = "#35bbe6"; +export const SelectedStroke = "#d80242"; + +type OverlayOptions = AMap.PolygonOptions & AMap.PolylineOptions; + +export const PolygonOptions: OverlayOptions = { + strokeColor: PolygonStroke, + strokeOpacity: 1, + strokeWeight: 2, + fillColor: PolygonFill, + fillOpacity: 0.3, + strokeStyle: "solid", + cursor: "default", + draggable: false, + bubble: true, +}; + +export const PolylineOptions: OverlayOptions = { + strokeColor: PolylineStroke, + strokeOpacity: 1, + strokeWeight: 4, + strokeStyle: "solid", + cursor: "default", + draggable: false, + bubble: true, +}; diff --git a/src/map/editors/RectangleEditor.ts b/src/map/editors/RectangleEditor.ts index ba7aae8..ca66ebd 100644 --- a/src/map/editors/RectangleEditor.ts +++ b/src/map/editors/RectangleEditor.ts @@ -2,17 +2,6 @@ import { OverlayTypes } from "@types"; import { BaseOverlayEditor } from "./BaseOverlayEditor"; export class RectangleEditor extends BaseOverlayEditor { - // private _rect: AMap.Rectangle | undefined; - // constructor(map: AMap.Map) { - // super(map); - // this._rect = new AMap.Rectangle({ - // bounds: new AMap.Bounds( - // new AMap.LngLat(0, 0.001), - // new AMap.LngLat(0, 0.001) - // ), - // }); - // } - initEditor(map: AMap.Map) { return new AMap.RectangleEditor(map); } diff --git a/src/map/index.ts b/src/map/index.ts index f848e23..5705ec6 100644 --- a/src/map/index.ts +++ b/src/map/index.ts @@ -2,6 +2,8 @@ import Emitter from "@finevis/emitter"; import "@amap/amap-jsapi-types"; import { IMapState } from "@store"; +import { getOverlayPaths } from "@utils"; + import { BaseOverlayEditor, RectangleEditor, @@ -11,8 +13,9 @@ import { } from "./editors"; import { registerHotkey } from "../utils/hotkeys"; -import { EventTypes } from "../types/enum"; -import { getOverlayPaths } from "@utils"; +import { PolygonOptions, PolylineOptions } from "./constants"; + +import { EventTypes, OverlayTypes } from "../types/enum"; let uuid = 0; const getUuid = () => ++uuid; @@ -73,18 +76,22 @@ export class MapEditor extends Emitter { finishCreateOverlay() { if (this._currentOverlayEditor == null) return; const target = this._currentOverlayEditor.finish(); - let evt: any = null; - if (target != null) { - const id = getUuid(); - const type = this._currentOverlayEditor.getType(); - this.overlayMap[id] = target; - evt = { - id, - type, - path: getOverlayPaths(target, type), - }; + if (target == null) return; + const id = getUuid(); + const type = this._currentOverlayEditor.getType(); + this.overlayMap[id] = target; + const evt: any = { id, type }; + if (type === OverlayTypes.Circle) { + const circle = target as AMap.Circle; + evt.lngLat = circle.getCenter(); + evt.radius = circle.getRadius(); + } else { + evt.path = getOverlayPaths(target, type); } - evt && this.emit(EventTypes.FinishCreateOverlay, evt); + target.setOptions( + type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions + ); + this.emit(EventTypes.FinishCreateOverlay, evt); } initEditors() { diff --git a/src/store/type.ts b/src/store/type.ts index ce3d5d8..d5ff051 100644 --- a/src/store/type.ts +++ b/src/store/type.ts @@ -6,6 +6,7 @@ export interface IOverlay { type: OverlayTypes; lngLat?: number[]; paths?: number[][]; + radius?: number; } export interface IMapState { diff --git a/src/types/index.ts b/src/types/index.ts index a2cd640..33d7790 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -6,7 +6,11 @@ declare global { interface IBaseEditor { // new (map: AMap.Map): any; } - type MapOverlay = AMap.Rectangle | AMap.Polygon | AMap.Polyline; + type MapOverlay = + | AMap.Rectangle + | AMap.Polygon + | AMap.Polyline + | AMap.Circle; class BaseEditor implements IBaseEditor { constructor(map: AMap.Map); setTarget(target: any): void;