默认三维城市地理类型&导出

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

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;

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 {