导入geojson并转换坐标

src/store/utils/getGeoJSON.ts

@@ -64,7 +64,7 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
   overlays
     .filter((overlay) => overlay.type === OverlayTypes.Polyline)
     .forEach((polyline) => {
-      const path = polyline.path!;
+      const path = polyline.path!.map((pos) => [...pos]);
       const properties: GeoJSON.GeoJsonProperties = {
         fineType: OverlayTypes.Polyline,
       };

src/store/utils/getMapOptions.ts

@@ -1,18 +1,32 @@
-import { IMapOptions, IOverlay } from "@map";
+import { IMapOptions, IOverlay, OverlayCategory } from "@map";
 import { OverlayTypes } from "@types";
-import { getUID } from "@utils";
+import { getUID, gps84_To_gcj02 } from "@utils";
 
 export function getMapOptions(geojson: GeoJSON.FeatureCollection) {
   const { features } = geojson;
   const mapOptions: IMapOptions = {
     overlays: [],
   };
+  let maxLat = -90,
+    minLat = 90,
+    maxLng = -180,
+    minLng = 180;
+
+  const updateBounds = (path: GeoJSON.Position[]) => {
+    path.forEach(([lng, lat]) => {
+      minLat = Math.min(lat, minLat);
+      maxLat = Math.max(lat, maxLat);
+      minLng = Math.min(lng, minLng);
+      maxLng = Math.max(lng, maxLng);
+    });
+  };
 
   const addPolygon = (feature: GeoJSON.Feature) => {
     const { geometry, properties } = feature;
-    const { name, fineType, lngLat, radius } = properties as any;
+    const { name, fineType, lngLat, radius, building, water, grass, height } =
+      properties as any;
     const { coordinates } = geometry as GeoJSON.Polygon;
-    const [path] = coordinates;
+    const path = convertPath(coordinates[0]);
     const overlay: IOverlay = {
       id: getUID(),
       name,
@@ -29,11 +43,34 @@ export function getMapOptions(geojson: GeoJSON.FeatureCollection) {
       overlay.type = OverlayTypes.Polygon;
       overlay.path = path;
     }
+
+    updateBounds(path);
+
+    overlay.category = building
+      ? OverlayCategory.Building
+      : grass
+      ? OverlayCategory.Grass
+      : water
+      ? OverlayCategory.Water
+      : undefined;
+    overlay.height = height;
+
     mapOptions.overlays.push(overlay);
   };
 
   const addPolyline = (feature: GeoJSON.Feature) => {
-    //
+    const { geometry, properties } = feature;
+    const { name, road } = properties as any;
+    const { coordinates } = geometry as GeoJSON.LineString;
+    const overlay: IOverlay = {
+      id: getUID(),
+      name,
+      type: OverlayTypes.Polyline,
+      category: road ? OverlayCategory.Road : undefined,
+      path: convertPath(coordinates),
+    };
+    mapOptions.overlays.push(overlay);
+    updateBounds(coordinates);
   };
 
   features.forEach((feature) => {
@@ -46,5 +83,17 @@ export function getMapOptions(geojson: GeoJSON.FeatureCollection) {
     }
   });
 
+  mapOptions.center = [(maxLng + minLng) / 2, (maxLat + minLat) / 2];
+  // 先写个16吧, 懒得算了.
+  mapOptions.zoom = 16;
+
   return mapOptions;
 }
+
+function convertPath(path: GeoJSON.Position[]) {
+  return path.map((pos) => {
+    let [lng, lat] = pos;
+    ({ lng, lat } = gps84_To_gcj02(lng, lat));
+    return [lng, lat];
+  });
+}

src/utils/covert.d.ts

@@ -3,4 +3,9 @@ declare function gcj02_To_gps84(
   lat: number
 ): { lng: number; lat: number };
 
-export { gcj02_To_gps84 };
+declare function gps84_To_gcj02(
+  lng: number,
+  lat: number
+): { lng: number; lat: number };
+
+export { gcj02_To_gps84, gps84_To_gcj02 };