111

src/assets/icons/svg/map.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715418472703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4370" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M528 32C325.056 32 160 196.8 160 399.36c0 75.2 22.656 147.584 65.024 208.48 2.112 3.648 4.256 7.168 6.784 10.592l268.608 353.472c7.296 8.096 17.088 12.576 27.584 12.576 10.368 0 20.224-4.512 28.768-14.08l267.36-352c2.624-3.52 4.896-7.36 6.112-9.6A364.864 364.864 0 0 0 896 399.36C896 196.8 730.912 32 528 32z m0 498.72a131.52 131.52 0 0 1-131.456-131.232 131.488 131.488 0 0 1 262.88 0 131.52 131.52 0 0 1-131.424 131.2z" fill="#bfbfbf" p-id="4371"></path></svg>

src/components/AreaMap/index.vue

@@ -3,9 +3,10 @@
     <div id="container"></div>
     <div class="input-card">
       <el-button @click="createPolygon()">新建</el-button>
-      <el-button @click="polyEditor.open()">开始编辑</el-button>
+      <!-- <el-button @click="polyEditor.open()">开始编辑</el-button> -->
       <el-button @click="editClose">结束编辑</el-button>
       <el-button @click="changeMapStyle()">切换地图</el-button>
+      <el-button @click="clearPolygon()">清除多边形</el-button>
     </div>
   </div>
 </template>
@@ -48,6 +49,7 @@
       // polyEditor: null,
       coordList: "",
       timer: "",
+      status:true,
     };
   },
   props: ["pathList", "dataId"],
@@ -61,6 +63,23 @@
     }
   },
   methods: {
+    clearPolygon() {
+      this.status=false
+      if (polyEditor) {
+        polyEditor.close();  // 关闭多边形编辑器
+      }
+
+      // 移除地图上的所有多边形对象
+      this.map.getAllOverlays('polygon').forEach(polygon => {
+        this.map.remove(polygon);
+      });
+
+      // 如果需要，也可以清空与多边形相关的其他状态或数据
+      this.coordList = '';
+      this.$emit("mapList", '');
+        
+      this.$emit("center", '');
+    },
     changeMapStyle() {
       // 创建一个默认的图层组件
       let defaultLayer = new AMap.TileLayer();
@@ -73,7 +92,7 @@
       let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
       // 切换图层
       if (this.type == 'default') {
-          console.log(1111111)
+        // console.log(1111111)
         //获取地图图层数据
         this.map.setLayers([defaultLayer]); // 切换回默认图层
         this.type = 'Satellite';
@@ -126,10 +145,10 @@
       });
       this.map.add([polygon1]);
       polyEditor = new AMap.PolygonEditor(this.map);
-        console.log(polyEditor);
+      // console.log(polyEditor);
-        console.dir(polyEditor);
+      // console.dir(polyEditor);
       polyEditor.on("add", (data) => {
-          console.log(data);
+        // console.log(data);
         this.coordList = data.lnglat;
         var polygon = data.target;
         polygon.on("dblclick", () => {
@@ -145,6 +164,7 @@
       return polyEditor;
     },
     createPolygon() {
+      this.status=true
       polyEditor.close();
       polyEditor.setTarget();
       polyEditor.open();
@@ -160,13 +180,15 @@
         // console.log("coordList", this.coordList);
         let mapList = [];
         this.coordList.forEach((v) => {
-            console.log("v", v.lng, "--", v.lat);
+          // console.log("v", v.lng, "--", v.lat);
           mapList.push([v.lng, v.lat]);
         });
         let center = calculateCenter(mapList);
+        console.log(mapList,'mapListmapList');
         that.$emit("mapList", mapList);
-          console.log("center:", center);
+        
         that.$emit("center", center);
+        
       });
       polyEditor.close();
     },