Browse Source

新增快捷键面板

master
Cmen 3 years ago
parent
commit
9f48941026
  1. 117
      src/editor/Menu/Help.tsx
  2. 2
      src/editor/Menu/index.tsx
  3. 22
      src/store/utils/getGeoJSON.ts

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

2
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 />
</>
);
};

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

Loading…
Cancel
Save