更新 2/20

minggao/src/page/homepage/facilitydistribute.vue

@@ -110,7 +110,7 @@
       >
       </el-date-picker>
       <div class="tracklist">
-        <div class="tracklist_tilte" v-if="tracklistdata.length==0">
+        <div class="tracklist_tilte" v-if="tracklistdata.length == 0">
           暂无数据
         </div>
         <div
@@ -145,21 +145,21 @@
               (tracklistdata_backups[trackpage] &&
                 tracklistdata_backups[trackpage][index] &&
                 tracklistdata_backups[trackpage][index].type &&
-                "关闭") ||
-              "查看轨迹"
+                '关闭') ||
+              '查看轨迹'
             }}
           </div>
         </div>
       </div>
       <el-pagination
-      v-if="tracklistdata.length"
+        v-if="tracklistdata.length"
         background
         layout="prev, pager, next"
         :total="total"
         :key="pagekey"
         :page-size="5"
-        :pager-count="3"
         :small="true"
+        :pager-count="3"
         @current-change="handleCurrentChange"
       >
       </el-pagination>
@@ -190,7 +190,7 @@
           <p>
             <span>设备名称：</span
             ><span>{{
-              baseinfo[0].device_name == "" ? "诱捕器" : baseinfo[0].device_name
+              baseinfo[0].device_name == '' ? '诱捕器' : baseinfo[0].device_name
             }}</span>
           </p>
           <p>
@@ -237,12 +237,12 @@
           <div class="cbdinfobox_item">
             <p>
               设备开关：<span>{{
-                baseinfo[0].device_data.ds == 0 ? "关机" : "开机"
+                baseinfo[0].device_data.ds == 0 ? '关机' : '开机'
               }}</span>
             </p>
             <p>
               工作状态：<span>{{
-                baseinfo[0].device_data.ws == 0 ? "待机" : "工作"
+                baseinfo[0].device_data.ws == 0 ? '待机' : '工作'
               }}</span>
             </p>
           </div>
@@ -290,7 +290,7 @@
         @click="measure_area"
       >
         <i class="iconfont icon-mianji"></i>
-        <p>侧面</p>
+        <p>测面</p>
       </div>
       <!-- <p @click="measure_close">关闭</p> -->
     </div>
@@ -299,8 +299,8 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import * as echarts from "echarts";
-import "../../../node_modules/echarts/map/js/china";
+import * as echarts from 'echarts';
+import '../../../node_modules/echarts/map/js/china';
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -308,35 +308,35 @@ export default {
     //这里存放数据
     return {
       pietf: false,
-      width: "0px",
-      inoffvalue: "", //监测点 选择
+      width: '0px',
+      inoffvalue: '', //监测点 选择
       inoffoptions: [], //监测点列表
-      versionsvalue2: "", //隶属组织 选择
+      versionsvalue2: '', //隶属组织 选择
       versionsoptions2: [], //隶属组织列表
-      statevalue: "", //设备状态
+      statevalue: '', //设备状态
       stateoptions: [
         {
-          value: "0",
-          label: "停用(离线)",
+          value: '0',
+          label: '停用(离线)',
         },
         {
-          value: "1",
-          label: "正常(在线)",
+          value: '1',
+          label: '正常(在线)',
         },
       ], //设备状态列表
-      typevalue: "", //设备类型
+      typevalue: '', //设备类型
       typeoptions: [], //设备类型 列表
-      idinput: "", //设备编号
+      idinput: '', //设备编号
       baseinfo: [
         {
           device_data: {
-            at: "",
-            ah: "",
-            ds: "",
-            ws: "",
-            csq: "",
+            at: '',
+            ah: '',
+            ds: '',
+            ws: '',
+            csq: '',
           },
-          uptime: "",
+          uptime: '',
           pest_list: [],
         },
       ], //设备详情
@@ -350,38 +350,39 @@ export default {
       ybqnum: 0,
       measure_index: 0,
       mouseTool: null,
-      tracktime: "",
+      tracktime: '',
       tracklistdata: [],
       color: [
-        "rgb(197, 92, 142)",
-        "rgb(197, 32, 157)",
-        "rgb(206, 12, 55)",
-        "rgb(146, 78, 23)",
-        "rgb(173, 64, 221)",
-        "rgb(234, 169, 70)",
-        "rgb(123, 133, 244)",
-        "rgb(107, 27, 92)",
-        "rgb(13, 165, 14)",
-        "rgb(53, 52, 106)",
-        "rgb(237, 169, 161)",
-        "rgb(157, 84, 17)",
-        "rgb(14, 187, 149)",
-        "rgb(46, 11, 221)",
-        "rgb(208, 202, 126)",
-        "rgb(17, 118, 32)",
-        "rgb(7, 31, 67)",
-        "rgb(75, 40, 99)",
-        "rgb(224, 98, 40)",
-        "rgb(234, 3, 190)",
-        "rgb(97, 76, 115)",
-        "rgb(9, 117, 139)",
-        "rgb(165, 7, 62)",
-        "rgb(7, 107, 42)",
+        'rgb(197, 92, 142)',
+        'rgb(197, 32, 157)',
+        'rgb(206, 12, 55)',
+        'rgb(146, 78, 23)',
+        'rgb(173, 64, 221)',
+        'rgb(234, 169, 70)',
+        'rgb(123, 133, 244)',
+        'rgb(107, 27, 92)',
+        'rgb(13, 165, 14)',
+        'rgb(53, 52, 106)',
+        'rgb(237, 169, 161)',
+        'rgb(157, 84, 17)',
+        'rgb(14, 187, 149)',
+        'rgb(46, 11, 221)',
+        'rgb(208, 202, 126)',
+        'rgb(17, 118, 32)',
+        'rgb(7, 31, 67)',
+        'rgb(75, 40, 99)',
+        'rgb(224, 98, 40)',
+        'rgb(234, 3, 190)',
+        'rgb(97, 76, 115)',
+        'rgb(9, 117, 139)',
+        'rgb(165, 7, 62)',
+        'rgb(7, 107, 42)',
       ],
       trackpage: 1,
       pagekey: 1,
       total: 8,
       tracklistdata_backups: {},
+      arealistmouse: {},
     };
   },
   //监听属性 类似于data概念
@@ -391,20 +392,20 @@ export default {
     pietf: function (val) {
       // console.log(this.width)
       if (val) {
-        this.width = "500px";
+        this.width = '500px';
       } else {
-        this.width = "0";
+        this.width = '0';
         if (this.myVideo2[`myPlayer`]) {
           this.myVideo2[`myPlayer`].stop();
           setTimeout(() => {
-            console.log("关闭关闭关闭");
+            console.log('关闭关闭关闭');
             this.myVideo2[`myPlayer`].stop();
           }, 5000);
         } else {
-          setTimeout(() => {
-            console.log("关闭关闭关闭");
-            this.myVideo2[`myPlayer`].stop();
-          }, 5000);
+          // setTimeout(() => {
+          //   console.log('关闭关闭关闭');
+          //   this.myVideo2[`myPlayer`].stop();
+          // }, 5000);
         }
       }
       // console.log(this.width)
@@ -427,62 +428,63 @@ export default {
       }
       lnglat = lnglat.toString();
       var strDu, strFen, strMiao;
-      var duindex = lnglat.indexOf("°"); //字符度的下标
-      var fenindex = lnglat.indexOf("′"); //字符分的下标
-      var miaoindex = lnglat.indexOf("″"); //字符秒的下标
+      var duindex = lnglat.indexOf('°'); //字符度的下标
+      var fenindex = lnglat.indexOf('′'); //字符分的下标
+      var miaoindex = lnglat.indexOf('″'); //字符秒的下标
       strDu = lnglat.slice(0, duindex);
       strFen = lnglat.slice(duindex + 1, fenindex);
       strMiao = lnglat.slice(fenindex + 1, miaoindex);
       // len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
       strDu =
-        typeof strDu == "undefined" || strDu == "" ? 0 : parseFloat(strDu);
+        typeof strDu == 'undefined' || strDu == '' ? 0 : parseFloat(strDu);
       strFen =
-        typeof strFen == "undefined" || strFen == ""
+        typeof strFen == 'undefined' || strFen == ''
           ? 0
           : parseFloat(strFen) / 60;
       strMiao =
-        typeof strMiao == "undefined" || strMiao == ""
+        typeof strMiao == 'undefined' || strMiao == ''
           ? 0
           : parseFloat(strMiao) / 3600;
       var digital = strDu + strFen + strMiao;
       if (digital == 0) {
-        return "";
+        return '';
       } else {
         return digital.toFixed(6);
       }
     },
     initmap() {
       // console.log();
-      var map = new AMap.Map(document.getElementById("mapContainer2"), {
+      var map = new AMap.Map(document.getElementById('mapContainer2'), {
         center: this.center,
         resizeEnable: true,
         zoom: 11,
-        lang: "en",
-        mapStyle: "amap://styles/fresh",
+        lang: 'en',
+        mapStyle: 'amap://styles/fresh',
         layers: [],
       });
       //new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()
-      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+      AMap.plugin(['AMap.ToolBar', 'AMap.Geocoder'], () => {
         map.addControl(new AMap.ToolBar());
         this.geocoder = new AMap.Geocoder({
-          city: "全国",
+          city: '全国',
           radius: 1000,
         });
       });
-      AMap.plugin(["AMap.MouseTool"], () => {
+      AMap.plugin(['AMap.MouseTool'], () => {
         this.mouseTool = new AMap.MouseTool(map);
+        this.mouseTool.on('draw', this.drawend());
       });
-      map.on("click", (e) => {
-        console.log(e);
-      });
+      // map.on("click", (e) => {
+      //   console.log(e);
+      // });
       this.map = map;
       this.pestboxloading = false;
     },
     getbaselist() {
       // this.pestboxloading = true
       this.$axios({
-        method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute_new",
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.home_map.device_distribute_new',
         data: this.qs.stringify({
           trap_number: this.idinput, //              非必传(string)               设备编号 搜索项
           point_id: this.inoffvalue, //                  非必传(string)               设备所属监测点id 搜索项
@@ -499,6 +501,7 @@ export default {
         this.jknum = 0;
         this.ybqnum = 0;
         this.map.clearMap();
+        this.mouseTool.close(true);
         if (resdata.huizhou) {
           for (var i = 0; i < resdata.huizhou.length; i++) {
             this.setmak(resdata.huizhou[i]);
@@ -514,22 +517,28 @@ export default {
             this.setmak(resdata.shanwei[i]);
           }
         }
+        for (var key in this.tracklistdata_backups) {
+          var list = this.tracklistdata_backups[key];
+          for (var j = 0; j < list.length; j++) {
+            list[j].type = false;
+          }
+        }
         // this.map.add(marker);
       });
     },
     setmak(data) {
-      var icon = "";
+      var icon = '';
       if (data.device_type_id == 3) {
         //测报灯
-        icon = "../../../static/images/homepage/cbd.png";
+        icon = '../../../static/images/homepage/cbd.png';
         this.cbdnum++;
       } else if (data.device_type_id == 4) {
         //诱捕器
-        icon = "../../../static/images/homepage/ybq.png";
+        icon = '../../../static/images/homepage/ybq.png';
         this.ybqnum++;
       } else if (data.device_type_id == 6) {
         //监控
-        icon = "../../../static/images/homepage/jk.png";
+        icon = '../../../static/images/homepage/jk.png';
         this.jknum++;
       }
       var marker = new AMap.Marker({
@@ -539,11 +548,11 @@ export default {
         ),
         offset: new AMap.Pixel(-10, -10),
         icon: icon, // 添加 Icon 图标 URL
-        title: "设备标点",
+        title: '设备标点',
         d_id: data.d_id,
         type_id: data.device_type_id,
       });
-      marker.on("click", (e) => {
+      marker.on('click', (e) => {
         console.log(e.target._originOpts.title);
         this.device_type_id = e.target._originOpts.type_id;
         this.pietf = true;
@@ -556,11 +565,11 @@ export default {
       this.getbaselist();
     },
     reset() {
-      this.inoffvalue = "";
-      this.versionsvalue2 = "";
-      this.statevalue = "";
-      this.typevalue = "";
-      this.idinput = "";
+      this.inoffvalue = '';
+      this.versionsvalue2 = '';
+      this.statevalue = '';
+      this.typevalue = '';
+      this.idinput = '';
       this.getbaselist();
     },
     // getmon() {
@@ -575,10 +584,10 @@ export default {
     // },
     getmon2() {
       this.$axios({
-        method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_org",
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.trap_manage.trap_org',
         data: this.qs.stringify({
-          page_item: "1000000",
+          page_item: '1000000',
         }),
       }).then((res) => {
         // console.log(res.data.data);
@@ -588,8 +597,8 @@ export default {
     },
     gettype() {
       this.$axios({
-        method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.home_map.home_map_device_type",
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.home_map.home_map_device_type',
       }).then((res) => {
         // console.log(res.data.data);
         this.typeoptions = res.data.data;
@@ -600,8 +609,8 @@ export default {
     getbaseinfo(d_id) {
       this.loading = true;
       this.$axios({
-        method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute_details",
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.home_map.device_distribute_details',
         data: this.qs.stringify({
           d_id: d_id,
         }),
@@ -612,47 +621,49 @@ export default {
         if (this.baseinfo[0].device_info) {
           // console.log(this.baseinfo[0].device_info.hlsHd)
           let hlsHd = this.baseinfo[0].device_info.hlsHd;
-          hlsHd = "https" + hlsHd.toString().slice(4);
+          hlsHd = 'https' + hlsHd.toString().slice(4);
           console.log(hlsHd);
           let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
           // console.log(hlsHd);
           this.$nextTick(() => {
-            document.getElementById("videoBon").innerHTML = playHtml;
+            document.getElementById('videoBon').innerHTML = playHtml;
             this.myVideo2[`myPlayer`] = new EZUIKit.EZUIPlayer(`myPlayer`);
             setTimeout(() => {
               this.myVideo2[`myPlayer`].play();
             }, 150);
           });
         } else {
-          var dom = document.getElementById("myPlayer");
+          var dom = document.getElementById('myPlayer');
           if (dom) {
-            dom.style.display = "none";
+            dom.style.display = 'none';
           }
         }
       });
     },
     //距离测量
     measure_distance() {
+      this.mouseTool.close();
       this.measure_index = 1;
-      this.draw("rule");
-      window.addEventListener("dblclick", () => {
+      this.draw('rule');
+      window.addEventListener('dblclick', () => {
         this.measure_index = 0;
         this.mouseTool.close();
       });
-      window.addEventListener("contextmenu", () => {
+      window.addEventListener('contextmenu', () => {
         this.measure_index = 0;
         this.mouseTool.close();
       });
     },
     //面积测量
     measure_area() {
+      this.mouseTool.close();
       this.measure_index = 2;
-      this.draw("measureArea");
-      window.addEventListener("dblclick", () => {
+      this.draw('measureArea');
+      window.addEventListener('dblclick', () => {
         this.measure_index = 0;
         this.mouseTool.close();
       });
-      window.addEventListener("contextmenu", () => {
+      window.addEventListener('contextmenu', () => {
         this.measure_index = 0;
         this.mouseTool.close();
       });
@@ -662,18 +673,16 @@ export default {
       this.mouseTool.close(true);
     },
     draw(type) {
-      console.log(type);
-      // this.mouseTool.close(true);
       var mouseTool = this.mouseTool;
       switch (type) {
-        case "rule": {
+        case 'rule': {
           mouseTool.rule({
             startMarkerOptions: {
               //可缺省
               icon: new AMap.Icon({
                 size: new AMap.Size(19, 31), //图标大小
                 imageSize: new AMap.Size(19, 31),
-                image: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
+                image: '//webapi.amap.com/theme/v1.3/markers/b/start.png',
               }),
               offset: new AMap.Pixel(-9, -31),
             },
@@ -682,7 +691,7 @@ export default {
               icon: new AMap.Icon({
                 size: new AMap.Size(19, 31), //图标大小
                 imageSize: new AMap.Size(19, 31),
-                image: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
+                image: '//webapi.amap.com/theme/v1.3/markers/b/end.png',
               }),
               offset: new AMap.Pixel(-9, -31),
             },
@@ -691,14 +700,14 @@ export default {
               icon: new AMap.Icon({
                 size: new AMap.Size(19, 31), //图标大小
                 imageSize: new AMap.Size(19, 31),
-                image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
+                image: '//webapi.amap.com/theme/v1.3/markers/b/mid.png',
               }),
               offset: new AMap.Pixel(-9, -31),
             },
             lineOptions: {
               //可缺省
-              strokeStyle: "solid",
-              strokeColor: "#FF33FF",
+              strokeStyle: 'solid',
+              strokeColor: '#FF33FF',
               strokeOpacity: 1,
               strokeWeight: 2,
             },
@@ -706,26 +715,106 @@ export default {
           });
           break;
         }
-        case "measureArea": {
-          mouseTool.measureArea({
-            strokeColor: "#80d8ff",
-            fillColor: "#80d8ff",
-            fillOpacity: 0.3,
-            //同 Polygon 的 Option 设置
+        case 'measureArea': {
+          // mouseTool.measureArea({
+          //   strokeColor: '#4f71ff',
+          //   fillColor: '#1791fc',
+          //   fillOpacity: 0.3,
+          //   //同 Polygon 的 Option 设置
+          // });
+          mouseTool.polygon({
+            strokeColor: '#4f71ff',
+            strokeOpacity: 1,
+            strokeWeight: 3,
+            strokeOpacity: 0.5,
+            fillColor: '#1791fc',
+            fillOpacity: 0.4,
+            strokeStyle: 'solid',
           });
           break;
         }
       }
     },
+    drawend() {
+      var mouseTool = this.mouseTool;
+      mouseTool.on('draw', (ev) => {
+        // 确定时测量面积鼠标工具
+        if (ev.obj.CLASS_NAME === 'Overlay.Polygon') {
+          const id = ev.obj._amap_id;
+          // console.log(mouseTool);
+          // 获取路径结束点坐标
+          const position = ev.obj._opts.path[ev.obj._opts.path.length - 1];
+          var marker = null;
+          marker = new AMap.Marker({
+            position: new AMap.LngLat(position[0], position[1]),
+            icon: 'https://webapi.amap.com/images/destroy.png',
+            offset: new AMap.Pixel(-7, 7),
+            id: id,
+          });
+          // 计算区域面积
+          var area =
+            Math.round(AMap.GeometryUtil.ringArea(ev.obj._opts.path)) / 1000000;
+          area = area.toFixed(2);
+          var center = this.getCenter(ev.obj._opts.path);
+          var text = null;
+          text = new AMap.Text({
+            position: center,
+            text: area + '平方公里',
+            offset: new AMap.Pixel(-20, -20),
+          });
+          this.map.add(text);
+          this.map.add(marker);
+          marker.on('click', (e) => {
+            var ids = e.target._originOpts.id;
+            this.map.remove(this.arealistmouse[ids].text);
+            this.map.remove(this.arealistmouse[ids].marker);
+            this.map.remove(this.arealistmouse[ids].mouse);
+          });
+          var obj = {
+            text: text,
+            marker: marker,
+            mouse: ev.obj,
+          };
+          this.arealistmouse[id] = obj;
+        }
+      });
+    },
+    // 取面对象 中心点
+    getCenter(PolygonArr) {
+      let total = PolygonArr.length;
+      let X = 0;
+      let Y = 0;
+      let Z = 0;
+      PolygonArr.forEach((lnglat) => {
+        let lng = (lnglat[0] * Math.PI) / 180;
+        let lat = (lnglat[1] * Math.PI) / 180;
+        let 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;
+
+      let Lng = Math.atan2(Y, X);
+      let Hyp = Math.sqrt(X * X + Y * Y);
+      let Lat = Math.atan2(Z, Hyp);
+      // console.log(Lng, Lat, Hyp);
+      return [(Lng * 180) / Math.PI, (Lat * 180) / Math.PI];
+    },
     //获取路径数据
     gettracklist_data() {
       this.$axios({
-        method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.home_map.user_walk_list",
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.home_map.user_walk_list',
         data: this.qs.stringify({
           create_time: this.tracktime,
           page: this.trackpage,
-          page_item: "5",
+          page_item: '5',
         }),
       }).then((res) => {
         console.log(res.data.data);
@@ -758,6 +847,16 @@ export default {
     //时间切换
     timechange(e) {
       console.log(e);
+      console.log(this.tracklistdata_backups);
+      for (var key in this.tracklistdata_backups) {
+        var list = this.tracklistdata_backups[key];
+        for (var j = 0; j < list.length; j++) {
+          var walk_list_arr = list[j].walk_list_arr;
+          for (var k = 0; k < walk_list_arr.length; k++) {
+            this.map.remove(walk_list_arr[k]);
+          }
+        }
+      }
       if (e) {
         this.tracktime = this.timetag(e);
         this.trackpage = 1;
@@ -821,9 +920,9 @@ export default {
       var years = time.getFullYear();
       var month = time.getMonth() + 1;
       var day = time.getDate();
-      month = month < 10 ? "0" + month : month;
-      day = day < 10 ? "0" + day : day;
-      return years + "-" + month + "-" + day;
+      month = month < 10 ? '0' + month : month;
+      day = day < 10 ? '0' + day : day;
+      return years + '-' + month + '-' + day;
     },
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -927,14 +1026,14 @@ export default {
     padding: 10px;
     width: 200px;
     // height: 500px;
-    .el-date-editor{
+    .el-date-editor {
       width: 200px;
     }
     .tracklist {
       width: 100%;
       height: 245px;
       margin-top: 15px;
-      .tracklist_tilte{
+      .tracklist_tilte {
         text-align: center;
         font-size: 14px;
       }
@@ -975,7 +1074,7 @@ export default {
           color: #ff4949;
         }
       }
-      .tracklist_item:last-child{
+      .tracklist_item:last-child {
         border-bottom: none;
       }
     }
@@ -1107,6 +1206,8 @@ export default {
     .measurebox_item {
       text-align: center;
       font-size: 14px;
+      cursor: pointer;
+      user-select: none;
     }
     .measurebox_line {
       margin: 10px 0;

minggao/src/page/homepage/pestdistribute.vue

@@ -114,7 +114,7 @@
         @click="measure_area"
       >
         <i class="iconfont icon-mianji"></i>
-        <p>侧面</p>
+        <p>测面</p>
       </div>
     </div>
     <el-dialog
@@ -187,7 +187,8 @@ export default {
       pestboxloading: true,
       center: [114.052758, 22.545817],
       measure_index:0,
-      mouseTool:null
+      mouseTool:null,
+      arealistmouse: {},
     };
   },
   //监听属性 类似于data概念
@@ -256,6 +257,7 @@ export default {
       });
       AMap.plugin(["AMap.MouseTool"], () => {
         this.mouseTool = new AMap.MouseTool(map);
+        this.mouseTool.on('draw', this.drawend());
       });
       this.map = map;
       this.getwornlist();
@@ -784,16 +786,90 @@ export default {
           break;
         }
         case "measureArea": {
-          mouseTool.measureArea({
-            strokeColor: "#80d8ff",
-            fillColor: "#80d8ff",
-            fillOpacity: 0.3,
-            //同 Polygon 的 Option 设置
+          mouseTool.polygon({
+            strokeColor: '#4f71ff',
+            strokeOpacity: 1,
+            strokeWeight: 3,
+            strokeOpacity: 0.5,
+            fillColor: '#1791fc',
+            fillOpacity: 0.4,
+            strokeStyle: 'solid',
           });
           break;
         }
       }
     },
+    drawend() {
+      var mouseTool = this.mouseTool;
+      mouseTool.on('draw', (ev) => {
+        // 确定时测量面积鼠标工具
+        if (ev.obj.CLASS_NAME === 'Overlay.Polygon') {
+          const id = ev.obj._amap_id;
+          // console.log(mouseTool);
+          // 获取路径结束点坐标
+          const position = ev.obj._opts.path[ev.obj._opts.path.length - 1];
+          var marker = null;
+          marker = new AMap.Marker({
+            position: new AMap.LngLat(position[0], position[1]),
+            icon: 'https://webapi.amap.com/images/destroy.png',
+            offset: new AMap.Pixel(-7, 7),
+            id: id,
+          });
+          // 计算区域面积
+          var area =
+            Math.round(AMap.GeometryUtil.ringArea(ev.obj._opts.path)) / 1000000;
+          area = area.toFixed(2);
+          var center = this.getCenter(ev.obj._opts.path);
+          var text = null;
+          text = new AMap.Text({
+            position: center,
+            text: area + '平方公里',
+            offset: new AMap.Pixel(-20, -20),
+          });
+          this.map.add(text);
+          this.map.add(marker);
+          marker.on('click', (e) => {
+            var ids = e.target._originOpts.id;
+            this.map.remove(this.arealistmouse[ids].text);
+            this.map.remove(this.arealistmouse[ids].marker);
+            this.map.remove(this.arealistmouse[ids].mouse);
+          });
+          var obj = {
+            text: text,
+            marker: marker,
+            mouse: ev.obj,
+          };
+          this.arealistmouse[id] = obj;
+        }
+      });
+    },
+    // 取面对象 中心点
+    getCenter(PolygonArr) {
+      let total = PolygonArr.length;
+      let X = 0;
+      let Y = 0;
+      let Z = 0;
+      PolygonArr.forEach((lnglat) => {
+        let lng = (lnglat[0] * Math.PI) / 180;
+        let lat = (lnglat[1] * Math.PI) / 180;
+        let 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;
+
+      let Lng = Math.atan2(Y, X);
+      let Hyp = Math.sqrt(X * X + Y * Y);
+      let Lat = Math.atan2(Z, Hyp);
+      // console.log(Lng, Lat, Hyp);
+      return [(Lng * 180) / Math.PI, (Lat * 180) / Math.PI];
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -879,6 +955,8 @@ export default {
     .measurebox_item {
       text-align: center;
       font-size: 14px;
+      cursor: pointer;
+      user-select: none;
     }
     .measurebox_line {
       margin: 10px 0;