From 33fdd4f40efb671bc3c7e35cd1b6dec13348037c Mon Sep 17 00:00:00 2001 From: Cmen <1176967590@qq.com> Date: Sun, 6 Mar 2022 16:47:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8overlays=E4=B8=8D=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E5=88=86=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/Catalog/index.tsx | 25 +++++++++++++++-- src/editor/Property/index.tsx | 5 ++++ src/map/MapEditor.ts | 50 +++++++++++---------------------- src/map/type.ts | 9 +++--- src/store/actions/index.ts | 11 ++++++-- src/store/initState.ts | 5 +--- src/store/reducers/map/index.ts | 17 +++-------- 7 files changed, 61 insertions(+), 61 deletions(-) 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 ( { + const selectedIds = useSelector(selectedIdsSelector); + // const { } = useSelector(mapOptionsSelector); return

属性区域

; }; 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 + > = { + [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;