使用overlays不进行分类

src/editor/Catalog/index.tsx

@@ -6,6 +6,7 @@ import { IOverlay } from "@map";
 
 import "./style.less";
 import classNames from "classnames";
+import { OverlayTypes } from "../../types/enum";
 
 const { Panel } = Collapse;
 
@@ -36,8 +37,28 @@ const OverlayList = (props: OverlayListProps) => {
 };
 
 const Catalog = () => {
-  const { rectangles, polygons, polylines, circles } =
-    useSelector(mapOptionsSelector);
+  const { overlays } = useSelector(mapOptionsSelector);
+  const rectangles: IOverlay[] = [],
+    polygons: IOverlay[] = [],
+    polylines: IOverlay[] = [],
+    circles: IOverlay[] = [];
+
+  overlays.forEach((overlay) => {
+    switch (overlay.type) {
+      case OverlayTypes.Rectangle:
+        rectangles.push(overlay);
+        break;
+      case OverlayTypes.Polygon:
+        polygons.push(overlay);
+        break;
+      case OverlayTypes.Polyline:
+        polylines.push(overlay);
+        break;
+      default:
+        circles.push(overlay);
+    }
+  });
+
   return (
     <Collapse
       defaultActiveKey={["1", "2", "3", "4"]}

src/editor/Property/index.tsx

@@ -1,4 +1,9 @@
+import { useSelector } from "react-redux";
+import { selectedIdsSelector, mapOptionsSelector } from "@store";
+
 const Property = () => {
+  const selectedIds = useSelector(selectedIdsSelector);
+  // const {  } = useSelector(mapOptionsSelector);
   return <h1>属性区域</h1>;
 };
 

src/map/MapEditor.ts

@@ -16,7 +16,6 @@ import { IMapOptions, IMapEditor } from "./type";
 import { PolygonOptions, PolylineOptions, SelectedOptions } from "./constants";
 
 import { EventTypes, OverlayTypes } from "../types/enum";
-import { Position } from "geojson";
 
 type AMapOverlayEditor =
   | AMap.RectangleEditor
@@ -95,16 +94,22 @@ export class MapEditor extends Emitter implements IMapEditor {
   getEditorByType(overlayType: OverlayTypes) {
     return this.overlayEditors.find(
       (editor) => editor.getType() === overlayType
-    );
+    )!;
   }
 
   importProject(options: IMapOptions) {
     this.clearOverlays();
-    const { rectangles, polygons, polylines, circles } = options;
-    const rectangleEditor = this.getEditorByType(OverlayTypes.Rectangle);
-    const polygonEditor = this.getEditorByType(OverlayTypes.Polygon);
-    const polylineEditor = this.getEditorByType(OverlayTypes.Polyline);
-    const circleEditor = this.getEditorByType(OverlayTypes.Circle);
+    const { overlays } = options;
+
+    const overlayEditors: Record<
+      OverlayTypes,
+      BaseOverlayEditor<AMapOverlayEditor>
+    > = {
+      [OverlayTypes.Rectangle]: this.getEditorByType(OverlayTypes.Rectangle),
+      [OverlayTypes.Polygon]: this.getEditorByType(OverlayTypes.Polygon),
+      [OverlayTypes.Polyline]: this.getEditorByType(OverlayTypes.Polyline),
+      [OverlayTypes.Circle]: this.getEditorByType(OverlayTypes.Circle),
+    };
 
     if (options.center) {
       const [lng, lat] = options.center;
@@ -114,11 +119,9 @@ export class MapEditor extends Emitter implements IMapEditor {
       this.map.setZoom(options.zoom);
     }
 
-    const addOverlay = (
-      id: string,
-      target: AMap.MapOverlay,
-      type: OverlayTypes
-    ) => {
+    overlays.forEach((overlay) => {
+      const { type, id } = overlay;
+      const target = overlayEditors[type].build(overlay);
       this.overlayMap[id] = {
         type,
         target,
@@ -127,28 +130,7 @@ export class MapEditor extends Emitter implements IMapEditor {
         type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions
       );
       this.map.add(target);
-    };
-
-    rectangles.forEach((rect) =>
-      addOverlay(rect.id, rectangleEditor!.build(rect), OverlayTypes.Rectangle)
-    );
-    polygons.forEach((polygon) =>
-      addOverlay(
-        polygon.id,
-        polygonEditor!.build(polygon),
-        OverlayTypes.Polygon
-      )
-    );
-    polylines.forEach((polyline) =>
-      addOverlay(
-        polyline.id,
-        polylineEditor!.build(polyline),
-        OverlayTypes.Polyline
-      )
-    );
-    circles.forEach((circle) =>
-      addOverlay(circle.id, circleEditor!.build(circle), OverlayTypes.Circle)
-    );
+    });
   }
 
   importGeoJSON(geojson: GeoJSON.FeatureCollection): void {

src/map/type.ts

@@ -20,13 +20,12 @@ export interface IOverlay {
   lngLat?: GeoJSON.Position;
   path?: GeoJSON.Position[];
   radius?: number;
+  backgroundImage?: string;
+  category?: string;
+  height?: string;
 }
 export interface IMapOptions {
-  polygons: IOverlay[];
-  polylines: IOverlay[];
-  circles: IOverlay[];
-  rectangles: IOverlay[];
-  selectedIds?: string[];
+  overlays: IOverlay[];
   center?: GeoJSON.Position;
   zoom?: number;
 }

src/store/actions/index.ts

@@ -50,9 +50,14 @@ export class EditorAction {
 
     setInterval(() => {
       const { mapOptions } = this;
-      mapOptions.center = this.mapEditor?.getCenter();
-      mapOptions.zoom = this.mapEditor?.getZoom();
-      sessionStorage.setItem("fine-geojson", JSON.stringify(mapOptions));
+      sessionStorage.setItem(
+        "fine-geojson",
+        JSON.stringify({
+          ...mapOptions,
+          center: this.mapEditor?.getCenter(),
+          zoom: this.mapEditor?.getZoom(),
+        })
+      );
     }, 10000);
   }
   // ---------- public methods -------------

src/store/initState.ts

@@ -5,9 +5,6 @@ export const initState: IEditorState = {
   overlayType: null,
   selectedIds: [],
   map: {
-    polygons: [],
-    polylines: [],
-    circles: [],
-    rectangles: [],
+    overlays: [],
   },
 };

src/store/reducers/map/index.ts

@@ -18,12 +18,10 @@ export function clearOverlays(state = initState) {
 export function deleteOverlays(state = initState, payload: any) {
   const { selectedIds } = state;
   const [id] = selectedIds!;
-  const filterFunc = (overlay: IOverlay) => overlay.id !== id;
   return produce(state, (draft) => {
-    draft.map.rectangles = draft.map.rectangles.filter(filterFunc);
-    draft.map.polygons = draft.map.polygons.filter(filterFunc);
-    draft.map.polylines = draft.map.polylines.filter(filterFunc);
-    draft.map.circles = draft.map.circles.filter(filterFunc);
+    draft.map.overlays = draft.map.overlays.filter(
+      (overlay: IOverlay) => overlay.id !== id
+    );
     draft.selectedIds = [];
   });
 }
@@ -34,14 +32,7 @@ export function finishEditOverlay(state = initState, payload: any) {
     const { type, id } = overlay;
     // todo: uniqueName.
     overlay.name = OverlayNamePrefixs[type] + overlay.id;
-    const overlays =
-      type === OverlayTypes.Rectangle
-        ? draft.map.rectangles
-        : type === OverlayTypes.Circle
-        ? draft.map.circles
-        : type === OverlayTypes.Polygon
-        ? draft.map.polygons
-        : draft.map.polylines;
+    const { overlays } = draft.map;
     const existed = overlays.find((overlay) => overlay.id === id);
     if (existed) {
       overlays[overlays.indexOf(existed)] = overlay;