综合分析我的标记显示隐藏逻辑优化。

src/views/ComprehensiveAnalysis.vue

@@ -19,12 +19,7 @@
     </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>
     <!-- 属性弹窗 -->
@@ -51,7 +46,7 @@
         legendTitle: legendTitle,
         leftWidth: '30%',
         rightWidth: '70%',
-        rightItemWidth: '120',
+        rightItemWidth: '120'
       }"
     />
 
@@ -71,21 +66,9 @@
           <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">
@@ -100,13 +83,7 @@
               :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
@@ -140,7 +117,7 @@
                   <div
                     :class="{
                       'tree-arrow': !node.expanded,
-                      'tree-arrow-expanded': node.expanded,
+                      'tree-arrow-expanded': node.expanded
                     }"
                   ></div>
                   <span>{{ node.label }}</span>
@@ -160,27 +137,15 @@
         </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]"
@@ -192,33 +157,15 @@
               </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
-                  ></span>
-                  <span
-                    class="visible-icon"
-                    :class="{ click: item.geometryChecked }"
-                    @click="controlLabel(item)"
+                    ><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>
                 </div>
               </el-collapse-item>
             </el-collapse>
@@ -246,7 +193,7 @@ export default {
     Legend,
     AttributePopup,
     LawPopup,
-    LabelCasePopup,
+    LabelCasePopup
   },
   data() {
     return {
@@ -269,7 +216,7 @@ export default {
       modelData: [],
       defaultProps: {
         children: "children",
-        label: "label",
+        label: "label"
       },
       legendIcon: [],
       legendTitle: [],
@@ -279,7 +226,7 @@ export default {
       // 存放对应图层的坐标
       treeCoordMap: new Map(),
       isLeftLock: true,
-      isRightLock: true,
+      isRightLock: true
     };
   },
   computed: {
@@ -301,7 +248,7 @@ export default {
       },
       set(val) {
         this.$store.state.attrTableShow = val;
-      },
+      }
     },
     updateCasePopupShow: {
       get() {
@@ -309,8 +256,8 @@ export default {
       },
       set(val) {
         this.$store.state.updateCasePopupShow = val;
-      },
-    },
+      }
+    }
   },
   watch: {
     getLeftMenuTitle: {
@@ -323,7 +270,7 @@ export default {
           }
         });
       },
-      immediate: true,
+      immediate: true
     },
     legendTitle(val) {
       // console.log(val, "监听当前图例item数量");
@@ -347,19 +294,19 @@ 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) {
@@ -374,21 +321,21 @@ export default {
               type: data.properties.title,
               des: data.properties.desc,
               geojson: v.geojson,
-              geometryChecked: true,
-              featureType: data.properties.featureType,
+              geometryChecked: false,
+              featureType: data.properties.featureType
             };
           });
           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;
       }
@@ -396,23 +343,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
               };
-            }),
+            })
           };
-        }),
+        })
       };
     });
 
@@ -421,7 +368,7 @@ export default {
   },
 
   mounted() {
-    map2DViewer.map.on("move", (e) => {
+    map2DViewer.map.on("move", e => {
       if (!this.isLeftLock) {
         this.showLeftBox = false;
         this.leftBoxBtn = true;
@@ -438,9 +385,7 @@ 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);
     }
     map2DViewer.polygons = {};
   },
@@ -452,17 +397,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
               };
             });
           }
@@ -476,10 +421,7 @@ 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,
@@ -525,9 +467,7 @@ 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) {
@@ -557,19 +497,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");
@@ -581,14 +521,12 @@ 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);
@@ -606,20 +544,18 @@ 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}`
         };
       });
     },
@@ -629,7 +565,6 @@ export default {
       this.$store.state.bottomMenuIndexs.subIndex = -1;
       this.attrTableShow = true;
       this.updateCasePopupShow = false;
-
       this.tableData = [];
       if (type === "default") {
         let coord = data.geometry.coordinates[0][0][0];
@@ -642,15 +577,19 @@ 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 => {
+          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";
@@ -661,7 +600,7 @@ export default {
         this.tableData.push({
           name: data.name,
           type: data.type,
-          des: data.des,
+          des: data.des
         });
       }
     },
@@ -689,17 +628,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);
           }
@@ -728,24 +667,20 @@ 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();
           }
-        );
+        });
       }
     },
     // 控制标记的显示与隐藏
@@ -753,39 +688,33 @@ export default {
       val.geometryChecked = !val.geometryChecked;
       // 已经绘制了几何体
       if (map2DViewer.myLabels[`label_${val.id}`]) {
-        if (val.featureType === "点" && val.geometryChecked) {
-          map2DViewer.myLabels[`label_${val.id}`].setOpacity(1);
-        }
-
-        if (val.featureType !== "点" && val.geometryChecked) {
-          map2DViewer.myLabels[`label_${val.id}`].setStyle({
-            opacity: 1,
-            fillOpacity: 0.4,
-          });
+        if (val.featureType === "点") {
+          map2DViewer.myLabels[`label_${val.id}`].setOpacity(val.geometryChecked ? 1 : 0);
         }
 
-        if (val.featureType === "点" && !val.geometryChecked) {
-          map2DViewer.myLabels[`label_${val.id}`].setOpacity(0);
-        }
-
-        if (val.featureType !== "点" && !val.geometryChecked) {
-          map2DViewer.myLabels[`label_${val.id}`].setStyle({
-            opacity: 0,
-            fillOpacity: 0,
-          });
+        if (val.featureType !== "点") {
+          map2DViewer.myLabels[`label_${val.id}`].setStyle(
+            val.geometryChecked
+              ? {
+                  opacity: 1,
+                  fillOpacity: 0.4
+                }
+              : {
+                  opacity: 0,
+                  fillOpacity: 0
+                }
+          );
         }
       } else {
         // 未绘制几何体
         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>