1 结合项目中 停气监管 需要画多区域功能，去 高德开发平台 了解 AMap.MouseTool 鼠标事件的使用，实现 能 画多区域，并对某个区域编辑 和 删除。

zh-baseversion-web/src/components/GasShutDownDrawArea/index.vue

@@ -37,7 +37,6 @@
           gaoMap: null,
           mouseTool: null,
           drawLayers: [],
-          selectedLayerIndex: null,
           overlays: null,
           firstClick: 0,
           nowMouseTarget: null,
@@ -72,23 +71,27 @@
       initMapEvent(){
         let that = this;
         this.gaoMap.map.on("click", () => {
-          if(that.nowMouseTarget && !that.isClickPolygonFlag){
-            //that.$emit("input", []);
-            that.mouseTool && that.mouseTool.close();
-            that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close();
-            //that.gaoMap.map.remove(that.nowMouseTarget);
-            that.mouseTool && that.mouseTool.polygon(that.opts);
-            if(!that.mouseTool){
-              that.initMouseEvent();
-            }
-            that.isClickPolygonFlag = true;
+          // if(that.nowMouseTarget && !that.isClickPolygonFlag){
+          //   //that.$emit("input", []);
+          //   // that.mouseTool && that.mouseTool.close();
+          //   // that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close();
+          //   //that.gaoMap.map.remove(that.nowMouseTarget);
+          //   // that.mouseTool && that.mouseTool.polygon(that.opts);
+          //   // if(!that.mouseTool){
+          //   //   that.initMouseEvent();
+          //   // }
+          //   that.isClickPolygonFlag = true;
 
-            this.drawLayers.push('[' + that.nowMouseTarget + ']');
-            that.nowMouseTarget.setMap(this.gaoMap.map);
-            this.selectedLayerIndex = this.drawLayers.length - 1; // 设置当前选中的图层索引
-            console.log("this.drawLayers = " + this.drawLayers)
-            that.nowMouseTarget = null;
-          }
+          //   this.drawLayers.push('[' + that.nowMouseTarget + ']');
+          //   // that.nowMouseTarget.setMap(this.gaoMap.map);
+          //   this.selectedLayerIndex = this.drawLayers.length - 1; // 设置当前选中的图层索引
+          //   console.log("this.drawLayers = " + this.drawLayers)
+          //   that.nowMouseTarget = null;
+          //   that.mouseTool.polygon(that.opts);
+          // }
+          // if (!that.isClickPolygonFlag) {
+          //   that.mouseTool.polygon(that.opts);
+          // } 
         });
       },
       //初始化鼠标事件
@@ -98,122 +101,84 @@
           that.mouseTool = new AMap.MouseTool(this.gaoMap.map);
           that.mouseTool.polygon(that.opts);
           that.mouseTool.on('draw',function(e){   
-            that.nowMouseTarget = e.obj;
-            that.$emit("input", that.nowMouseTarget._opts.path);
+            let nowMouseTargetObj = new Object();
+            nowMouseTargetObj= e.obj;
+            // that.$emit("input", that.nowMouseTarget._opts.path);
             that.isClickPolygonFlag = false;
-            if(that.nowMouseTarget._opts.path.length > 2){
+            if(nowMouseTargetObj._opts.path.length > 2){
               that.mouseTool.close();
               that.isClickPolygonFlag = true;
             }
             that.firstClick = 0;
-            e.obj.on('click',function () {
+            nowMouseTargetObj.on('click',function () {
               that.isClickPolygonFlag = true;
               that.firstClick++;
               if(that.firstClick < 2){
                 that.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => {
                   const polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.obj);
-                  that.nowMouseTarget.polygonEditor = polygonEditor;
+                  nowMouseTargetObj.polygonEditor = polygonEditor;
                   polygonEditor.on("removenode", (e) => {
-                    that.$emit("input", e.target._opts.path);
+                    // that.$emit("input", e.target._opts.path);
                     that.isClickPolygonFlag = true;
-                    if(that.nowMouseTarget._opts.path.length == 0){
+                    if(nowMouseTargetObj._opts.path.length == 0){
                       setTimeout(() => {
                         that.mouseTool.polygon(that.opts);
                       }, 230);
                     }
                   });
                   polygonEditor.on("adjust",(e) =>{
-                    that.$emit("input", e.target._opts.path);
+                    // that.$emit("input", e.target._opts.path);
                   })
                   polygonEditor.on("addnode",(e) =>{
-                    that.$emit("input", e.target._opts.path);
+                    // that.$emit("input", e.target._opts.path);
                   })
                   polygonEditor.open();
                 });
               }
             });
-            e.obj.on("mouseout", (e) => {
+            nowMouseTargetObj.on("mouseout", (e) => {
               that.isClickPolygonFlag = false;
+              that.mouseTool.polygon(that.opts);
+              console.log("mouseout === 了。。。。。。")
+            })
+
+            // 鼠标放到了这个上面
+            nowMouseTargetObj.on("mouseover", (e) => { 
+              that.mouseTool.polygon(null);
+              console.log("mouseover === 了。。。。。。")
             })
             //右键关闭区域编辑
-            e.obj.on("rightclick",() => {
+            nowMouseTargetObj.on("rightclick",(e) => {
               that.firstClick = 0;
-              that.nowMouseTarget.polygonEditor.close();
+              nowMouseTargetObj.polygonEditor.close();
             })
-            //双击删除
-            e.obj.on('dblclick',(e) => {
-              console.log("this.e = " + e)
+
+            // 双击删除
+            nowMouseTargetObj.on("dblclick",(e) => {    
               that.$confirm("是否删除此区域", { type: "warning" })
                 .then(() => { 
-                console.log("确实要删除了。")
-                debugger;
-
-                let point = new AMap.LngLat(e.lngLat.lng, e.lngLat.lat);
-
-                for (let i = 0; i < this.drawLayers.length; i++) {
-
-                  if (this.drawLayers[i].contains(point)){
-                    console.log("第" + i + "个包含点击的坐标点，该删除");
+                  let deleteIndex = null;
+                  for (let i = 0;i < that.drawLayers.length;i ++) {       
+                    var isPointInRing = AMap.GeometryUtil.isPointInRing(e.lnglat,that.drawLayers[i]._opts.path);
+                    if (isPointInRing) {
+                      deleteIndex = i;
+                    }
                   }
+                  if (deleteIndex != null) {
+                    that.drawLayers[deleteIndex].polygonEditor.close();
+                    that.gaoMap.map.remove(that.drawLayers[deleteIndex]);
+                    that.drawLayers.splice(deleteIndex, 1);
                   }
                 }).catch(() => {});
             })
-          }),
-          that.mouseTool.on('click',()=>{
-            if (!this.selectedLayerIndex) return;
-            let layer = this.drawLayers[this.selectedLayerIndex];
-            let point = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
 
-            if (layer.contains(point)) {
-              // 点击点在区域内，则添加到区域中
-              layer.getPath().push(point);
-            } else {
-              // 点击点不在区域内，则删除最近的一个点
-              let path = layer.getPath();
-              let lastPoint = path[path.length - 1];
-              if (lastPoint.distance(point) > 50) {
-                path.pop();
-              }
+            if (nowMouseTargetObj._opts.path.length > 2) {
+              that.$set(that.drawLayers, that.drawLayers.length, nowMouseTargetObj);
             }
+            that.mouseTool.polygon(that.opts);
           })
         });
       }, 
-      handleDrawEnd(e){
-        let layer = e.layer;
-        this.drawLayers.push(layer);
-        layer.setMap(this.gaoMap.map);
-        // 设置当前选中的图层索引
-        this.selectedLayerIndex = this.drawLayers.length - 1;
-      },
-      handleClick(e){
-        if (!this.selectedLayerIndex) return;
-
-        let layer = this.drawLayers[this.selectedLayerIndex];
-        let point = new Amap.lngLat(e.lnglat.lng,e.lnglat.lat);
-
-        if (layer.contains(point)) {
-          //点击点在区域内，则添加到区域内
-          layer.getPath().push(point);
-        } else {
-          //点击点不在区域内，则删除最近的一个点
-          let path = layer.getPath();
-          let lastPoint = path[path.length - 1];
-          if (lastPoint.distance(point) > 50) {
-            path.pop();
-          }
-        }
-      },
-      selectLayer(index) {
-        this.selectedLayerIndex = index;
-      },
-      deleteLayer(index){
-        let layer = this.drawLayers[index];
-        layer.setMap(null);
-        this.drawLayers.splice(index,1);
-        if (this.selectedLayerIndex >= index) {
-          this.selectedLayerIndex = Math.max(0,this.selectedLayerIndex - 1);
-        }
-      },
       //区域回显
       loadArea(){
         const polygon = new AMap.Polygon({

zh-baseversion-web/src/views/supplybalance/stop/index.vue

@@ -246,8 +246,8 @@
 
 <script>
 import { listSup, getSup, delSup, addSup, updateSup, exportSup } from "@/api/supplybalance/stop";
-import DrawArea from "@/components/DrawArea";
-// import DrawArea from "@/components/GasShutDownDrawArea"
+// import DrawArea from "@/components/DrawArea";
+import DrawArea from "@/components/GasShutDownDrawArea"
 import DetailInfo from "./components/DetailInfo";
 export default {
   name: "Sup",
@@ -336,6 +336,7 @@ export default {
   },
   watch:{
     path(newVal,oldVal){
+      console.log("index.watch.path = " + newVal);
       if(newVal.length == 0){
         this.form.fGasStopArea = "";
         return