合并代码

public/data/points.json

@@ -1,16 +1,16 @@
 {
-  "startPoint": "114.26344,27.800982",
-  "endPoint": "114.284668,27.794961",
+  "startPoint": "114.312888,27.796612",
+  "endPoint": "114.336525,27.767989",
   "viaPoints": [
     {
       "time": "1694352000000",
-      "points": "114.272329,27.797299"
+      "points": "114.334239,27.779261"
     }
   ],
   "avoidPoints": [
     {
       "time": "1694352003000",
-      "points": "114.27882,27.792857"
+      "points": ""
     }
   ],
   "avoidAreas": [

src/assets/scss/index.scss

@@ -80,3 +80,20 @@ html {
 .flex-warp {
   flex-wrap: wrap;
 }
+.el-form-item {
+  display: flex!important;
+  justify-content: space-between;
+  margin-bottom: 12px!important;
+}
+.el-form-item__label {
+  letter-spacing: -1px;
+  min-width: 130px!important;
+  padding: 0!important;
+  white-space: nowrap;      /* 强制不换行 */
+  flex-shrink: 0;
+  font-size: 16px!important;
+}
+.el-input__inner {
+  height: 24px;
+  line-height: 24px;
+}

src/views/home/home.vue

@@ -2,11 +2,21 @@
   <div>
     <div class="home-header">
       <div class="home-header-left">
+        <el-tooltip content="起点绘制">
           <img @click="drawStartPoint" src="@/assets/image/start.png" />
+        </el-tooltip>
+        <el-tooltip content="终点绘制">
           <img @click="drawEndPoint" src="@/assets/image/end.png" />
+        </el-tooltip>
+        <el-tooltip content="途径点绘制">
           <img @click="drawViaPoint" src="@/assets/image/add.png" />
+        </el-tooltip>
+        <el-tooltip content="避让点绘制">
           <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
+        </el-tooltip>
+        <el-tooltip content="避让区域绘制">
           <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
+        </el-tooltip>
         <div @click="clear" class="sure">清除</div>
         <div @click="calculateShortestPath" class="sure">确定</div>
         <div @click="hadBuffer" class="sure">路线隐蔽规划</div>
@@ -38,12 +48,12 @@
           <div class="title">参数</div>
           <el-form
             @submit.native.prevent="calculateShortestPath"
-            label-width="120px"
+            label-width="140px"
             label-position="left"
             size="mini"
             :model="form"
           >
-            <el-form-item label="起点">
+            <el-form-item label="起点：">
               <el-input
                 v-model="form.startPoint"
                 @blur="pointsChange('startPoint')"
@@ -51,7 +61,7 @@
                 clearable
               ></el-input>
             </el-form-item>
-            <el-form-item label="终点">
+            <el-form-item label="终点：">
               <el-input
                 v-model="form.endPoint"
                 @blur="pointsChange('endPoint')"
@@ -59,7 +69,7 @@
                 clearable
               ></el-input>
             </el-form-item>
-            <el-form-item label="途经点">
+            <el-form-item label="途经点：">
               <div v-for="(item, index) in form.viaPoints" :key="index">
                 <el-input
                   v-model="item.points"
@@ -70,7 +80,7 @@
                 ></el-input>
               </div>
             </el-form-item>
-            <el-form-item label="避让点">
+            <el-form-item label="避让点：">
               <div v-for="(item, index) in form.avoidPoints" :key="index">
                 <el-input
                   v-model="item.points"
@@ -81,7 +91,7 @@
                 ></el-input>
               </div>
             </el-form-item>
-            <el-form-item label="避让区域">
+            <el-form-item label="避让区域：">
               <div v-for="(item, index) in form.avoidAreas" :key="index">
                 <el-input
                   v-model="item.points"
@@ -98,11 +108,11 @@
         </div>
         <div class="control-panel">
           <div class="title">隐蔽添加</div>
-          <el-form label-width="120px" label-position="left" size="mini">
-            <el-form-item label="缓冲半径（m）">
+          <el-form label-width="140px" label-position="left" size="mini">
+            <el-form-item label="缓冲半径(m)：">
               <el-input v-model="hideform.radius"></el-input>
             </el-form-item>
-            <el-form-item label="面积冗余（%）">
+            <el-form-item label="面积冗余(%)：">
               <el-input v-model="hideform.redundancy" placeholder=""></el-input>
             </el-form-item>
           </el-form>
@@ -115,14 +125,14 @@
               <span>参与路线规划</span>
             </div>
           </div>
-          <el-form @submit.native.prevent="calculateShortestPath" label-width="120px" label-position="left" size="mini">
-            <el-form-item label="宽度">
+          <el-form @submit.native.prevent="calculateShortestPath" label-width="140px" label-position="left" size="mini">
+            <el-form-item label="宽度(m)：">
               <el-input v-model="inputform.width"></el-input>
             </el-form-item>
-            <el-form-item label="载重（吨）">
+            <el-form-item label="载重(吨)：">
               <el-input v-model="inputform.load" placeholder=""></el-input>
             </el-form-item>
-            <el-form-item label="最小转弯半径">
+            <el-form-item label="最小转弯半径(m)：">
               <el-input v-model="inputform.minTurnRadius" placeholder=""></el-input>
             </el-form-item>
           </el-form>
@@ -426,6 +436,7 @@ export default {
     }
   },
   async mounted() {
+    ;[...document.querySelectorAll('*')].forEach((n) => console.log(window.getComputedStyle(n).fontFamily))
     this.viewer = null
     await this.getMapOption()
     this.$nextTick(async () => {
@@ -466,6 +477,9 @@ export default {
               pitch: -35,
             },
           },
+          defaultLabelStyle: {
+            font: '16px "DengXian",sans-serif',
+          },
           // basemaps: [
           //   {
           //     id: "image-tdss",
@@ -1264,8 +1278,14 @@ export default {
           graphic?.remove()
           this.viaPoints = this.viaPoints.filter((viaPoint) => viaPoint.style.time !== row.time)
         } else {
+          if (this.viaPoints.length > 0) {
             const graphic = this.viaPoints.find((viaPoint) => viaPoint.style.time === row.time)
             this.updatePointPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPointToMap('viaPoints', row, time)
+          }
         }
       } else if (type === 'avoidPoints') {
         if (!row.points) {
@@ -1279,8 +1299,14 @@ export default {
           graphic?.remove()
           this.avoidPoints = this.avoidPoints.filter((avoidPoint) => avoidPoint.style.time !== row.time)
         } else {
+          if (this.avoidPoints.length > 0) {
             const graphic = this.avoidPoints.find((avoidPoint) => avoidPoint.style.time === row.time)
             this.updatePointPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPointToMap('avoidPoints', row, time)
+          }
         }
       } else if (type === 'avoidAreas') {
         if (!row.points) {
@@ -1294,8 +1320,14 @@ export default {
           graphic?.remove()
           this.avoidAreas = this.avoidAreas.filter((avoidArea) => avoidArea.style.time !== row.time)
         } else {
+          if (this.avoidAreas.length > 0) {
             const graphic = this.avoidAreas.find((avoidArea) => avoidArea.style.time === row.time)
             this.updatePolygonPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPolygonToMap('avoidAreas', row, time)
+          }
         }
       }
     },