diff --git a/src/editor/Catalog/index.tsx b/src/editor/Catalog/index.tsx
index 4cafd06..739e846 100644
--- a/src/editor/Catalog/index.tsx
+++ b/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"]}
diff --git a/src/editor/Property/index.tsx b/src/editor/Property/index.tsx
index b537945..2600cb3 100644
--- a/src/editor/Property/index.tsx
+++ b/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>;
};
diff --git a/src/map/MapEditor.ts b/src/map/MapEditor.ts
index 37b84d4..5bd40e6 100644
--- a/src/map/MapEditor.ts
+++ b/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 {
diff --git a/src/map/type.ts b/src/map/type.ts
index f751305..65029b7 100644
--- a/src/map/type.ts
+++ b/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;
}
diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts
index 1de9b94..9c14b71 100644
--- a/src/store/actions/index.ts
+++ b/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 -------------
diff --git a/src/store/initState.ts b/src/store/initState.ts
index 57119bb..f83cf34 100644
--- a/src/store/initState.ts
+++ b/src/store/initState.ts
@@ -5,9 +5,6 @@ export const initState: IEditorState = {
overlayType: null,
selectedIds: [],
map: {
- polygons: [],
- polylines: [],
- circles: [],
- rectangles: [],
+ overlays: [],
},
};
diff --git a/src/store/reducers/map/index.ts b/src/store/reducers/map/index.ts
index d576cb4..ee00246 100644
--- a/src/store/reducers/map/index.ts
+++ b/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;