diff --git a/src/map/MapEditor.ts b/src/map/MapEditor.ts index 22be735..a65e8c4 100644 --- a/src/map/MapEditor.ts +++ b/src/map/MapEditor.ts @@ -11,7 +11,7 @@ import { CircleEditor, } from "./editors"; -import { IMapOptions, IMapEditor, IOverlay } from "./type"; +import { IMapOptions, IMapEditor } from "./type"; import { PolygonOptions, PolylineOptions, SelectedOptions } from "./constants"; @@ -143,7 +143,11 @@ export class MapEditor extends Emitter implements IMapEditor { for (let id in this.overlayMap) { this.map.remove(this.overlayMap[id].target); } + for (let id in this.imageLayerMap) { + this.map.remove(this.imageLayerMap[id]); + } this.overlayMap = {}; + this.imageLayerMap = {}; this.selectedIds = []; } @@ -211,13 +215,13 @@ export class MapEditor extends Emitter implements IMapEditor { let id = getUID(); if (isCreatingOverlay) { this._addOverlay(id, { type, target }); + target.setOptions( + type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions + ); } else { id = this.selectedIds[0]; } this._updateOverlay(id); - target.setOptions( - type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions - ); this.editorStatus = null; } diff --git a/src/store/reducers/map/index.ts b/src/store/reducers/map/index.ts index 2b08e67..ab57031 100644 --- a/src/store/reducers/map/index.ts +++ b/src/store/reducers/map/index.ts @@ -2,7 +2,7 @@ import produce from "immer"; import { initState } from "../../initState"; import { OverlayNamePrefixs } from "@store"; import { OverlayTypes, Status } from "@types"; -import { IOverlay } from "@map"; +import { IOverlay, OverlayCategory } from "@map"; export function createOverlay(state = initState, payload: OverlayTypes) { return produce(state, (draft) => { @@ -40,6 +40,13 @@ export function finishEditOverlay(state = initState, payload: any) { ...overlay, }; } else { + const isRoad = type === OverlayTypes.Polyline; + if (isRoad) { + overlay.category = OverlayCategory.Road; + } else { + overlay.category = OverlayCategory.Building; + overlay.height = 100; + } overlays.push(overlay); } draft.overlayType = null; diff --git a/src/store/utils/getGeoJSON.ts b/src/store/utils/getGeoJSON.ts index 096bbe1..31297e9 100644 --- a/src/store/utils/getGeoJSON.ts +++ b/src/store/utils/getGeoJSON.ts @@ -1,5 +1,5 @@ import { OverlayTypes } from "../../types/enum"; -import { IMapOptions } from "@map"; +import { IMapOptions, IOverlay, OverlayCategory } from "@map"; const EarthRadius = 6378137; @@ -8,52 +8,59 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection { const features: GeoJSON.Feature[] = []; const { overlays } = state; - overlays - .filter((overlay) => overlay.type === OverlayTypes.Rectangle) - .forEach((rect) => { - const path = rect.path!; - - features.push({ - type: "Feature", - geometry: { - type: "Polygon", - coordinates: [path], - }, - properties: { - fineType: OverlayTypes.Rectangle, - }, - }); + const addPolygonFeature = ( + coordinates: GeoJSON.Position[][], + overlay: IOverlay, + restProperties: GeoJSON.GeoJsonProperties = {} + ) => { + const properties: GeoJSON.GeoJsonProperties = { + ...restProperties, + fineType: overlay.type, + }; + const { category } = overlay; + if (category === OverlayCategory.Building) { + properties.building = true; + properties.height = overlay.height; + } else if (category === OverlayCategory.Grass) { + properties.grass = true; + } else if (category === OverlayCategory.Water) { + properties.water = true; + } + features.push({ + type: "Feature", + geometry: { + type: "Polygon", + coordinates, + }, + properties, }); + }; overlays - .filter((overlay) => overlay.type === OverlayTypes.Polygon) - .forEach((polygon) => { - const path = polygon.path!; - features.push({ - type: "Feature", - geometry: { - type: "Polygon", - coordinates: [path], - }, - properties: { - fineType: OverlayTypes.Polygon, - }, - }); - }); + .filter( + (overlay) => + overlay.type === OverlayTypes.Rectangle || + overlay.type === OverlayTypes.Polygon + ) + .forEach((rect) => addPolygonFeature([rect.path!], rect)); overlays .filter((overlay) => overlay.type === OverlayTypes.Polyline) .forEach((polyline) => { const path = polyline.path!; + const properties: GeoJSON.GeoJsonProperties = { + fineType: OverlayTypes.Polyline, + }; + if (polyline.category === OverlayCategory.Road) { + properties.road = true; + } features.push({ type: "Feature", geometry: { type: "LineString", coordinates: path, }, - properties: { - fineType: OverlayTypes.Polyline, - }, + properties, }); }); @@ -64,19 +71,7 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection { const radius = circle.radius!; const path = getCirclePath(center, radius); - - features.push({ - type: "Feature", - geometry: { - type: "Polygon", - coordinates: [path], - }, - properties: { - fineType: OverlayTypes.Circle, - center, - radius, - }, - }); + addPolygonFeature([path], circle, { center, radius }); }); return {