From 9f48941026bb3dd6ffc78faa15f0a3e18f4c566f Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Mon, 7 Mar 2022 19:41:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=BF=AB=E6=8D=B7=E9=94=AE?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Menu/Help.tsx      | 117 ++++++++++++++++++++++++++++++++++
 src/editor/Menu/index.tsx     |   2 +
 src/store/utils/getGeoJSON.ts |  22 +++----
 3 files changed, 130 insertions(+), 11 deletions(-)
 create mode 100644 src/editor/Menu/Help.tsx

diff --git a/src/editor/Menu/Help.tsx b/src/editor/Menu/Help.tsx
new file mode 100644
index 0000000..8edd02d
--- /dev/null
+++ b/src/editor/Menu/Help.tsx
@@ -0,0 +1,117 @@
+import { message, Modal, Table } from "antd";
+import { useState } from "react";
+import MenuGroup from "./MenuGroup";
+
+const Hotkeys = [
+  {
+    key: "Alt + O",
+    condition: "",
+    description: "打开GeoJSON",
+  },
+  {
+    key: "Ctrl + Alt + O",
+    condition: "",
+    description: "打开工程文件",
+  },
+  {
+    key: "Alt + S",
+    condition: "",
+    description: "暂存工程至浏览器缓存",
+  },
+  {
+    key: "Ctrl + S",
+    condition: "",
+    description: "导出GeoJSON",
+  },
+  {
+    key: "Ctrl + Alt + S",
+    condition: "",
+    description: "导出工程",
+  },
+  {
+    key: "Alt + C",
+    condition: "",
+    description: "清空所有覆盖物",
+  },
+  {
+    key: "Alt + 1",
+    condition: "",
+    description: "创建矩形覆盖物",
+  },
+  {
+    key: "Alt + 2",
+    condition: "",
+    description: "创建多边形覆盖物",
+  },
+  {
+    key: "Alt + 3",
+    condition: "",
+    description: "创建多段线覆盖物",
+  },
+  {
+    key: "Alt + 4",
+    condition: "",
+    description: "创建圆形覆盖物",
+  },
+  {
+    key: "Alt + D",
+    condition: "选中覆盖物",
+    description: "复制选中的覆盖物",
+  },
+  {
+    key: "Space",
+    condition: "正在创建/编辑覆盖物",
+    description: "完成创建/编辑覆盖物",
+  },
+  {
+    key: "Delete",
+    condition: "选中覆盖物",
+    description: "删除选中覆盖物",
+  },
+];
+
+const TableColumns = [
+  { title: "快捷键", key: "key", dataIndex: "key" },
+  { title: "先决条件", key: "condition", dataIndex: "condition" },
+  { title: "作用", key: "description", dataIndex: "description" },
+];
+
+const HelpMenu = () => {
+  const onDocMenuClick = () => message.info("文档正在积极建设中");
+  const [hotkeyModalVisible, setHotkeyModalVisible] = useState(false);
+
+  return (
+    <>
+      <MenuGroup
+        {...{
+          name: "帮助",
+          items: [
+            {
+              name: "文档",
+              onClick: onDocMenuClick,
+            },
+            {
+              name: "快捷键",
+              onClick: () => setHotkeyModalVisible(true),
+            },
+          ],
+        }}
+      />
+      <Modal
+        width={640}
+        footer={[]}
+        visible={hotkeyModalVisible}
+        onCancel={() => setHotkeyModalVisible(false)}
+      >
+        <Table
+          dataSource={Hotkeys}
+          columns={TableColumns}
+          pagination={false}
+          scroll={{ y: 480 }}
+        ></Table>
+      </Modal>
+    </>
+  );
+};
+
+export default HelpMenu;
diff --git a/src/editor/Menu/index.tsx b/src/editor/Menu/index.tsx
index fecfc00..d7cee5e 100644
--- a/src/editor/Menu/index.tsx
+++ b/src/editor/Menu/index.tsx
@@ -1,5 +1,6 @@
 import FileMenu from "./File";
 import EditMenu from "./Edit";
+import HelpMenu from "./Help";
 
 import "./style.less";
 
@@ -8,6 +9,7 @@ const Menu = () => {
     <>
       <FileMenu />
       <EditMenu />
+      <HelpMenu />
     </>
   );
 };
diff --git a/src/store/utils/getGeoJSON.ts b/src/store/utils/getGeoJSON.ts
index 1382b41..bad2d7d 100644
--- a/src/store/utils/getGeoJSON.ts
+++ b/src/store/utils/getGeoJSON.ts
@@ -15,6 +15,7 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
     overlay: IOverlay,
     restProperties: GeoJSON.GeoJsonProperties = {}
   ) => {
+    coordinates = coordinates.map((shape) => shape.map((pos) => [...pos]));
     const properties: GeoJSON.GeoJsonProperties = {
       ...restProperties,
       fineType: overlay.type,
@@ -29,19 +30,18 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
       properties.water = true;
     }
 
-    coordinates = coordinates.map((coord) => {
-      if (turf.booleanClockwise(coord)) {
-        coord = coord.slice().reverse();
+    coordinates.forEach((shape) => {
+      if (turf.booleanClockwise(shape)) {
+        shape = shape.reverse();
       }
       // 闭合.
-      if (coord.length > 2) {
-        const [fLng, fLat] = coord[0];
-        const [lLng, lLat] = coord[coord.length - 1];
+      if (shape.length > 2) {
+        const [fLng, fLat] = shape[0];
+        const [lLng, lLat] = shape[shape.length - 1];
         if (fLng !== lLng || fLat !== lLat) {
-          coord.push([...coord[0]]);
+          shape.push([...shape[0]]);
         }
       }
-      return coord;
     });
     features.push({
       type: "Feature",
@@ -127,7 +127,7 @@ function getLngLatWithDistance(
   ];
 }
 
-function convertCoord(position: GeoJSON.Position) {
+function convertPosition(position: GeoJSON.Position) {
   const { lng, lat } = gcj02_To_gps84(position[0], position[1]);
   position[0] = lng;
   position[1] = lat;
@@ -141,11 +141,11 @@ function convertFeatures(features: GeoJSON.Feature[]) {
 
     if (type === "LineString") {
       const { coordinates } = geometry as GeoJSON.LineString;
-      coordinates.map(convertCoord);
+      coordinates.map(convertPosition);
       // coordinates.map(convertCoord);
     } else if (type === "Polygon") {
       const { coordinates } = geometry as GeoJSON.Polygon;
-      coordinates[0].map(convertCoord);
+      coordinates[0].map(convertPosition);
     }
   });
 }