初始化工具布局

src/editor/Plot/Tools/index.tsx

@@ -0,0 +1,21 @@
+
+const Tools = () => {
+  return (
+    <>
+      <div className="marker-tools">
+        <span className="icon icon-rect"></span>
+        <span className="icon icon-circle"></span>
+      </div>
+      <div className="common-tools">
+        <div className="tools-group">
+          <span className="icon icon-search"></span>
+        </div>
+        <div className="tools-group">
+        <span className="icon icon-select"></span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Tools;

src/editor/Plot/index.less

@@ -4,6 +4,7 @@
   height: calc(100% - 40px);
   top: 40px;
   left: 0;
+  z-index: 0;
 }
 .tools-properties{
   position: absolute;
@@ -11,4 +12,32 @@
   height: 40px;
   background-color: #fff;
   border-bottom: 1px solid #ccc;
+}
+.tools-area{
+  margin-top: 40px;
+  padding: 20px;
+  position: relative;
+  z-index: 10;
+  .marker-tools{
+    background-color: rgb(105, 105, 105);
+    border-radius: 4px;
+    display: inline-block;
+    color: #fff;
+    .icon{
+      border-right: 1px dashed rgb(168, 168, 168);
+    }
+  }
+  .common-tools{
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    .tools-group{
+      width: 26px;
+      background-color: #fff;
+      display: inline-block;
+      border-radius: 4px;
+      margin-top: 4px;
+      box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
+    }
+  }
 }

src/editor/Plot/index.tsx

@@ -1,7 +1,7 @@
 import { Layout } from "antd";
 import { useEffect, useRef } from "react";
 import { MapStage } from "../../mapStage";
-
+import Tools from "./Tools";
 
 import "./index.less";
 
@@ -20,7 +20,9 @@ const Plot = () => {
     <>
       <div className="map-stage" ref={mapStageRef}></div>
       <div className="tools-properties"></div>
-      <div className="tools-area"></div>
+      <div className="tools-area">
+        <Tools />
+      </div>
     </>
   );
 };

src/icon.less

@@ -0,0 +1,78 @@
+@font-face {
+  font-family: 'iconfont';  /* Project id 2872894 */
+  src: url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff2?t=1642594908994') format('woff2'),
+       url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff?t=1642594908994') format('woff'),
+       url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.ttf?t=1642594908994') format('truetype');
+}
+.icon{
+  font-family: 'iconfont';
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+  font-weight: bold;
+  user-select: none;
+  outline: none;
+  padding: 3px 6px;
+  display: inline-block;
+}
+.icon-boundary:after{
+  content: '\e7a9'; 
+}
+.icon-confirm:after{
+  content: '\e618';
+}
+.icon-export:after{
+  content: '\e791';
+}
+.icon-polygon:after{
+  content: '\e67b';
+}
+.icon-ellipse:after{
+  content: '\e610';
+}
+.icon-polyline:after{
+  content: '\e68f';
+}
+.icon-edit:after{
+  content: '\e609';
+}
+.icon-delete:after{
+  content: '\e61c';
+}
+.icon-search:after{
+  content: '\e600';
+}
+.icon-select:after{
+  content: '\e607';
+}
+.icon-help:after{
+  content: '\e752';
+}
+.icon-import:after{
+  content: '\e792';
+}
+.icon-open:after{
+  content: '\eddb'
+}
+.icon-save:after{
+  content: '\eddc';
+}
+.icon-setting:after{
+  content: '\e78e';
+}
+.icon-location:after{
+  content: '\e793';
+}
+.icon-rect:after{
+  content: '\e604';
+}
+.icon-circle:after{
+  content: '\edf8';
+}
+.icon-selected{
+  color: rgb(31, 107, 206);
+}
+.icon-disable{
+  color: rgb(155, 155, 155);
+  cursor: default;
+}

src/index.less

@@ -1,3 +1,5 @@
+@import "./icon.less";
+
 html, body{
   margin: 0;
   padding: 0;