overlay默认样式

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,
+};

src/map/editors/RectangleEditor.ts

@@ -2,17 +2,6 @@ import { OverlayTypes } from "@types";
 import { BaseOverlayEditor } from "./BaseOverlayEditor";
 
 export class RectangleEditor extends BaseOverlayEditor<AMap.RectangleEditor> {
-  // 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);
   }

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 { PolygonOptions, PolylineOptions } from "./constants";
-import { getOverlayPaths } from "@utils";
+
+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) return;
-    if (target != null) {
+    const id = getUuid();
-      const id = getUuid();
+    const type = this._currentOverlayEditor.getType();
-      const type = this._currentOverlayEditor.getType();
+    this.overlayMap[id] = target;
-      this.overlayMap[id] = target;
+    const evt: any = { id, type };
-      evt = {
+    if (type === OverlayTypes.Circle) {
-        id,
+      const circle = target as AMap.Circle;
-        type,
+      evt.lngLat = circle.getCenter();
-        path: getOverlayPaths(target, type),
+      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() {

src/store/type.ts

@@ -6,6 +6,7 @@ export interface IOverlay {
   type: OverlayTypes;
   lngLat?: number[];
   paths?: number[][];
+  radius?: number;
 }
 
 export interface IMapState {

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;