优化标绘demo工具条风格

Author: hhyu1

examples/css/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2870365 */
-  src: url('iconfont.woff2?t=1639987680083') format('woff2'),
-       url('iconfont.woff?t=1639987680083') format('woff'),
-       url('iconfont.ttf?t=1639987680083') format('truetype');
+  src: url('iconfont.woff2?t=1640312324096') format('woff2'),
+       url('iconfont.woff?t=1640312324096') format('woff'),
+       url('iconfont.ttf?t=1640312324096') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-copy2:before {
+  content: "\e629";
+}
+
+.icon-circle-wrong:before {
+  content: "\e69a";
+}
+
+.icon-copy1:before {
+  content: "\e628";
+}
+
 .icon-multiflag:before {
   content: "\e625";
 }

examples/css/iconfont/iconfont.ttf

@@ -13,8 +13,8 @@
     box-shadow: 0 0 3px #999;
     color: #f0f0f0;
     cursor: default;
-    font-size: 10px;
-    line-height: 12px;
+    font-size: 20px;
+    /* line-height: 12px; */
     /* text-indent: 3px; */
     position: absolute;
     /* top: 2px; */
@@ -29,9 +29,9 @@
     border: 0;
     outline: 0;
     font-family: Helvetica, Arial, sans-serif;
-    font-size: 18px;
+    font-size: 20px;
     font-weight: normal;
-    line-height: 30px;
+    line-height: 32px;
     color: #000;
     vertical-align: baseline;
     list-style-type: none;
@@ -46,7 +46,7 @@
     border: 2px solid rgba(0, 0, 0, 0.2);
     background-clip: padding-box;
     box-shadow: none;
-    width: 30px;
+    width: 32px;
     overflow: visible;
     /* box-shadow: 0 1px 5px rgba(0,0,0,0.65); */
     border-radius: 4px;
@@ -64,9 +64,9 @@
 .plotting-menu > li,
 .plotting-menu > li:hover {
 	background-color: #fff;
-	border-bottom: 1px solid #ccc;
-	width: 30px;
-	height: 30px;
+	border-bottom: 0px solid #ccc;
+	width: 32px;
+	height: 32px;
 	/* line-height: 18px; */
 	display: block;
 	/* text-align: center; */
@@ -104,7 +104,7 @@
 /*    background-position: 8px;
     background-repeat: no-repeat; */
     color: #000;
-    font-size: 18px;
+    font-size: 20px;
     font-weight: normal;
     /* min-height: 20px; */
     text-decoration: none;
@@ -131,8 +131,8 @@
     position: absolute;
     left: -1px;
     top: -1px;
-    width: 60px;
-    height: 30px;
+    width: 64px;
+    height: 32px;
     /* overflow: hidden; */
     background-color: #fff;
     background-color: rgba(255, 255, 255, 1);
@@ -147,7 +147,7 @@
 }
 
 .plotting-menu > li > ul > li {
-    width: 30px;
+    width: 32px;
     padding: 0px;
     /* vertical-align: baseline; */
     float: left;

examples/css/iconfont/iconfont.woff

@@ -32,8 +32,7 @@
           z-index: 888;
           left: 260px;
           color: #000000;
-          ba
-          ckground-color: #fff;
+          background-color: #fff;
         }
 
         /* #drawMenu {
@@ -164,11 +163,11 @@
     </div>
 </div>
 <div id="plottingMenu" class="plotting-menu">
-    <li><span class="icon iconfont icon-stop" title="取消标绘"
+    <li><span class="icon iconfont icon-circle-wrong" title="取消标绘"
      onclick="cancelDraw()"></span></li>
     <li>
       <i class="icon iconfont icon-draw"></i>
-      <ul style="width: 150px;">
+      <ul style="width: 160px;">
           <li><span class="icon iconfont icon-draw" title="添加图层"
            onclick="addPlottingLayer()"></span></li>
           <li><span class="icon iconfont icon-lock" title="图层可锁定"
@@ -183,7 +182,7 @@
     </li>
     <li>
       <i class="icon iconfont icon-bound-rectangle-edit"></i>
-      <ul style="width: 120px;">
+      <ul style="width: 128px;">
           <li><span class="icon iconfont icon-bound-rectangle-edit" title="外接矩形编辑"
            onclick="editCircusRetangle()"></span></li>
           <li><span class="icon iconfont icon-node-edit" title="节点编辑"
@@ -195,9 +194,9 @@
       </ul>
     </li>
     <li>
-      <i class="icon iconfont icon-copy"></i>
-      <ul style="width: 180px;">
-          <li><span class="icon iconfont icon-copy" title="复制标号"
+      <i class="icon iconfont icon-copy2"></i>
+      <ul style="width: 192px;">
+          <li><span class="icon iconfont icon-copy2" title="复制标号"
            onclick="copySymbol()"></span></li>
           <li><span class="icon iconfont icon-shear" title="剪切标号"
            onclick="cutSymbol()"></span></li>
@@ -213,7 +212,7 @@
     </li>
     <li>
       <i class="icon iconfont icon-cloud-upload"></i>
-      <ul style="width: 60px;">
+      <ul style="width: 64px;">
           <li><span class="icon iconfont icon-cloud-upload" title="保存态势图"
            onclick="saveSimulationMap()"></span></li>
           <li><span class="icon iconfont icon-cloud-download" title="加载态势图"
@@ -225,7 +224,7 @@
     </li>
      <li>
        <i class="icon iconfont icon-combination"></i>
-       <ul style="width: 90px;">
+       <ul style="width: 96px;">
            <li><span class="icon iconfont icon-combination" title="对多选的标号，创建组合"
             onclick="createGroupObjects()"></span></li>
            <li><span class="icon iconfont icon-multiflag" title="对多选的旗子类标号，创建多旗"
@@ -236,7 +235,7 @@
      </li>
      <li>
        <i class="icon iconfont icon-draw-avoid"></i>
-       <ul style="width: 90px;">
+       <ul style="width: 96px;">
            <li><span class="icon iconfont icon-draw-avoid" title="避让编辑"
             onclick="drawAvoidRegion()"></span></li>
            <li><span class="icon iconfont icon-exit-avoid" title="退出避让编辑"
@@ -247,7 +246,7 @@
      </li>
      <li>
        <i class="icon iconfont icon-align-left"></i>
-       <ul style="width: 332px;">
+       <ul style="width: 354px;">
            <li><span class="icon iconfont icon-align-left" title="左对齐"
             onclick="setSymbolAlighLeft()"></span></li>
            <li><span class="icon iconfont icon-align-right" title="右对齐"