map

jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="title" :close-on-click-modal="false" :visible="true" top="10vh" width="90%" append-to-body
+  <el-dialog :title="title"  style="z-index: 9999;" :append-to-body="true" :close-on-click-modal="false" :visible="true" top="10vh" width="90%" append-to-body
     modal-append-to-body :before-close="handleClose" class="my-dialog">
     <div class="cont">
       <div class="tips">
@@ -8,6 +8,10 @@
       <div class="addpolygon">
         <div id="mapFencecontainer">
             <div class="mapBtn">
+              <template v-if="mode == 'add'">
+                <el-button size="small" type="primary" @click="clearOverlays">清空</el-button>
+                <el-button size="small" type="primary" @click="combineOverlays">合并</el-button>
+              </template>
               <el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
             </div>
         </div>
@@ -19,7 +23,7 @@
 </template>
 
 <script>
-let  marker, polygon, drawingManager, lngLat,ap, map, MultiPolygon;
+let  marker, polygon, drawingManager, lngLat, map, MultiPolygon;
 let path = [];// 设置回显数据参数
 import axios from 'axios'
 // let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
@@ -64,9 +68,25 @@ export default {
     handleClose() {
       this.$emit('areaVisibleChange', false)
     },
+    combineOverlays() {
+      // overlaysArray.
+    },
+    // 删除绘制的多边形
     clearOverlays() {
-      polygon.setMap(null);
+        polygon.setPath([]);
+        if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
+            // for (i in overlaysArray) {
+            for (var i = 0;i < overlaysArray.length;i++) {
+                overlaysArray[i].setMap(null);
+            }
+        }
+        overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
+        console.log(drawingManager);
+        this.setMapData();
     },
+    // clearOverlays() {
+    //   polygon.setMap(null);
+    // },
     sendLngLat() {
       this.$emit('areaVisibleChange', false, this.targetAreaPath)
     },
@@ -139,9 +159,10 @@ export default {
           },
       });
       drawingManager.setMap(map);
+      // 监听
       window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
          console.log('overlaycomplete', event)
-        //  polygon.setMap(null);
+         overlaysArray.push(event.overlay);
           const lngLat = [];
           for (const item of event.overlay.getPath().elems) {
               const lng = item.getLng();
@@ -152,7 +173,6 @@ export default {
               });
           }
           console.log("绘图后获得的：",JSON.stringify(lngLat,null,4), polygon); // 获得相应的经纬度值
-          _this.showPolygons(lngLat, true)
       });
 
       // 编辑
@@ -240,9 +260,6 @@ export default {
         
         /**绘制围栏 */
         this.addpolygon();
-    
-
-       
     },
     /**循环调用显示围栏方法 */
     showArrayPolygon(){
@@ -277,9 +294,6 @@ export default {
             fillColor: new qq.maps.Color(202, 67, 58, 0.1)
         });
         polygon.setPath(path);
-        // if (editable && this.mode == 'add') {
-        //    polygon.setMap(map);
-        // }
     }
   }   
 };
@@ -324,7 +338,7 @@ export default {
 .loadMap {
   position: absolute;
   left: 50%;
-  top: 40%;
+  top: 30%;
   transform: translate(-50%, -50%);
   color: #333;
   font-size: 16px;