1.法律法规细节展示替换成pdf; 2. 综合分析我的标记显示与隐藏;

src/components/map/MapHolder.vue

@@ -75,6 +75,18 @@ export default {
       console.log(val, "标记疑点");
       if (val.index === 1 && val.subIndex === 1) {
         console.log("激活标记疑点弹窗");
+        // 删除地图上所有弹窗
+        this.$store.state.attrTableShow = false;
+        this.$store.state.updateCasePopupShow = false;
+        // 删除地图上的所有标记
+        if (map2DViewer.myLabels) {
+          for (let i in map2DViewer.myLabels) {
+            console.log(i, "图层名");
+            this.deleteGeometry(map2DViewer.myLabels[i]);
+          }
+          map2DViewer.myLabels = null;
+        }
+
         this.initDraw();
       } else {
         console.log("移除疑点标记事件");
@@ -127,7 +139,6 @@ export default {
       // console.log(tableArr, "shuju");
       // 根据ref获取组件的dom元素
       this.currentHtml = this.$refs.auditRef.$el.innerHTML;
-      console.log($(`#${str}_id`), "8888");
       if (this.currentHtml) {
         let div = document.createElement("div");
         div.id = str + "_id";
@@ -513,8 +524,6 @@ export default {
     },
     // 综合分析 - 图层绘制面
     addPolygonLayer(data, cid, color) {
-      // cid -- 'yongjiu'
-      // console.log(data, cid, color);
       data.map((feature) => {
         let polygonData = JSON.parse(JSON.stringify(feature));
         let coordinates = polygonData.geometry.coordinates[0];
@@ -552,52 +561,82 @@ export default {
     },
 
     drawPoints(data) {
-      console.log("开始绘制点", data);
       this.setView(data.coord, 16);
-      map2DViewer.myLabels[`label_${data.id}`] = L.marker(data.coord).addTo(
-        map2DViewer.map
-      );
+      if (!map2DViewer.myLabels[`label_${data.id}`]) {
+        console.log("开始绘制点", data);
+        let point = L.marker(data.coord).addTo(map2DViewer.map);
+        map2DViewer.myLabels[`label_${data.id}`] = point;
+      }
     },
     drawLine(data, color) {
-      console.log("开始绘制线", data);
-      // this.setView(data.coord, 16);
-      let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
-      map2DViewer.myLabels[`label_${data.id}`] = L.polyline(coordinates, {
-        color: color,
-        weight: 3,
-        fillOpacity: color,
-        opacity: 1,
-        fillOpacity: 0.4,
-      }).addTo(map2DViewer.map);
-      // zoom the map to the polyline
-      map2DViewer.map.fitBounds(
-        map2DViewer.myLabels[`label_${data.id}`].getBounds()
-      );
+      if (!map2DViewer.myLabels[`label_${data.id}`]) {
+        console.log("开始绘制线", data);
+        let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
+        let polyline = L.polyline(coordinates, {
+          color: color,
+          weight: 3,
+          fillOpacity: color,
+          opacity: 1,
+          fillOpacity: 0.4,
+        }).addTo(map2DViewer.map);
+        // zoom the map to the polyline
+        map2DViewer.map.fitBounds(polyline.getBounds());
+        map2DViewer.myLabels[`label_${data.id}`] = polyline;
+      } else {
+        map2DViewer.map.fitBounds(
+          map2DViewer.myLabels[`label_${data.id}`].getBounds()
+        );
+      }
     },
     drawPolygon(data, color) {
-      console.log("开始绘制面", data);
-      let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
-      map2DViewer.myLabels[`label_${data.id}`] = L.polygon(coordinates, {
-        color: color,
-        weight: 3,
-        fillOpacity: color,
-        opacity: 1,
-        fillOpacity: 0.4,
-      }).addTo(map2DViewer.map);
-      map2DViewer.map.fitBounds(
-        map2DViewer.myLabels[`label_${data.id}`].getBounds()
-      );
+      if (!map2DViewer.myLabels[`label_${data.id}`]) {
+        console.log("开始绘制面", data);
+        let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
+        let polygon = L.polygon(coordinates, {
+          color: color,
+          weight: 3,
+          fillOpacity: color,
+          opacity: 1,
+          fillOpacity: 0.4,
+        }).addTo(map2DViewer.map);
+        map2DViewer.map.fitBounds(polygon.getBounds());
+        map2DViewer.myLabels[`label_${data.id}`] = polygon;
+      } else {
+        map2DViewer.map.fitBounds(
+          map2DViewer.myLabels[`label_${data.id}`].getBounds()
+        );
+      }
     },
 
     drawCircle(data, color) {
-      console.log("开始绘制圆", data);
-      let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
-      if ((coordinates.length = 2)) {
-        // let fromPoint = coordinates[0];
-        // let toPoint = coordinates[1];
+      if (!map2DViewer.myLabels[`label_${data.id}`]) {
+        console.log("开始绘制圆", data);
+        let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
+        console.log(coordinates);
+        if ((coordinates.length = 2)) {
+          let from = turf.point(coordinates[0].reverse());
+          let to = turf.point(coordinates[1].reverse());
+          let options = { units: "kilometers" };
+          let distance = turf.distance(from, to, options);
+          (distance = parseFloat(distance * 1000).toFixed(6)),
+            console.log(distance, "圆的半径");
+          let circle = L.circle(coordinates[0].reverse(), {
+            color: color,
+            weight: 3,
+            fillOpacity: color,
+            opacity: 1,
+            fillOpacity: 0.4,
+            radius: Number(distance),
+          }).addTo(map2DViewer.map);
+          console.log(circle);
+          map2DViewer.map.fitBounds(circle.getBounds());
+          map2DViewer.myLabels[`label_${data.id}`] = circle;
+        }
+      } else {
+        map2DViewer.map.fitBounds(
+          map2DViewer.myLabels[`label_${data.id}`].getBounds()
+        );
       }
-
-      // let centerPoints =
     },
     /**
      * 综合分析 -- 我的标记 -- 绘制单一几何体方法
@@ -622,6 +661,7 @@ export default {
     },
     deleteGeometry(geometry) {
       if (geometry) {
+        console.log(geometry, "移除");
         geometry.removeFrom(map2DViewer.map);
       }
     },

src/components/popup/LawDetailsPopup.vue

@@ -7,13 +7,12 @@
         <div>{{ time }}</div>
       </div>
       <div class="law-inner-content">
-        <FilePreView ref="filePreview" />
+        <slot></slot>
       </div>
     </div>
   </div>
 </template>
 <script>
-import FilePreView from "@/components/common/FilePreView.vue";
 /**
  * XXXX 疑点相关的法律法规详细内容
  * @author: Gao Lu
@@ -21,30 +20,33 @@ import FilePreView from "@/components/common/FilePreView.vue";
  */
 export default {
   name: "LawDetailsPopup",
-  components: { FilePreView },
+  components: {},
   data() {
     return {
       lawDetailsPopupShow: false,
       title: "",
       time: "",
       address: "",
-      fileView:false
+      fileView: false,
     };
   },
   created() {},
 
   mounted() {
-    if (this.address != "") {
-      this.$refs.filePreview.showView(this.address);
-    }
+    // this.$nextTick(() => {
+    //   if (this.address) {
+    //     this.$refs.lawFilePreview.showView(this.address);
+    //   }
+    // });
   },
-  beforeDestroy(){
-    
+  beforeDestroy() {
+    // this.$refs.lawFilePreview.cancel();
   },
   methods: {
     // 法律法规详细信息弹窗关闭
     detailsCloseEvent() {
       this.lawDetailsPopupShow = false;
+      this.$emit("lawDetailsClose")
     },
   },
 };
@@ -89,7 +91,6 @@ export default {
     .law-inner-content {
       width: 100%;
       height: 80%;
-      overflow: auto;
       color: rgb(192, 196, 204, 0.8);
       //   background: red;
     }

src/components/popup/LawPopup.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="law-related" v-if="lawPopupShow" v-drag>
-    <LawDetailsPopup ref="lawDetailsRef" class="law-details-popup" />
+    <LawDetailsPopup ref="lawDetailsRef" class="law-details-popup">
+      <FilePreView
+        style="width: 100%; height: 100%"
+        ref="lawFileRef"
+        @lawDetailsClose="lawDetailsClose"
+      />
+    </LawDetailsPopup>
     <!-- <div class="law-details-popup" v-if="lawDetailsPopupShow">
       <div class="law-details-popup-closebtn" @click="detailsCloseEvent"></div>
       <div class="law-details-popup-inner">
@@ -100,6 +106,7 @@ import NewSelect from "@/components/common/NewSelect.vue";
 import Pagination from "@/components/common/Pagination.vue";
 // 法律法规细节文档弹窗
 import LawDetailsPopup from "@/components/popup/LawDetailsPopup.vue";
+import FilePreView from "@/components/common/FilePreView.vue";
 /**
  * XXXX 疑点相关的法律法规
  * @author: Gao Lu
@@ -107,7 +114,7 @@ import LawDetailsPopup from "@/components/popup/LawDetailsPopup.vue";
  */
 export default {
   name: "LawPopup",
-  components: { NewSelect, Pagination, LawDetailsPopup },
+  components: { NewSelect, Pagination, LawDetailsPopup, FilePreView },
   data() {
     return {
       // lawDetailsPopupShow: false,
@@ -182,6 +189,11 @@ export default {
     closeEvent() {
       this.$store.state.lawPopupShow = false;
     },
+    lawDetailsClose() {
+      if (this.$refs.lawFileRef) {
+        this.$refs.lawFileRef.cancel();
+      }
+    },
     // 选中当前行
     handleRowChange(val) {
       console.log(val, "currentRow");
@@ -189,6 +201,12 @@ export default {
       this.$refs.lawDetailsRef.title = val.name;
       this.$refs.lawDetailsRef.time = val.date;
       this.$refs.lawDetailsRef.lawDetailsPopupShow = true;
+      let filePath = "./static/word/test.docx";
+      this.$nextTick(() => {
+        if (this.$refs.lawFileRef) {
+          this.$refs.lawFileRef.showView(filePath);
+        }
+      });
     },
   },
 };

src/store/index.js

@@ -37,6 +37,10 @@ export default new Vuex.Store({
     treeDataCollection: new Map(),
     // 用户信息（登录成功后保存）
     userInfo: {},
+    // 综合分析疑点属性弹窗
+    attrTableShow: false,
+    // 综合分析修改标记弹窗
+    updateCasePopupShow:false
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
@@ -44,7 +48,7 @@ export default new Vuex.Store({
     treeDataCollection: (state) => state.treeDataCollection,
   },
   mutations: {
-    changeBackMenu(state, backMenu){
+    changeBackMenu(state, backMenu) {
       state.backMenu = backMenu;
     },
     // 用户信息修改（登录或退出时操作）

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,22 +192,32 @@
               </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
-                    style="
-                      position: absolute;
-                      right: 100px;
-                      top: 0;
-                      display: flex;
-                      align-items: center;
-                      justify-content: space-around;
-                      width: 75px;
-                    "
-                    ><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
+                    class="visible-icon"
+                    :class="{ click: item.geometryChecked }"
+                    @click="controlLabel(item)"
                   ></span>
                 </div>
               </el-collapse-item>
@@ -201,22 +246,17 @@ export default {
     Legend,
     AttributePopup,
     LawPopup,
-    LabelCasePopup
+    LabelCasePopup,
   },
   data() {
     return {
       addressInput: "",
       legendShow: false,
-      // 修改标记弹窗
-      updateCasePopupShow: false,
-      // 属性信息弹窗
-      attrTableShow: false,
       tableType: "normal",
       tableData: [],
       legendHeight: "0",
       boxWidth: "600",
       boxHeight: "600",
-
       activeNames: ["myLabel"],
       rightPanelTitle: "",
       rightPanelDataMap: new Map(),
@@ -229,7 +269,7 @@ export default {
       modelData: [],
       defaultProps: {
         children: "children",
-        label: "label"
+        label: "label",
       },
       legendIcon: [],
       legendTitle: [],
@@ -239,7 +279,7 @@ export default {
       // 存放对应图层的坐标
       treeCoordMap: new Map(),
       isLeftLock: true,
-      isRightLock: true
+      isRightLock: true,
     };
   },
   computed: {
@@ -254,7 +294,23 @@ export default {
     },
     getMyPoints() {
       return map2DViewer.myLabels;
-    }
+    },
+    attrTableShow: {
+      get() {
+        return this.$store.state.attrTableShow;
+      },
+      set(val) {
+        this.$store.state.attrTableShow = val;
+      },
+    },
+    updateCasePopupShow: {
+      get() {
+        return this.$store.state.updateCasePopupShow;
+      },
+      set(val) {
+        this.$store.state.updateCasePopupShow = val;
+      },
+    },
   },
   watch: {
     getLeftMenuTitle: {
@@ -267,7 +323,7 @@ export default {
           }
         });
       },
-      immediate: true
+      immediate: true,
     },
     legendTitle(val) {
       // console.log(val, "监听当前图例item数量");
@@ -291,19 +347,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) {
@@ -317,20 +373,21 @@ export default {
               coord: data.geometry.coordinates[0][0],
               type: data.properties.title,
               des: data.properties.desc,
-              geojson: v.geojson
+              geojson: v.geojson,
+              geometryChecked: false,
             };
           });
           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;
       }
@@ -338,23 +395,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,
               };
-            })
+            }),
           };
-        })
+        }),
       };
     });
 
@@ -363,7 +420,7 @@ export default {
   },
 
   mounted() {
-    map2DViewer.map.on("move", e => {
+    map2DViewer.map.on("move", (e) => {
       if (!this.isLeftLock) {
         this.showLeftBox = false;
         this.leftBoxBtn = true;
@@ -379,6 +436,12 @@ export default {
     treeIdMap.clear();
     this.treeCoordMap.clear();
     map2DViewer.map.off("move");
+    for (let layer in map2DViewer.polygons) {
+      this.$store.state.mapMethodsCollection
+        .get("RENDER")
+        .deletePolygonLayer(layer);
+    }
+    map2DViewer.polygons = {};
   },
   methods: {
     // 调用我的标记接口
@@ -388,17 +451,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,
               };
             });
           }
@@ -412,10 +475,13 @@ 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
+          subIndex: this.$store.state.backMenu.subIndex,
         });
       }
     },
@@ -457,7 +523,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) {
@@ -487,19 +555,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");
@@ -511,12 +579,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);
@@ -534,18 +604,20 @@ 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}`,
         };
       });
     },
@@ -568,7 +640,7 @@ export default {
           version: data.properties["版本"],
           nature: data.properties["性质"],
           area: data.properties["面积"],
-          long: data.properties["周长"] || "--"
+          long: data.properties["周长"] || "--",
         });
         console.log(this.tableData);
       }
@@ -587,7 +659,7 @@ export default {
         this.tableData.push({
           name: data.name,
           type: data.type,
-          des: data.des
+          des: data.des,
         });
       }
     },
@@ -615,17 +687,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);
           }
@@ -639,13 +711,15 @@ export default {
       this.$store.state.bottomMenuIndexs.subIndex = -1;
       this.updateCasePopupShow = true;
       this.attrTableShow = false;
-      this.$nextTick(() => {
-        console.log(this.$refs.updateLabelRef, "updateLabelRef");
-        this.$refs.updateLabelRef.selectVal = val.type;
-        this.$refs.updateLabelRef.textContent = val.des;
-        this.$refs.updateLabelRef.id = val.id;
-        this.$refs.updateLabelRef.geojson = val.geojson;
-      });
+      if (this.updateCasePopupShow) {
+        this.$nextTick(() => {
+          console.log(this.$refs.updateLabelRef, "updateLabelRef");
+          this.$refs.updateLabelRef.selectVal = val.type;
+          this.$refs.updateLabelRef.textContent = val.des;
+          this.$refs.updateLabelRef.id = val.id;
+          this.$refs.updateLabelRef.geojson = val.geojson;
+        });
+      }
     },
     // 删除标记
     deleteLabel(id) {
@@ -660,22 +734,48 @@ export default {
         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.rightLabelData.forEach((v, i) => {
-            //   if (v.id === id) {
-            //     this.rightLabelData.splice(i, 1);
-            //   }
-            // });
+        this.$Post(this.urlsCollection.deleteConllection, params).then(
+          (res) => {
+            if (res.code === 200) {
+              console.log("疑点删除成功");
+              this.getUserMarkers();
+            }
           }
-        });
+        );
       }
-    }
-  }
+    },
+    // 控制标记的显示与隐藏
+    controlLabel(val) {
+      val.geometryChecked = !val.geometryChecked;
+      // 已经绘制了几何体
+      if (map2DViewer.myLabels[`label_${val.id}`]) {
+        if (val.geometryChecked) {
+          console.log("允许图层显示");
+          map2DViewer.myLabels[`label_${val.id}`].setStyle({
+            opacity: 1,
+            fillOpacity: 0.4,
+          });
+        } else {
+          console.log("隐藏图层");
+          map2DViewer.myLabels[`label_${val.id}`].setStyle({
+            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);
+        }
+      }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -1057,6 +1157,27 @@ export default {
           border-right: 1px solid rgba(207, 222, 255, 0.2);
           border-bottom: 1px solid rgba(207, 222, 255, 0.2);
           cursor: pointer;
+          .operation-icon {
+            position: absolute;
+            right: 100px;
+            top: 0;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            width: 75px;
+            // background: red;
+          }
+          .visible-icon {
+            position: absolute;
+            right: 60px;
+            top: 9.5px;
+            width: 20px;
+            height: 20px;
+            background: url("../assets/map/eye_invisible.png") no-repeat center;
+            &.click {
+              background: url("../assets/map/eye_visible.png") no-repeat center;
+            }
+          }
         }
       }
     }

src/views/LawView.vue

@@ -50,14 +50,14 @@
         >
           <el-table-column type="index" width="70" label="序号">
           </el-table-column>
-          <el-table-column prop="date" label="日期" align="center">
-          </el-table-column>
-          <el-table-column prop="title" label="标题" align="center" width="150">
-          </el-table-column>
-          <el-table-column prop="type" label="分类" align="center">
+          <el-table-column prop="type" label="类别" align="center">
           </el-table-column>
+          <el-table-column prop="title" label="文件名称" align="center" width="150">
+          </el-table-column> 
           <el-table-column prop="class" label="等级" align="center">
           </el-table-column>
+          <el-table-column prop="date" label="日期" align="center">
+          </el-table-column>
         </el-table>
       </div>
       <div class="footer">
@@ -88,7 +88,7 @@ export default {
       typeOptions: [],
       timeSelectVal: "",
       timeOptions: [],
-      tableData:[],
+      tableData: [],
       // tableData: [
       //   {
       //     code: "PDSJJ2011223",
@@ -175,12 +175,10 @@ export default {
 
       this.$Post(this.urlsCollection.selectContentListInfo, params).then(
         (res) => {
-          if (res.code === 200) {
+          if (res.code === 200 && res.content.length > 0) {
             console.log(res.content, "查询到的法律法规相关的数据");
             this.paginationData.currentPage = val;
-            this.tableData = res.content.map((v)=>{
-              
-            })
+            this.tableData = res.content.map((v) => {});
           }
         },
         (error) => {