逆时针导出&坐标转换

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@finevis/emitter": "^1.0.4",
+    "@turf/turf": "^6.5.0",
     "antd": "^4.16.13",
     "classnames": "^2.3.1",
     "immer": "^9.0.7",

src/editor/Property/index.less

@@ -1,22 +1,22 @@
-.property-area{
+.property-area {
   padding: 8px;
 }
-.overlay-background{
+.overlay-background {
   background-size: cover;
 }
-.overlay-background-upload{
+.overlay-background-upload {
   display: inline-block;
   width: 100%;
   height: 120px;
   line-height: 120px;
   text-align: center;
   vertical-align: middle;
-  background-color: rgba(0, 0, 0, .2);
+  background-color: rgba(0, 0, 0, 0.2);
   border: 1px dashed #d9d9d9;
   border-radius: 2px;
   cursor: pointer;
-  transition: border-color .3s;
+  transition: border-color 0.3s;
 }
-.ant-form-item .ant-upload{
+.ant-form-item .ant-upload {
   color: #fff;
-}
+}

src/store/utils/getGeoJSON.ts

@@ -1,5 +1,7 @@
-import { OverlayTypes } from "../../types/enum";
+import { OverlayTypes } from "@types";
 import { IMapOptions, IOverlay, OverlayCategory } from "@map";
+import { gcj02_To_gps84 } from "@utils";
+import * as turf from "@turf/turf";
 
 const EarthRadius = 6378137;
 
@@ -26,6 +28,20 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
     } else if (category === OverlayCategory.Water) {
       properties.water = true;
     }
+
+    coordinates.forEach((coord) => {
+      if (turf.booleanClockwise(coord)) {
+        coord.reverse();
+      }
+      // 闭合.
+      if (coord.length > 2) {
+        const [fLng, fLat] = coord[0];
+        const [lLng, lLat] = coord[coord.length - 1];
+        if (fLng !== lLng || fLat !== lLat) {
+          coord.push([...coord[0]]);
+        }
+      }
+    });
     features.push({
       type: "Feature",
       geometry: {
@@ -74,6 +90,8 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
       addPolygonFeature([path], circle, { center, radius });
     });
 
+  convertFeatures(features);
+
   return {
     type: "FeatureCollection",
     features,
@@ -107,3 +125,26 @@ function getLngLatWithDistance(
     lat + distance * Math.sin(direction),
   ];
 }
+
+function convertCoord(position: GeoJSON.Position) {
+  const { lng, lat } = gcj02_To_gps84(position[0], position[1]);
+  position[0] = lng;
+  position[1] = lat;
+  return position;
+}
+
+function convertFeatures(features: GeoJSON.Feature[]) {
+  features.forEach((feature) => {
+    const { geometry } = feature;
+    const { type } = geometry;
+
+    if (type === "LineString") {
+      const { coordinates } = geometry as GeoJSON.LineString;
+      coordinates.map(convertCoord);
+      // coordinates.map(convertCoord);
+    } else if (type === "Polygon") {
+      const { coordinates } = geometry as GeoJSON.Polygon;
+      coordinates[0].map(convertCoord);
+    }
+  });
+}

src/utils/covert.d.ts

@@ -0,0 +1,6 @@
+declare function gcj02_To_gps84(
+  lng: number,
+  lat: number
+): { lng: number; lat: number };
+
+export { gcj02_To_gps84 };

src/utils/covert.js

@@ -0,0 +1,130 @@
+export const bd09_To_gps84 = function (lng, lat) {
+  var gcj02 = bd09_To_gcj02(lng, lat);
+  var map84 = gcj02_To_gps84(gcj02.lng, gcj02.lat);
+  return map84;
+};
+/**84转百度*/
+export const gps84_To_bd09 = function (lng, lat) {
+  var gcj02 = gps84_To_gcj02(lng, lat);
+  var bd09 = gcj02_To_bd09(gcj02.lng, gcj02.lat);
+  return bd09;
+};
+/**84转火星*/
+export const gps84_To_gcj02 = function (lng, lat) {
+  var dLat = transformLat(lng - 105.0, lat - 35.0);
+  var dLng = transformLng(lng - 105.0, lat - 35.0);
+  var radLat = (lat / 180.0) * pi;
+  var magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  var sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * pi);
+  dLng = (dLng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * pi);
+  var mgLat = lat + dLat;
+  var mgLng = lng + dLng;
+  var newCoord = {
+    lng: mgLng,
+    lat: mgLat,
+  };
+  return newCoord;
+};
+/**火星转84*/
+export const gcj02_To_gps84 = function (lng, lat) {
+  var coord = transform(lng, lat);
+  var lontitude = lng * 2 - coord.lng;
+  var latitude = lat * 2 - coord.lat;
+  var newCoord = {
+    lng: lontitude,
+    lat: latitude,
+  };
+  return newCoord;
+};
+/**火星转百度*/
+export const gcj02_To_bd09 = function (x, y) {
+  var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
+  var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
+  var bd_lng = z * Math.cos(theta) + 0.0065;
+  var bd_lat = z * Math.sin(theta) + 0.006;
+  var newCoord = {
+    lng: bd_lng,
+    lat: bd_lat,
+  };
+  return newCoord;
+};
+/**百度转火星*/
+export const bd09_To_gcj02 = function (bd_lng, bd_lat) {
+  var x = bd_lng - 0.0065;
+  var y = bd_lat - 0.006;
+  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+  var gg_lng = z * Math.cos(theta);
+  var gg_lat = z * Math.sin(theta);
+  var newCoord = {
+    lng: gg_lng,
+    lat: gg_lat,
+  };
+  return newCoord;
+};
+
+var pi = 3.1415926535897932384626;
+var a = 6378245.0;
+var ee = 0.00669342162296594323;
+var x_pi = (pi * 3000.0) / 180.0;
+var R = 6378137;
+
+function transform(lng, lat) {
+  var dLat = transformLat(lng - 105.0, lat - 35.0);
+  var dLng = transformLng(lng - 105.0, lat - 35.0);
+  var radLat = (lat / 180.0) * pi;
+  var magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  var sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * pi);
+  dLng = (dLng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * pi);
+  var mgLat = lat + dLat;
+  var mgLng = lng + dLng;
+  var newCoord = {
+    lng: mgLng,
+    lat: mgLat,
+  };
+  return newCoord;
+}
+
+function transformLat(x, y) {
+  var ret =
+    -100.0 +
+    2.0 * x +
+    3.0 * y +
+    0.2 * y * y +
+    0.1 * x * y +
+    0.2 * Math.sqrt(Math.abs(x));
+  ret +=
+    ((20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(y * pi) + 40.0 * Math.sin((y / 3.0) * pi)) * 2.0) / 3.0;
+  ret +=
+    ((160.0 * Math.sin((y / 12.0) * pi) + 320 * Math.sin((y * pi) / 30.0)) *
+      2.0) /
+    3.0;
+  return ret;
+}
+
+function transformLng(x, y) {
+  var ret =
+    300.0 +
+    x +
+    2.0 * y +
+    0.1 * x * x +
+    0.1 * x * y +
+    0.1 * Math.sqrt(Math.abs(x));
+  ret +=
+    ((20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(x * pi) + 40.0 * Math.sin((x / 3.0) * pi)) * 2.0) / 3.0;
+  ret +=
+    ((150.0 * Math.sin((x / 12.0) * pi) + 300.0 * Math.sin((x / 30.0) * pi)) *
+      2.0) /
+    3.0;
+  return ret;
+}

src/utils/index.ts

@@ -4,6 +4,7 @@ import { OverlayTypes } from "@types";
 export * from "./hotkeys";
 export * from "./download";
 export * from "./upload";
+export * from "./covert";
 
 export function getUID() {
   return uid(12);