1.修复新增标记疑点后，右侧我的标记不能定位的bug; 2. 跳转页面后清楚综合分析栏上所有图层

src/components/map/MapHolder.vue

@@ -87,8 +87,8 @@ export default {
           for (let i in map2DViewer.myLabels) {
             console.log(i, "图层名");
             this.deleteGeometry(map2DViewer.myLabels[i]);
+            map2DViewer.myLabels[i] = null
           }
-          map2DViewer.myLabels = null;
         }
 
         this.initDraw();

src/views/ComprehensiveAnalysis.vue

@@ -19,7 +19,12 @@
     </div>
     <div class="comprehensive-analysis-searchbox">
       <el-input placeholder="请输入地名地址" v-model="addressInput">
-        <el-button type="primary" slot="append" icon="el-icon-search" style="vertical-align: bottom"></el-button>
+        <el-button
+          type="primary"
+          slot="append"
+          icon="el-icon-search"
+          style="vertical-align: bottom"
+        ></el-button>
       </el-input>
     </div>
     <!-- 属性弹窗 -->
@@ -46,7 +51,7 @@
         legendTitle: legendTitle,
         leftWidth: '30%',
         rightWidth: '70%',
-        rightItemWidth: '120'
+        rightItemWidth: '120',
       }"
     />
 
@@ -66,9 +71,21 @@
           <div @click="leftPanelDisplay('hide')"><div></div></div>
         </div>
         <div class="control-container">
-          <el-input class="control-container-input" v-model="filterText" placeholder="请输入文本"></el-input>
-          <el-tooltip effect="light" :content="isLeftLock ? '解锁面板' : '锁定面板'" placement="bottom-end">
-            <div :class="{ 'lock-style': isLeftLock }" class="control-container-pin-btn" @click="leftPanelLock"></div>
+          <el-input
+            class="control-container-input"
+            v-model="filterText"
+            placeholder="请输入文本"
+          ></el-input>
+          <el-tooltip
+            effect="light"
+            :content="isLeftLock ? '解锁面板' : '锁定面板'"
+            placement="bottom-end"
+          >
+            <div
+              :class="{ 'lock-style': isLeftLock }"
+              class="control-container-pin-btn"
+              @click="leftPanelLock"
+            ></div>
           </el-tooltip>
         </div>
         <div class="contant-container">
@@ -83,7 +100,13 @@
               :filter-node-method="filterNode"
             >
               <span class="custom-tree-node" slot-scope="{ node }">
-                <template v-if="node.level === 3 || node.parent.label === '所有图层' || node.parent.label === '我的模型'">
+                <template
+                  v-if="
+                    node.level === 3 ||
+                    node.parent.label === '所有图层' ||
+                    node.parent.label === '我的模型'
+                  "
+                >
                   <el-checkbox v-model="node.checked" style="position: relative"
                     >{{ node.label
                     }}<span
@@ -117,7 +140,7 @@
                   <div
                     :class="{
                       'tree-arrow': !node.expanded,
-                      'tree-arrow-expanded': node.expanded
+                      'tree-arrow-expanded': node.expanded,
                     }"
                   ></div>
                   <span>{{ node.label }}</span>
@@ -137,15 +160,27 @@
         </div>
 
         <div class="control-container">
-          <el-tooltip effect="light" :content="isRightLock ? '解锁面板' : '锁定面板'" placement="bottom-start">
-            <div :class="{ 'lock-style': isRightLock }" @click="rightPanelLock"></div>
+          <el-tooltip
+            effect="light"
+            :content="isRightLock ? '解锁面板' : '锁定面板'"
+            placement="bottom-start"
+          >
+            <div
+              :class="{ 'lock-style': isRightLock }"
+              @click="rightPanelLock"
+            ></div>
           </el-tooltip>
         </div>
 
         <div class="contant-container">
           <div class="contant-container-innerbox">
             <el-collapse v-model="activeNames">
-              <el-collapse-item v-for="key in Object.keys(originalData)" :key="key" :title="key" :name="key">
+              <el-collapse-item
+                v-for="key in Object.keys(originalData)"
+                :key="key"
+                :title="key"
+                :name="key"
+              >
                 <div
                   class="panel-list-item"
                   v-for="i in originalData[key]"
@@ -157,15 +192,33 @@
               </el-collapse-item>
 
               <el-collapse-item title="我的标记" name="myLabel">
-                <div class="panel-list-item" v-for="item in rightLabelData" :key="item.id">
+                <div
+                  class="panel-list-item"
+                  v-for="item in rightLabelData"
+                  :key="item.id"
+                >
                   <div @click="listItemClick('new', item)">
                     {{ item.name }}
                   </div>
                   <span class="operation-icon"
-                    ><el-button size="normal" type="text" icon="el-icon-edit" @click="updateLabel(item)"></el-button
-                    ><el-button size="normal" type="text" icon="el-icon-delete" @click="deleteLabel(item.id)"></el-button
+                    ><el-button
+                      size="normal"
+                      type="text"
+                      icon="el-icon-edit"
+                      @click="updateLabel(item)"
+                    ></el-button
+                    ><el-button
+                      size="normal"
+                      type="text"
+                      icon="el-icon-delete"
+                      @click="deleteLabel(item.id)"
+                    ></el-button
+                  ></span>
+                  <span
+                    class="visible-icon"
+                    :class="{ click: item.geometryChecked }"
+                    @click="controlLabel(item)"
                   ></span>
-                  <span class="visible-icon" :class="{ click: item.geometryChecked }" @click="controlLabel(item)"></span>
                 </div>
               </el-collapse-item>
             </el-collapse>
@@ -193,7 +246,7 @@ export default {
     Legend,
     AttributePopup,
     LawPopup,
-    LabelCasePopup
+    LabelCasePopup,
   },
   data() {
     return {
@@ -216,7 +269,7 @@ export default {
       modelData: [],
       defaultProps: {
         children: "children",
-        label: "label"
+        label: "label",
       },
       legendIcon: [],
       legendTitle: [],
@@ -226,7 +279,7 @@ export default {
       // 存放对应图层的坐标
       treeCoordMap: new Map(),
       isLeftLock: true,
-      isRightLock: true
+      isRightLock: true,
     };
   },
   computed: {
@@ -248,7 +301,7 @@ export default {
       },
       set(val) {
         this.$store.state.attrTableShow = val;
-      }
+      },
     },
     updateCasePopupShow: {
       get() {
@@ -256,8 +309,8 @@ export default {
       },
       set(val) {
         this.$store.state.updateCasePopupShow = val;
-      }
-    }
+      },
+    },
   },
   watch: {
     getLeftMenuTitle: {
@@ -270,7 +323,7 @@ export default {
           }
         });
       },
-      immediate: true
+      immediate: true,
     },
     legendTitle(val) {
       // console.log(val, "监听当前图例item数量");
@@ -294,22 +347,23 @@ export default {
         console.log(val, "目前存在的自定义模型");
         let myModelRef = this.$refs.tree.data[2];
         if (myModelRef.label === "我的模型") {
-          this.$refs.tree.data[2].children = val.map(ele => {
+          this.$refs.tree.data[2].children = val.map((ele) => {
             let firstId = publicFun.buildGuid();
             treeIdMap.set(ele.name, firstId);
             return {
               id: firstId,
               label: ele.name,
-              data: ele.data
+              data: ele.data,
             };
           });
           console.log(myModelRef.children, "最新的数据");
         }
       },
-      deep: true
+      deep: true,
     },
     getMyLabelData: {
       handler(val) {
+        console.log("标记点保存事件成功，允许开始定位");
         this.rightLabelData = [];
         if (val.length > 0) {
           this.rightLabelData = val.map((v, i) => {
@@ -322,20 +376,20 @@ export default {
               des: data.properties.desc,
               geojson: v.geojson,
               geometryChecked: false,
-              featureType: data.properties.featureType
+              featureType: data.properties.featureType,
             };
           });
-          console.log(this.rightLabelData, "rightLabelData");
+          // console.log(this.rightLabelData, "rightLabelData");
         }
       },
-      deep: true
+      deep: true,
       // immediate: true,
-    }
+    },
   },
   created() {
     this.modelData = [];
     // 分别对应1、2、3级节点
-    this.modelData = treeModel.map(item1 => {
+    this.modelData = treeModel.map((item1) => {
       if (item1.type === "我的模型") {
         this.myModel = item1;
       }
@@ -343,23 +397,23 @@ export default {
       return {
         id: item1.id,
         label: item1.type,
-        children: item1.children.map(item2 => {
+        children: item1.children.map((item2) => {
           treeIdMap.set(item2.type, item2.id);
           return {
             id: item2.id,
             label: item2.type,
-            children: item2.children.map(item3 => {
+            children: item2.children.map((item3) => {
               treeIdMap.set(item3.type, item3.id);
               this.rightPanelDataMap.set(item3.type, item3.children);
               return {
                 id: item3.id,
                 label: item3.type,
                 children: [],
-                checked: false
+                checked: false,
               };
-            })
+            }),
           };
-        })
+        }),
       };
     });
 
@@ -368,7 +422,7 @@ export default {
   },
 
   mounted() {
-    map2DViewer.map.on("move", e => {
+    map2DViewer.map.on("move", (e) => {
       if (!this.isLeftLock) {
         this.showLeftBox = false;
         this.leftBoxBtn = true;
@@ -385,9 +439,20 @@ export default {
     this.treeCoordMap.clear();
     map2DViewer.map.off("move");
     for (let layer in map2DViewer.polygons) {
-      this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer(layer);
+      this.$store.state.mapMethodsCollection
+        .get("RENDER")
+        .deletePolygonLayer(layer);
+    }
+
+    for (let label in map2DViewer.myLabels) {
+      this.$store.state.mapMethodsCollection
+        .get("RENDER")
+        .deleteGeometry(map2DViewer.myLabels[label]);
     }
     map2DViewer.polygons = {};
+    map2DViewer.myLabels = {};
+    this.attrTableShow = false;
+    this.updateCasePopupShow = false;
   },
   methods: {
     // 调用我的标记接口
@@ -397,17 +462,17 @@ export default {
         paramData = {
           userId: Number(localStorage.getItem("USER_ID")),
           sourceId: 0,
-          pageSize: 10
+          pageSize: 10,
         };
-        this.$Post(this.urlsCollection.selectByUser, paramData).then(res => {
+        this.$Post(this.urlsCollection.selectByUser, paramData).then((res) => {
           if (res.code === 200 && res.content.length >= 1) {
             console.log(res);
             this.$store.state.myLabelPointsArr = [];
-            this.$store.state.myLabelPointsArr = res.content.map(v => {
+            this.$store.state.myLabelPointsArr = res.content.map((v) => {
               return {
                 id: v.id,
                 geojson: v.geojson,
-                type: v.type
+                type: v.type,
               };
             });
           }
@@ -421,11 +486,16 @@ export default {
     },
     // 回退事件
     backEvent() {
-      if (this.$store.state.backMenu.index && this.$store.state.backMenu.subIndex) {
+      if (
+        this.$store.state.backMenu.index &&
+        this.$store.state.backMenu.subIndex
+      ) {
         this.$store.commit("changeNavSelect", {
           index: this.$store.state.backMenu.index,
           subIndex: this.$store.state.backMenu.subIndex,
-          name: this.$store.state.backMenu.name ? this.$store.state.backMenu.name : ""
+          name: this.$store.state.backMenu.name
+            ? this.$store.state.backMenu.name
+            : "",
         });
       }
     },
@@ -467,7 +537,9 @@ export default {
     locateEvent(node) {
       // console.log(node, "目前的节点");
       if (this.treeCoordMap.has(node.data.label)) {
-        this.$store.state.mapMethodsCollection.get("RENDER").setView(this.treeCoordMap.get(node.data.label), 16);
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .setView(this.treeCoordMap.get(node.data.label), 16);
       }
     },
     handleUpdate(node) {
@@ -497,19 +569,19 @@ export default {
 
           let passData = {
             name: data.label,
-            value: cid
+            value: cid,
           };
 
           // 存放当前选中的图层，方便关联自定义模型
           this.$store.commit("changeTreeData", passData);
-          get(`./static/json/${cid}.json`).then(geoJson => {
+          get(`./static/json/${cid}.json`).then((geoJson) => {
             map2DViewer.polygons[`${cid}_layer`] = [];
             this.originalData[data.label] = geoJson.map((v, index) => {
               return {
                 id: publicFun.buildGuid("abnormal"),
                 name: v.properties["异常"] + "_" + index,
                 geometry: v.geometry,
-                properties: v.properties
+                properties: v.properties,
               };
             });
             // console.log(this.originalData[data.label], "label");
@@ -521,12 +593,14 @@ export default {
             let coordinates = firstPolygon.geometry.coordinates[0][0][0];
             this.treeCoordMap.set(data.label, coordinates);
 
-            this.$store.state.mapMethodsCollection.get("RENDER").addPolygonLayer(geoJson, cid, color);
+            this.$store.state.mapMethodsCollection
+              .get("RENDER")
+              .addPolygonLayer(geoJson, cid, color);
           });
         } else {
           let passData = {
             name: data.label,
-            value: data.label
+            value: data.label,
           };
           // 存放当前选中的图层，方便关联自定义模型
           this.$store.commit("changeTreeData", passData);
@@ -544,26 +618,28 @@ export default {
         // 目前仅针对所有图层栏的默认图层
         if (guid.indexOf("defaultLayer") > -1) {
           let layer = `${defaultLayers[data.label].cid}_layer`;
-          this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer(layer);
+          this.$store.state.mapMethodsCollection
+            .get("RENDER")
+            .deletePolygonLayer(layer);
           delete map2DViewer.polygons[layer];
         }
       }
-      this.legendTitle = Object.keys(this.originalData).map(v => {
+      this.legendTitle = Object.keys(this.originalData).map((v) => {
         return { name: v, info: v };
       });
-      this.legendIcon = this.legendTitle.map(v => {
+      this.legendIcon = this.legendTitle.map((v) => {
         let color = publicFun.getRandomColor();
         return {
           background: "transparent",
-          border: `1px solid ${color}`
+          border: `1px solid ${color}`,
         };
       });
     },
     // 右侧面板项点击事件
     listItemClick(type, data) {
+      console.log(type, "type");
       this.$store.state.bottomMenuIndexs.index = -1;
       this.$store.state.bottomMenuIndexs.subIndex = -1;
-      this.attrTableShow = true;
       this.updateCasePopupShow = false;
       this.tableData = [];
       if (type === "default") {
@@ -577,32 +653,33 @@ export default {
           version: data.properties["版本"],
           nature: data.properties["性质"],
           area: data.properties["面积"],
-          long: data.properties["周长"] || "--"
+          long: data.properties["周长"] || "--",
         });
         console.log(this.tableData);
       }
       if (type === "new") {
-        this.rightLabelData.forEach(item => {
+        this.rightLabelData.forEach((item) => {
           if (item.id == data.id) {
             item.geometryChecked = false;
             this.controlLabel(item);
           }
         });
         let geoType = JSON.parse(data.geojson).properties.featureType;
-        this.$store.state.mapMethodsCollection.get("RENDER").drawGeometry(geoType, data);
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .drawGeometry(geoType, data);
 
         this.tableType = "personal";
         this.boxWidth = "300";
         this.boxHeight = "300";
-        // this.$store.state.mapMethodsCollection
-        //   .get("RENDER")
-        //   .setView(data.coord, 16);
         this.tableData.push({
           name: data.name,
           type: data.type,
-          des: data.des
+          des: data.des,
         });
       }
+
+      this.attrTableShow = true;
     },
     closeEvent() {
       this.attrTableShow = false;
@@ -628,17 +705,17 @@ export default {
           sourceId: 0,
           type: geometryType,
           geojson: JSON.stringify(geojson),
-          id: id
+          id: id,
         };
         this.$Post(this.urlsCollection.updateConllection, params).then(
-          res => {
+          (res) => {
             if (res.code === 200) {
               console.log("修改成功", res);
               this.updateCasePopupShow = false;
               this.getUserMarkers();
             }
           },
-          error => {
+          (error) => {
             this.$message.error("保存失败");
             console.log(error);
           }
@@ -667,20 +744,24 @@ export default {
       if (localStorage.getItem("USER_ID")) {
         console.log("删除标记");
         let params = new FormData();
-        this.$store.state.mapMethodsCollection.get("RENDER").deleteGeometry(map2DViewer.myLabels[`label_${id}`]);
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .deleteGeometry(map2DViewer.myLabels[`label_${id}`]);
         map2DViewer.myLabels[`label_${id}`] = null;
 
         params = {
           userId: Number(localStorage.getItem("USER_ID")),
           sourceId: 0,
-          id: id
+          id: id,
         };
-        this.$Post(this.urlsCollection.deleteConllection, params).then(res => {
-          if (res.code === 200) {
-            console.log("疑点删除成功");
-            this.getUserMarkers();
+        this.$Post(this.urlsCollection.deleteConllection, params).then(
+          (res) => {
+            if (res.code === 200) {
+              console.log("疑点删除成功");
+              this.getUserMarkers();
+            }
           }
-        });
+        );
       }
     },
     // 控制标记的显示与隐藏
@@ -689,7 +770,9 @@ export default {
       // 已经绘制了几何体
       if (map2DViewer.myLabels[`label_${val.id}`]) {
         if (val.featureType === "点") {
-          map2DViewer.myLabels[`label_${val.id}`].setOpacity(val.geometryChecked ? 1 : 0);
+          map2DViewer.myLabels[`label_${val.id}`].setOpacity(
+            val.geometryChecked ? 1 : 0
+          );
         }
 
         if (val.featureType !== "点") {
@@ -697,11 +780,11 @@ export default {
             val.geometryChecked
               ? {
                   opacity: 1,
-                  fillOpacity: 0.4
+                  fillOpacity: 0.4,
                 }
               : {
                   opacity: 0,
-                  fillOpacity: 0
+                  fillOpacity: 0,
                 }
           );
         }
@@ -710,11 +793,13 @@ export default {
         console.log(val, "未绘制几何体");
         if (val.geometryChecked) {
           let geoType = JSON.parse(val.geojson).properties.featureType;
-          this.$store.state.mapMethodsCollection.get("RENDER").drawGeometry(geoType, val);
+          this.$store.state.mapMethodsCollection
+            .get("RENDER")
+            .drawGeometry(geoType, val);
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>