From e140cb51181034144d039bbd5db6d239045741e8 Mon Sep 17 00:00:00 2001
From: Sliverber <2622874537@qq.com>
Date: Thu, 23 May 2024 16:08:52 +0800
Subject: [PATCH] 111

---
 src/assets/icons/svg/map.svg     |   1 +
 src/components/AreaMap/index.vue | 356 ++++++++++++++++---------------
 2 files changed, 190 insertions(+), 167 deletions(-)
 create mode 100644 src/assets/icons/svg/map.svg

diff --git a/src/assets/icons/svg/map.svg b/src/assets/icons/svg/map.svg
new file mode 100644
index 0000000..a1b36d9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/AreaMap/index.vue b/src/components/AreaMap/index.vue
index 2172ccc..61c8e0c 100644
--- a/src/components/AreaMap/index.vue
+++ b/src/components/AreaMap/index.vue
@@ -3,194 +3,216 @@
     <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="changeMapStyle()">切换地图</el-button>
+      <el-button @click="clearPolygon()">清除多边形</el-button>
     </div>
   </div>
 </template>
 
 <script>
-  import AMapLoader from "@amap/amap-jsapi-loader";
-  import globalConfig from '@/utils/config/globalConfig'
-  var polyEditor = "";
-  function calculateCenter(mapList) {
-    var total = mapList.length;
-    var X = 0,
-      Y = 0,
-      Z = 0;
-    mapList.map((item) => {
-      var lng = (item[0] * Math.PI) / 180;
-      var lat = (item[1] * Math.PI) / 180;
-      var x, y, z;
-      x = Math.cos(lat) * Math.cos(lng);
-      y = Math.cos(lat) * Math.sin(lng);
-      z = Math.sin(lat);
-      X += x;
-      Y += y;
-      Z += z;
-    });
-    X = X / total;
-    Y = Y / total;
-    Z = Z / total;
-    var Lng = Math.atan2(Y, X);
-    var Hyp = Math.sqrt(X * X + Y * Y);
-    var Lat = Math.atan2(Z, Hyp);
-    let center = new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI);
-    return center;
-  }
+import AMapLoader from "@amap/amap-jsapi-loader";
+import globalConfig from '@/utils/config/globalConfig'
+var polyEditor = "";
+function calculateCenter(mapList) {
+  var total = mapList.length;
+  var X = 0,
+    Y = 0,
+    Z = 0;
+  mapList.map((item) => {
+    var lng = (item[0] * Math.PI) / 180;
+    var lat = (item[1] * Math.PI) / 180;
+    var x, y, z;
+    x = Math.cos(lat) * Math.cos(lng);
+    y = Math.cos(lat) * Math.sin(lng);
+    z = Math.sin(lat);
+    X += x;
+    Y += y;
+    Z += z;
+  });
+  X = X / total;
+  Y = Y / total;
+  Z = Z / total;
+  var Lng = Math.atan2(Y, X);
+  var Hyp = Math.sqrt(X * X + Y * Y);
+  var Lat = Math.atan2(Z, Hyp);
+  let center = new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI);
+  return center;
+}
 
-  export default {
-    name: "AreaMap",
-    data() {
-      return {
-        map: null,
-        // polyEditor: null,
-        coordList: "",
-        timer: "",
-      };
+export default {
+  name: "AreaMap",
+  data() {
+    return {
+      map: null,
+      // polyEditor: null,
+      coordList: "",
+      timer: "",
+      status:true,
+    };
+  },
+  props: ["pathList", "dataId"],
+  mounted() {
+    if (this.dataId) {
+      this.start();
+      console.log("修改");
+    } else {
+      this.echart();
+      console.log("添加");
+    }
+  },
+  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", '');
     },
-    props: ["pathList", "dataId"],
-    mounted() {
-      if (this.dataId) {
-        this.start();
-        console.log("修改");
+    changeMapStyle() {
+      // 创建一个默认的图层组件
+      let defaultLayer = new AMap.TileLayer();
+      // 创建一个卫星图图层组件
+      let satelliteLayer = new AMap.TileLayer.Satellite();
+      let roadNetLayer = new AMap.TileLayer.RoadNet();
+      // 将默认图层添加到地图中
+      this.map.add(defaultLayer);
+      // 获取当前地图显示的图层
+      let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
+      // 切换图层
+      if (this.type == 'default') {
+        // console.log(1111111)
+        //获取地图图层数据
+        this.map.setLayers([defaultLayer]); // 切换回默认图层
+        this.type = 'Satellite';
       } else {
-        this.echart();
-        console.log("添加");
+        console.log(222222)
+        this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
+        this.type = 'default';
       }
     },
-    methods: {
-      changeMapStyle(){
-        // 创建一个默认的图层组件
-        let defaultLayer = new AMap.TileLayer();
-        // 创建一个卫星图图层组件
-        let satelliteLayer = new AMap.TileLayer.Satellite();
-        let roadNetLayer = new AMap.TileLayer.RoadNet();
-        // 将默认图层添加到地图中
-        this.map.add(defaultLayer);
-        // 获取当前地图显示的图层
-        let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
-        // 切换图层
-        if(this.type=='default'){
-          console.log(1111111)
-          //获取地图图层数据
-          this.map.setLayers([defaultLayer]); // 切换回默认图层
-          this.type = 'Satellite';
-        }else{
-          console.log(222222)
-          this.map.setLayers([satelliteLayer,roadNetLayer]); // 切换到卫星图图层
-          this.type = 'default';
-        }
-      },
-      start() {
-        this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
-      },
-      async echart() {
-        clearInterval(this.timer);
-        console.log("接收参数", this.pathList);
-        // console.log(typeof JSON.parse(this.pathList));
-        await AMapLoader.load({
-          key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
-          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-          plugins: [
-            "AMap.ToolBar",
-            "AMap.Driving",
-            "AMap.PolygonEditor",
-            "AMap.PlaceSearch",
-          ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        }).then((AMap) => {
-            this.map = new AMap.Map("container", {
-              //设置地图容器id
-              viewMode: "3D", //是否为3D地图模式
-              zoom: 18, //初始化地图级别
-              center: [120.356031,26.94088], //初始化地图中心点位置--大嵛山岛
-            });
-            this.map.setFitView();
-          })
-          .catch((e) => {
-            console.log(e);
-          });
-        this.initEditor();
-
-      },
-      initEditor() {
-        var path1 = []
-        if (this.dataId) {
-          path1 = JSON.parse(this.pathList) || [];
-
-        }
-
-        var polygon1 = new AMap.Polygon({
-          path: path1,
+    start() {
+      this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
+    },
+    async echart() {
+      clearInterval(this.timer);
+      console.log("接收参数", this.pathList);
+      // console.log(typeof JSON.parse(this.pathList));
+      await AMapLoader.load({
+        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [
+          "AMap.ToolBar",
+          "AMap.Driving",
+          "AMap.PolygonEditor",
+          "AMap.PlaceSearch",
+        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      }).then((AMap) => {
+        this.map = new AMap.Map("container", {
+          //设置地图容器id
+          viewMode: "3D", //是否为3D地图模式
+          zoom: 18, //初始化地图级别
+          center: [120.356031, 26.94088], //初始化地图中心点位置--大嵛山岛
         });
-        this.map.add([polygon1]);
-        polyEditor = new AMap.PolygonEditor(this.map);
-        console.log(polyEditor);
-        console.dir(polyEditor);
-        polyEditor.on("add", (data) => {
-          console.log(data);
-          this.coordList = data.lnglat;
-          var polygon = data.target;
-          polygon.on("dblclick", () => {
-            polyEditor.setTarget(polygon);
-            polyEditor.open();
-          });
+        this.map.setFitView();
+      })
+        .catch((e) => {
+          console.log(e);
         });
-        polygon1.on("dblclick", () => {
-          polyEditor.setTarget(polygon1);
+      this.initEditor();
+
+    },
+    initEditor() {
+      var path1 = []
+      if (this.dataId) {
+        path1 = JSON.parse(this.pathList) || [];
+
+      }
+
+      var polygon1 = new AMap.Polygon({
+        path: path1,
+      });
+      this.map.add([polygon1]);
+      polyEditor = new AMap.PolygonEditor(this.map);
+      // console.log(polyEditor);
+      // console.dir(polyEditor);
+      polyEditor.on("add", (data) => {
+        // console.log(data);
+        this.coordList = data.lnglat;
+        var polygon = data.target;
+        polygon.on("dblclick", () => {
+          polyEditor.setTarget(polygon);
           polyEditor.open();
         });
-
-        return polyEditor;
-      },
-      createPolygon() {
-        polyEditor.close();
-        polyEditor.setTarget();
+      });
+      polygon1.on("dblclick", () => {
+        polyEditor.setTarget(polygon1);
         polyEditor.open();
-      },
-      editClose: function () {
-        // console.log("this", this);
+      });
 
-        let that = this;
-        polyEditor.on("end", function (event) {
-          // event.target 即为编辑后的多边形对象
-          //多边形的坐标
-          this.coordList = event.target.getPath();
-          // console.log("coordList", this.coordList);
-          let mapList = [];
-          this.coordList.forEach((v) => {
-            console.log("v", v.lng, "--", v.lat);
-            mapList.push([v.lng, v.lat]);
-          });
-          let center = calculateCenter(mapList);
-          that.$emit("mapList", mapList);
-          console.log("center:", center);
-          that.$emit("center", center);
-        });
-        polyEditor.close();
-      },
+      return polyEditor;
     },
-    beforeDestroy() {
-      clearInterval(this.timer);
-    }
-  };
+    createPolygon() {
+      this.status=true
+      polyEditor.close();
+      polyEditor.setTarget();
+      polyEditor.open();
+    },
+    editClose: function () {
+      // console.log("this", this);
+
+      let that = this;
+      polyEditor.on("end", function (event) {
+        // event.target 即为编辑后的多边形对象
+        //多边形的坐标
+        this.coordList = event.target.getPath();
+        // console.log("coordList", this.coordList);
+        let mapList = [];
+        this.coordList.forEach((v) => {
+          // 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);
+        
+        that.$emit("center", center);
+        
+      });
+      polyEditor.close();
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  }
+};
 </script>
 
-<style lang="scss"  scoped>
-  #container {
-    width: 100%;
-    height: 500px;
-  }
+<style lang="scss" scoped>
+#container {
+  width: 100%;
+  height: 500px;
+}
 
-  .container {
-    position: relative;
-    border: 1px solid rgb(204, 204, 204);
+.container {
+  position: relative;
+  border: 1px solid rgb(204, 204, 204);
 
-    .input-card {
-      position: absolute;
-      bottom: 15px;
-      right: 15px;
-    }
+  .input-card {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
   }
+}
 </style>