修复标记疑点bug -- 绘制完成后点击保存按钮报错；初始化地图不渲染；修改首页chart标题

public/static/config/config.js

@@ -24,5 +24,5 @@ var map2DViewer = {
   jlMap:null,
   jlControl: {},
   layers:{},
-  groups:{}
+  groups:{},
 }

public/static/plugins/draw-plugin/leaflet.draw.js

@@ -641,6 +641,10 @@ map2DViewer.setDrawTool = function (options) {
           this.measureTool.moveMarker = null;
         }
         this.measureTool.remove();
+        this.measureTool = null
+        // map2DViewer.map.removeControl(map2DViewer.measureTool);
+        map2DViewer.measureTool = null;
+        console.log(map2DViewer.measureTool, "检查map中是否还存在control");
       }
 
       break;

src/components/map/MapHolder.vue

@@ -30,7 +30,7 @@ export default {
       currentHtml: null,
       // 标记疑点
       currentLabelCid: null,
-      currentLabelHtml: null
+      currentLabelHtml: null,
     };
   },
   mounted() {
@@ -48,7 +48,7 @@ export default {
     this.$store.state.mapMethodsCollection.set("RENDER", {
       addPolygonLayer: this.addPolygonLayer,
       setView: this.setView,
-      deletePolygonLayer: this.deletePolygonLayer
+      deletePolygonLayer: this.deletePolygonLayer,
     });
   },
   beforeDestroyed() {
@@ -68,7 +68,7 @@ export default {
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    }
+    },
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -79,16 +79,18 @@ export default {
       } else {
         console.log("移除疑点标记事件");
         this.stopLabelCase();
+        if (this.labelPopup) {
+          map2DViewer.map.closePopup();
+          this.labelPopup = null;
+        }
       }
     },
     "$store.state.navSelect": {
       handler(val) {
-        console.log(val, "currentMenu -- test");
         if (val.index !== "3") {
           if (this.JLControlShowStatus) {
             this.JLControl();
           }
-          this.stopLabelCase();
           this.$store.state.bottomMenuIndexs.index = -1;
           this.$store.state.bottomMenuIndexs.subIndex = -1;
         }
@@ -97,8 +99,8 @@ export default {
           this.getJSonData();
         });
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   methods: {
     // 开始标记疑点事件
@@ -107,12 +109,10 @@ export default {
     },
     // 停止标记疑点事件
     stopLabelCase() {
-      try {
+      if (map2DViewer.measureTool) {
         map2DViewer.setDrawTool({
-          action: "remove"
+          action: "remove",
         });
-      } catch (e) {
-        console.log("MapHolder.vue 停止标记疑点事件 error");
       }
     },
     // 常规图层弹窗
@@ -134,14 +134,14 @@ export default {
         $(() => {
           // 法律法规点击事件
           if ($(`#${str}_id a`)) {
-            $(`#${str}_id a`).click(e => {
+            $(`#${str}_id a`).click((e) => {
               console.log(e, "显示疑点相关的弹窗");
               this.$store.state.lawPopupShow = true;
             });
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click(e => {
+            $(`#${str}_id input`).click((e) => {
               switch (e.target.defaultValue) {
                 case "修改":
                   this.modifyBtnEvent();
@@ -174,7 +174,7 @@ export default {
         $(() => {
           console.log($(`#${str}_id textarea`).val(), "textarea");
           $(`#${str}_id`).css("height", "100%");
-          $(`#${str}_id input`).click(e => {
+          $(`#${str}_id input`).click((e) => {
             console.log(e.target.defaultValue);
             switch (e.target.defaultValue) {
               case "删除":
@@ -182,6 +182,7 @@ export default {
                 break;
               case "保存":
                 this.saveBtnEvent(str, coord, data);
+                console.log(str, coord, data);
                 break;
             }
           });
@@ -204,16 +205,13 @@ export default {
       console.log("save btn");
       let type = $(`#${str}_id select`).val();
       let des = $(`#${str}_id textarea`).val();
-      let _oldMyLabelPointsArr = this.$store.state.myLabelPointsArr;
-      let _myLabelPointsArrMap = {
+      let geometryAttr = {
         id: publicFun.buildGuid("myLabel"),
         coord: coord,
         type: type,
         des: des,
-        data: data
       };
-      _oldMyLabelPointsArr.push(_myLabelPointsArrMap);
-      this.$store.commit("changeMyLabelData", _oldMyLabelPointsArr);
+      this.$store.getters.myLabelPointsArr.push(geometryAttr);
       map2DViewer.map.closePopup();
     },
     // 卷帘对比
@@ -223,7 +221,9 @@ export default {
         map2DViewer.jlMap = L.tileLayer(
           "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         ).addTo(map2DViewer.map);
-        map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
+        map2DViewer.jlControl = L.control
+          .sideBySide(map2DViewer.map, map2DViewer.jlMap)
+          .addTo(map2DViewer.map);
       } else {
         map2DViewer.map.removeControl(map2DViewer.jlControl);
         map2DViewer.map.removeLayer(map2DViewer.jlMap);
@@ -237,42 +237,47 @@ export default {
       // 每次点击按钮后重绘弹窗
       if (this.currentHtml && this.currentCid) {
         setTimeout(() => {
-          this.popup.setContent(this.createAuditDiv(this.currentCid)).openOn(map2DViewer.map);
+          this.popup
+            .setContent(this.createAuditDiv(this.currentCid))
+            .openOn(map2DViewer.map);
         }, 300);
       }
     },
     // 初始化引入绘制工具
     initDraw() {
-      // 引入疑点标记绘制方法
-      map2DViewer.drawToolFire = data => {
-        try {
-          // 纬经度
-          if (data && data.points.length >= 1) {
-            console.log(data.points[data.points.length - 1], "绘制的图形");
-            let coord = data.points[data.points.length - 1];
-            if (coord && coord.length >= 2) {
-              let newCoord = { lat: coord[0], lng: coord[1] };
-              this.labelDetailsPopupShow = true;
-              this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
-                .setLatLng(newCoord)
-                .setContent(this.createLabelDiv("label", coord, data))
-                .openOn(map2DViewer.map);
-              this.labelDetailsPopupShow = false;
+      console.log(map2DViewer.measureTool, "initDraw");
+      if (!map2DViewer.measureTool) {
+        // 引入疑点标记绘制方法
+        map2DViewer.drawToolFire = (data) => {
+          try {
+            // 纬经度
+            if (data && data.points.length >= 1) {
+              console.log(data.points[data.points.length - 1], "绘制的图形");
+              let coord = data.points[data.points.length - 1];
+              if (coord && coord.length >= 2) {
+                let newCoord = { lat: coord[0], lng: coord[1] };
+                this.labelDetailsPopupShow = true;
+                this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
+                  .setLatLng(newCoord)
+                  .setContent(this.createLabelDiv("label", coord, data))
+                  .openOn(map2DViewer.map);
+                this.labelDetailsPopupShow = false;
+              }
             }
+          } catch (e) {
+            console.log("引入疑点标记绘制方法 error");
           }
-        } catch (e) {
-          console.log("引入疑点标记绘制方法 error");
-        }
-      };
-      map2DViewer.setDrawTool({
-        action: "add",
-        offset: [150, 50],
-        background: "#fff",
-        color: "red",
-        font_size: "14px",
-        closeButton: true,
-        iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png"
-      });
+        };
+        map2DViewer.setDrawTool({
+          action: "add",
+          offset: [150, 50],
+          background: "#fff",
+          color: "red",
+          font_size: "14px",
+          closeButton: true,
+          iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
+        });
+      }
     },
 
     mapInit: function () {
@@ -299,14 +304,17 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 16
+        maxZoom: 16,
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
       let guid = publicFun.buildGuid("baseLayer");
       let layer = L.esri
         .tiledMapLayer({
-          url: systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
+          url:
+            systemConfig.mapService +
+            "?servertype=Street_Purplish_Blue&token=" +
+            systemConfig.token,
           // url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
           // tileSize: 512
         })
@@ -326,14 +334,16 @@ export default {
         map2DViewer.groups["district_polygon"].remove();
       }
       // 请求并渲染新的区域图层
-      get("./static/json/pdgeojson.json", "").then(geoJson => {
+      get("./static/json/pdgeojson.json", "").then((geoJson) => {
         map2DViewer.groups["district_polygon"] = L.featureGroup();
         map2DViewer.groups["district_label"] = L.featureGroup();
         // console.log(map2DViewer.groups["district_polygon"], "district_polygon group");
         map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
         map2DViewer.groups["district_label"].addTo(map2DViewer.map);
-        geoJson.features.map(feature => {
-          if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
+        geoJson.features.map((feature) => {
+          if (
+            this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
+          ) {
             let center = turf.center(feature.geometry);
             this.renderPolygon(feature);
           }
@@ -373,7 +383,7 @@ export default {
         weight: 3,
         fillColor: this.getColor(itemvalue),
         opacity: 1,
-        fillOpacity: 0.4
+        fillOpacity: 0.4,
       }).addTo(map2DViewer.groups["district_polygon"]);
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
       center.reverse();
@@ -381,25 +391,25 @@ export default {
         radius: 10,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273"
+        color: "#e6d273",
       });
       wmarker.bindLabel(feature.properties.NAME, {
         noHide: true,
         clickable: true,
-        offset: [-25, 10]
+        offset: [-25, 10],
       });
       wmarker.addTo(map2DViewer.groups["district_label"]);
       L.circleMarker(center, {
         radius: 8,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273"
+        color: "#e6d273",
       }).addTo(map2DViewer.groups["district_polygon"]);
       L.circleMarker(center, {
         radius: 5,
         weight: 1,
         fillOpacity: 1,
-        color: "#e6d273"
+        color: "#e6d273",
       }).addTo(map2DViewer.groups["district_polygon"]);
     },
     latLngsToReverse: function (latlngsAry) {
@@ -427,7 +437,7 @@ export default {
     addPolygonLayer(data, cid, color) {
       // cid -- 'yongjiu'
       // console.log(data, cid, color);
-      data.map(feature => {
+      data.map((feature) => {
         let polygonData = JSON.parse(JSON.stringify(feature));
         let coordinates = polygonData.geometry.coordinates[0];
         let infos = polygonData.properties;
@@ -436,16 +446,18 @@ export default {
           weight: 3,
           fillColor: color,
           opacity: 1,
-          fillOpacity: 0.4
+          fillOpacity: 0.4,
         }).addTo(map2DViewer.map);
         map2DViewer.polygons[`${cid}_layer`].push(polygon);
         polygon.infos = infos;
-        polygon.on("click", e => {
+        polygon.on("click", (e) => {
           // console.log(e, "polygon");
           this.auditPopupShow = true;
           console.log(e.latlng, "获取当前弹窗坐标111");
 
-          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(this.createAuditDiv("cid"));
+          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
+            .setLatLng(e.latlng)
+            .setContent(this.createAuditDiv("cid"));
           // .openOn(map2DViewer.map);
           this.auditPopupShow = false;
           this.popup.openOn(map2DViewer.map);
@@ -456,11 +468,11 @@ export default {
 
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach(polygon => {
+      map2DViewer.polygons[layer].forEach((polygon) => {
         map2DViewer.map.removeLayer(polygon);
       });
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/store/index.js

@@ -35,6 +35,7 @@ export default new Vuex.Store({
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
+    myLabelPointsArr:(state) => state.myLabelPointsArr
   },
   mutations: {
     baseMapRight(state, position) {

src/views/ComprehensiveAnalysis.vue

@@ -269,7 +269,10 @@ export default {
       return this.$store.state.leftMenuTitle;
     },
     getMyLabelData() {
-      return this.$store.state.myLabelPointsArr;
+      return this.$store.getters.myLabelPointsArr;
+    },
+    getMyPoints() {
+      return map2DViewer.myLabels;
     },
   },
   watch: {
@@ -324,16 +327,23 @@ export default {
       },
       deep: true,
     },
+    // getMyPoints:{
+    //   handler(val){
+    //     console.log(getMyPoints,"myPoints");
+    //   },
+    //   deep:true,
+    //   immediate:true
+    // }
     getMyLabelData: {
       handler(val) {
-        // console.log(val, "获取我的疑点数组");
+        console.log(val, "获取我的疑点数组");
         if (val.length > 0) {
+          console.log("获取的我的疑点数据");
           this.rightLabelData = val.map((v, i) => {
             return {
               id: v.id,
               name: `疑点 ${i}`,
               coord: v.coord,
-              data: v.data,
               type: v.type,
               des: v.des,
             };
@@ -560,8 +570,8 @@ export default {
           .setView(data.coord, 16);
         this.tableData.push({
           name: data.name,
-          type:data.type,
-          des:data.des
+          type: data.type,
+          des: data.des,
         });
         console.log(data, "myLabelTable");
       }

src/views/HomeView.vue

@@ -404,7 +404,7 @@ export default {
         main: [
           {
             type: "chart",
-            title: "浦东新区自然资源分布TOP10",
+            title: "浦东新区自然资源分布",
             boxWidth: "360",
             boxHeight: "370",
             boxBackground: "rgba(0,39,77,0.6)",