Browse Source

1、对于所有图层中的图斑,有的高亮显示不明显。(可以选中时增加图斑内阴影,不选中时阴影消失(类似我的标记)。单击旁边非图斑位置,高亮的阴影状态取消。)
2、我的标记中的图斑,选中之后无法单击取消阴影状态。(单击旁边非图斑位置,高亮的阴影状态取消。)

DESKTOP-6LTVLN7\Liumouren 2 years ago
parent
commit
c3ac988447
2 changed files with 334 additions and 543 deletions
  1. 196 234
      src/components/map/MapHolder.vue
  2. 138 309
      src/views/ComprehensiveAnalysis.vue

+ 196 - 234
src/components/map/MapHolder.vue

@@ -1,29 +1,10 @@
 <template>
-  <div
-    id="map2DViewer"
-    :class="
-      $ifMenu('1', '') || $ifMenu('2', '') ? 'scaleClass' : 'unScaleClass'
-    "
-  >
+  <div id="map2DViewer" :class="$ifMenu('1', '') || $ifMenu('2', '') ? 'scaleClass' : 'unScaleClass'">
     <!-- 特殊地图属性弹窗 -- 有审计功能 -->
-    <CaseAuditPopup
-      v-show="auditPopupShow"
-      :tableObj="auditRefTableObj"
-      :defaultStatus="defaultStatus"
-      ref="auditRef"
-    />
+    <CaseAuditPopup v-show="auditPopupShow" :tableObj="auditRefTableObj" :defaultStatus="defaultStatus" ref="auditRef" />
     <!-- 通用地图属性弹窗 -- 无审计功能 -->
-    <NormalAttrPopup
-      v-show="normalAttrPopupShow"
-      :tableObj="tableObj"
-      ref="normalRef"
-    />
-    <LabelCasePopup
-      v-show="labelDetailsPopupShow"
-      ref="labelRef"
-      :targetArea="targetArea"
-      :targetDistance="targetDistance"
-    />
+    <NormalAttrPopup v-show="normalAttrPopupShow" :tableObj="tableObj" ref="normalRef" />
+    <LabelCasePopup v-show="labelDetailsPopupShow" ref="labelRef" :targetArea="targetArea" :targetDistance="targetDistance" />
   </div>
 </template>
 <script>
@@ -38,10 +19,11 @@ export default {
   components: {
     CaseAuditPopup,
     NormalAttrPopup,
-    LabelCasePopup,
+    LabelCasePopup
   },
   data() {
     return {
+      polygonOnClick: false,
       town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
       auditPopupShow: false,
       normalAttrPopupShow: false,
@@ -66,17 +48,17 @@ export default {
         镇域名称: "--",
         "面积(平方米)": "--",
         土地类型: "--",
-        图斑编号: "--",
+        图斑编号: "--"
       },
       auditRefTableObj: {
         镇域名称: "--",
         "面积(平方米)": "--",
         图层构成: "--",
-        性质: "--",
+        性质: "--"
       },
       targetArea: 0,
       targetDistance: 0,
-      defaultStatus: "未标记",
+      defaultStatus: "未标记"
     };
   },
   created() {},
@@ -109,7 +91,7 @@ export default {
       deleteGroupFromMap: this.deleteGroupFromMap,
       drawGeometry: this.drawGeometry,
       deleteGeometry: this.deleteGeometry,
-      addTiledMapLayer: this.addTiledMapLayer,
+      addTiledMapLayer: this.addTiledMapLayer
     });
   },
   beforeDestroyed() {
@@ -130,7 +112,7 @@ export default {
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    },
+    }
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -171,9 +153,9 @@ export default {
         this.$nextTick(() => {
           this.getJSonData();
         });
-      },
+      }
       // immediate: true
-    },
+    }
   },
   methods: {
     // 测试宝石蓝底图
@@ -184,7 +166,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 3,
         maxNativeZoom: 7,
-        maxZoom: 14,
+        maxZoom: 14
       });
       return layer;
     },
@@ -196,7 +178,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 0,
         maxNativeZoom: 7,
-        maxZoom: 14,
+        maxZoom: 14
       });
       return layer;
     },
@@ -206,7 +188,7 @@ export default {
         // opacity: 0.8,
         f: "json",
         format: "png8",
-        transparent: true,
+        transparent: true
         // tileSize: 512,
         // url: url,
         // minZoom: 0,
@@ -224,7 +206,7 @@ export default {
     stopLabelCase() {
       if (map2DViewer.measureTool) {
         map2DViewer.setDrawTool({
-          action: "remove",
+          action: "remove"
         });
       }
     },
@@ -255,13 +237,13 @@ export default {
             if ($(`#${str}_id a`)) {
               $(`#${str}_id a`)
                 .eq(0)
-                .click((e) => {
+                .click(e => {
                   this.$store.state.lawPopupShow = true;
                   this.$store.state.lawSourceType = sourceType;
                 });
               $(`#${str}_id a`)
                 .eq(1)
-                .click((e) => {
+                .click(e => {
                   // 触发综合分析右侧面板点击事件
                   this.$bus.$emit("viewDetailsPopup", geojsonData);
                 });
@@ -274,7 +256,7 @@ export default {
               $(`#${str}_id a`).eq(0).remove();
               $(`#${str}_id a`)
                 .eq(0)
-                .click((e) => {
+                .click(e => {
                   // 触发综合分析右侧面板点击事件
                   this.$bus.$emit("viewDetailsPopup", geojsonData);
                 });
@@ -322,17 +304,11 @@ export default {
           // 下拉框内容
           if ($(`#${str}_id .center-table-item-special select`)) {
             if (this.caseStatusMap.has(str)) {
-              $(`#${str}_id .center-table-item-special select`).val(
-                this.caseStatusMap.get(str)
-              );
+              $(`#${str}_id .center-table-item-special select`).val(this.caseStatusMap.get(str));
               let inputStatus = "";
               if (this.caseStatusMap.has(str)) {
-                this.caseStatusMap.get(str) === "isTrue" &&
-                  $(`#${str}_id .center-table-item-special input`).val("疑点");
-                !this.caseStatusMap.get(str) === "isTrue" &&
-                  $(`#${str}_id .center-table-item-special input`).val(
-                    "非疑点"
-                  );
+                this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("疑点");
+                !this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("非疑点");
               }
             }
           }
@@ -341,13 +317,13 @@ export default {
           if ($(`#${str}_id a`)) {
             $(`#${str}_id a`)
               .eq(0)
-              .click((e) => {
+              .click(e => {
                 this.$store.state.lawPopupShow = true;
                 this.$store.state.lawSourceType = sourceType;
               });
             $(`#${str}_id a`)
               .eq(1)
-              .click((e) => {
+              .click(e => {
                 // 触发综合分析右侧面板点击事件
 
                 this.$bus.$emit("viewDetailsPopup", geojsonData);
@@ -355,7 +331,7 @@ export default {
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click((e) => {
+            $(`#${str}_id input`).click(e => {
               switch (e.target.defaultValue) {
                 case "取消":
                   this.cancelBtnEvent();
@@ -389,7 +365,7 @@ export default {
         div.innerHTML = this.currentLabelHtml;
         $(() => {
           $(`#${str}_id`).css("height", "100%");
-          $(`#${str}_id input`).click((e) => {
+          $(`#${str}_id input`).click(e => {
             switch (e.target.defaultValue) {
               case "取消":
                 this.cancelBtnEvent();
@@ -410,12 +386,12 @@ export default {
       if (selectVal === "isTrue") {
         map2DViewer.polygons[str].setStyle({
           color: `rgb(${caseColorChange["isPointColor"][0]},${caseColorChange["isPointColor"][1]},${caseColorChange["isPointColor"][2]})`,
-          weight: 4,
+          weight: 4
         });
       } else {
         map2DViewer.polygons[str].setStyle({
           color: `rgb(${caseColorChange["notPointColor"][0]},${caseColorChange["notPointColor"][1]},${caseColorChange["notPointColor"][2]})`,
-          weight: 4,
+          weight: 4
         });
       }
       // 修改疑点时必须要写id
@@ -426,42 +402,32 @@ export default {
         // 修改人员名称
         c_editor_name: localStorage.getItem("USER_NAME"),
         // 修改人员ID
-        c_editorid: localStorage.getItem("USER_ID"),
+        c_editorid: localStorage.getItem("USER_ID")
       };
 
       let modifyParams = new FormData();
       modifyParams = {
         columnId: columnId,
         modelId: modelId,
-        content: JSON.stringify(obj),
+        content: JSON.stringify(obj)
       };
-      this.$Post(this.urlsCollection.updateContent, modifyParams).then(
-        (res) => {
-          if (res.code === 200) {
-            this.$message.success("数据修改成功");
-            map2DViewer.map.closePopup();
+      this.$Post(this.urlsCollection.updateContent, modifyParams).then(res => {
+        if (res.code === 200) {
+          this.$message.success("数据修改成功");
+          map2DViewer.map.closePopup();
 
-            switch (selectVal) {
-              case "isTrue":
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeCaseBoolean(str, "疑点");
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeSortMethod("疑点");
-                break;
-              case "isFalse":
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeCaseBoolean(str, "非疑点");
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeSortMethod("非疑点");
-                break;
-            }
+          switch (selectVal) {
+            case "isTrue":
+              this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "疑点");
+              this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("疑点");
+              break;
+            case "isFalse":
+              this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "非疑点");
+              this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("非疑点");
+              break;
           }
         }
-      );
+      });
     },
     cancelBtnEvent() {
       map2DViewer.map.closePopup();
@@ -496,7 +462,7 @@ export default {
             coordinates: coordinates,
             geoName: geoName,
             area: area,
-            distance: distance,
+            distance: distance
           };
           let geometry = publicFun.generateGeoJSON(options);
           let params = new FormData();
@@ -506,11 +472,11 @@ export default {
             geojson: newGeojson,
             type: geoType,
             userId: Number(localStorage.getItem("USER_ID")),
-            sourceId: 0,
+            sourceId: 0
           };
 
           this.$Post(this.urlsCollection.addConllection, params).then(
-            (res) => {
+            res => {
               if (res.code == 200) {
                 // 标记成功后删除保存的原有名称
                 myLabelNameMap.delete(geoName);
@@ -520,36 +486,33 @@ export default {
                 paramData = {
                   userId: Number(localStorage.getItem("USER_ID")),
                   sourceId: 0,
-                  pageSize: 10,
+                  pageSize: 10
                 };
                 // 暂存map中刚刚保存的数据
-                this.$Post(this.urlsCollection.selectByUser, paramData).then(
-                  (userRes) => {
-                    if (userRes.code === 200) {
-                      if (userRes.content.length > 0) {
-                        this.$store.state.myLabelPointsArr = [];
-                        this.$store.state.myLabelPointsArr =
-                          userRes.content.map((v) => {
-                            if (JSON.stringify(geometry) === v.geojson) {
-                              sessionStorage.setItem("myLabelPointsId", v.id);
-                            }
-                            return {
-                              id: v.id,
-                              geojson: v.geojson,
-                              type: v.type,
-                            };
-                          });
-                        // 判断刚刚暂存的数据,并调用小眼睛的方法
-                      }
+                this.$Post(this.urlsCollection.selectByUser, paramData).then(userRes => {
+                  if (userRes.code === 200) {
+                    if (userRes.content.length > 0) {
+                      this.$store.state.myLabelPointsArr = [];
+                      this.$store.state.myLabelPointsArr = userRes.content.map(v => {
+                        if (JSON.stringify(geometry) === v.geojson) {
+                          sessionStorage.setItem("myLabelPointsId", v.id);
+                        }
+                        return {
+                          id: v.id,
+                          geojson: v.geojson,
+                          type: v.type
+                        };
+                      });
+                      // 判断刚刚暂存的数据,并调用小眼睛的方法
                     }
-                    // 更新时调用一次搜索接口
                   }
-                );
+                  // 更新时调用一次搜索接口
+                });
               }
               // 保存后需要删除地图上的标记
               this.reStartLabelCase();
             },
-            (error) => {
+            error => {
               console.log("标记疑点保存失败!", error);
               this.reStartLabelCase();
             }
@@ -565,18 +528,12 @@ export default {
         //   "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         // ).addTo(map2DViewer.map);
         if (this.$store.state.JLControlRightMapUrl) {
-          map2DViewer.jlMap = this.addTiledMapLayer(
-            this.$store.state.JLControlRightMapUrl
-          ).addTo(map2DViewer.map);
+          map2DViewer.jlMap = this.addTiledMapLayer(this.$store.state.JLControlRightMapUrl).addTo(map2DViewer.map);
         } else {
-          map2DViewer.jlMap = this.addTiledMapLayer(
-            systemConfig.imageryLayerSat2022s2.url
-          ).addTo(map2DViewer.map);
+          map2DViewer.jlMap = this.addTiledMapLayer(systemConfig.imageryLayerSat2022s2.url).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 if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
         map2DViewer.map.removeControl(map2DViewer.jlControl);
         map2DViewer.map.removeLayer(map2DViewer.jlMap);
@@ -614,7 +571,7 @@ export default {
     initDraw() {
       if (!map2DViewer.measureTool) {
         // 引入疑点标记绘制方法
-        map2DViewer.drawToolFire = (data) => {
+        map2DViewer.drawToolFire = data => {
           // 纬经度
           if (data && data.points.length >= 1) {
             let geoType = null;
@@ -644,16 +601,7 @@ export default {
                 this.labelDetailsPopupShow = true;
                 this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
                   .setLatLng(newCoord)
-                  .setContent(
-                    this.createLabelDiv(
-                      "label",
-                      coord,
-                      data,
-                      geoType,
-                      data.area,
-                      data.distance
-                    )
-                  )
+                  .setContent(this.createLabelDiv("label", coord, data, geoType, data.area, data.distance))
                   .openOn(map2DViewer.map);
                 this.labelDetailsPopupShow = false;
               });
@@ -668,7 +616,7 @@ export default {
           font_size: "14px",
           closeButton: true,
           iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
-          map: map2DViewer.map,
+          map: map2DViewer.map
         });
       }
     },
@@ -681,7 +629,7 @@ export default {
         {
           resolutions: systemConfig.imageryLayer.resolutions,
           origin: [-66000, 75000],
-          bounds: L.bounds([-65000, -76000], [75000, 72000]),
+          bounds: L.bounds([-65000, -76000], [75000, 72000])
         }
       );
 
@@ -691,15 +639,13 @@ export default {
         minZoom: systemConfig.imageryLayer.minZoom,
         maxZoom: systemConfig.imageryLayer.maxZoom,
         attributionControl: false,
-        zoomControl: false,
+        zoomControl: false
         // preferCanvas: true,
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
       let guid = publicFun.buildGuid("baseLayer");
-      let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(
-        map2DViewer.map
-      );
+      let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(map2DViewer.map);
       // let layer = this.addDynamicLayer(systemConfig.blueBlackMap.url).addTo(
       //   map2DViewer.map
       // );
@@ -711,15 +657,30 @@ export default {
       // let imageryLayer = this.addDynamicLayer(systemConfig.imageryLayer.url);
       // map2DViewer.layers["imagery"] = imageryLayer;
 
-      // map2DViewer.map.on("click", onMapClick);
-    },
-    onMapClick() {
-      // if (map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid]) {
-      //   map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid].setStyle({
-      //     color: "red"
-      //   });
-      // } else {
-      // }
+      map2DViewer.map.on("click", e => {
+        if (!this.polygonOnClick && this.$store.state.map2DViewerPolygonsCid.newCid) {
+          if (map2DViewer.myLabels[`label_${this.$store.state.map2DViewerPolygonsCid.newCid}`]) {
+            map2DViewer.myLabels[`label_${this.$store.state.map2DViewerPolygonsCid.newCid}`].setStyle({
+              color: this.$store.state.map2DViewerPolygonsCid.oldColor,
+              fillOpacity: 0
+            });
+            this.$store.state.map2DViewerPolygonsCid = {
+              newCid: null,
+              oldColor: null
+            };
+          }
+          if (map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid]) {
+            map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid].setStyle({
+              color: this.$store.state.map2DViewerPolygonsCid.oldColor,
+              fillOpacity: 0
+            });
+            this.$store.state.map2DViewerPolygonsCid = {
+              newCid: null,
+              oldColor: null
+            };
+          }
+        }
+      });
     },
     // 传入街道参数,重新渲染区域图层
     getJSonDataToStreet(url, param) {
@@ -729,16 +690,14 @@ export default {
         map2DViewer.groups["浦东新区_polygon"].remove();
       }
       // 请求并渲染新的区域图层
-      get("./static/json/simplified_pdgeojson.json", "").then((geoJson) => {
+      get("./static/json/simplified_pdgeojson.json", "").then(geoJson => {
         // 存放所有的面数据
         map2DViewer.groups["浦东新区_polygon"] = L.featureGroup();
         map2DViewer.groups["浦东新区_label"] = L.featureGroup();
         map2DViewer.groups["浦东新区_polygon"].addTo(map2DViewer.map);
         map2DViewer.groups["浦东新区_label"].addTo(map2DViewer.map);
-        geoJson.features.map((feature) => {
-          let correctCordArr = JSON.parse(
-            JSON.stringify(feature.geometry.coordinates)
-          );
+        geoJson.features.map(feature => {
+          let correctCordArr = JSON.parse(JSON.stringify(feature.geometry.coordinates));
           let newCorrectCoordArr = publicFun.latLngsCorrection(correctCordArr);
           feature.geometry.coordinates = newCorrectCoordArr;
           // if (
@@ -781,10 +740,7 @@ export default {
           this.getJSonDataToStreet("", "");
           // 切换到首页时需定位到当前图层
           if (this.$store.state.homeSpecialTown === "全部") {
-            this.setView(
-              townLocationMap.get(this.$store.state.homeSpecialTown),
-              1
-            );
+            this.setView(townLocationMap.get(this.$store.state.homeSpecialTown), 1);
             // console.log("切换到首页");
           } else {
             let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
@@ -794,35 +750,21 @@ export default {
           this.getJSonDataToStreet("", "");
           // 切换到镇域专题是时均往左偏移一些
           if (this.$store.state.homeSpecialTown === "全部") {
-            let locationArr = townLocationMap.get(
-              this.$store.state.homeSpecialTown
-            );
+            let locationArr = townLocationMap.get(this.$store.state.homeSpecialTown);
             this.setView([locationArr[0], locationArr[1] + 0.35], 1);
             console.log("执行此步");
           } else {
-            let locationArr = townLocationMap.get(
-              this.$store.state.homeSpecialTown
-            );
+            let locationArr = townLocationMap.get(this.$store.state.homeSpecialTown);
             this.setView([locationArr[0], locationArr[1]], 5);
             // let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
             // map2DViewer.map.fitBounds(polygon.getBounds());
           }
-        } else if (
-          this.$ifMenu("2", "1") ||
-          this.$ifMenu("2", "2") ||
-          this.$ifMenu("2", "3") ||
-          this.$ifMenu("2", "4")
-        ) {
+        } else if (this.$ifMenu("2", "1") || this.$ifMenu("2", "2") || this.$ifMenu("2", "3") || this.$ifMenu("2", "4")) {
           this.getJSonDataToStreet("", "");
-          let locationArr1 = townLocationMap.get(
-              this.$store.state.homeSpecialTown
-            );
+          let locationArr1 = townLocationMap.get(this.$store.state.homeSpecialTown);
           // 切换到疑点筛查时均往右偏移一些
           if (this.$store.state.homeSpecialTown === "全部") {
-            this.setView(
-              [locationArr1[0],locationArr1[1]-0.16],
-              1
-            );
+            this.setView([locationArr1[0], locationArr1[1] - 0.16], 1);
           } else {
             let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
             map2DViewer.map.fitBounds(polygon.getBounds());
@@ -867,7 +809,7 @@ export default {
         weight: 3,
         fillColor: this.getColor(name),
         opacity: 1,
-        fillOpacity: 0.4,
+        fillOpacity: 0.4
       }).addTo(map2DViewer.groups["浦东新区_polygon"]);
 
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
@@ -880,27 +822,27 @@ export default {
           radius: 10,
           weight: 1,
           fillOpacity: 0,
-          color: "#e6d273",
+          color: "#e6d273"
         });
 
         wmarker.bindLabel(feature.properties.NAME, {
           noHide: true,
           clickable: true,
           offset: [-25, 20],
-          className: "marker-text-style",
+          className: "marker-text-style"
         });
         wmarker.addTo(map2DViewer.groups["浦东新区_label"]);
         let circle1 = L.circleMarker(center, {
           radius: 8,
           weight: 1,
           fillOpacity: 0,
-          color: "#e6d273",
+          color: "#e6d273"
         }).addTo(map2DViewer.groups["浦东新区_polygon"]);
         let circle2 = L.circleMarker(center, {
           radius: 5,
           weight: 1,
           fillOpacity: 1,
-          color: "#e6d273",
+          color: "#e6d273"
         }).addTo(map2DViewer.groups["浦东新区_polygon"]);
       }
     },
@@ -939,32 +881,20 @@ export default {
      * @modelId -- modelId
      * @columnId -- columnId
      */
-    addSinglePolygon(
-      geometry,
-      cid,
-      color,
-      uniqueId,
-      mainType,
-      sourceType,
-      defaultStatus,
-      modelId,
-      columnId
-    ) {
+    addSinglePolygon(geometry, cid, color, uniqueId, mainType, sourceType, defaultStatus, modelId, columnId) {
       let uniqueIdList = [];
       if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
-        uniqueIdList =
-          this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
+        uniqueIdList = this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
       }
 
       let singlePolygonItem = {
         uniqueId: uniqueId,
         geometry: geometry,
         cid: cid,
-        color: color,
+        color: color
       };
       uniqueIdList.push(singlePolygonItem);
-      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] =
-        uniqueIdList;
+      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] = uniqueIdList;
       // 当前数据坐标系为WGS84
       let targetGeometry = JSON.parse(geometry).geometry;
       // 预设模型与所有图层层级不同
@@ -975,40 +905,42 @@ export default {
         weight: 3,
         fillColor: color,
         opacity: 1,
-        fillOpacity: 0,
+        fillOpacity: 0
       }).addTo(map2DViewer.analysisGroups[uniqueId]);
 
-      polygon.on("click", (e) => {
+      polygon.on("click", e => {
+        this.polygonOnClick = true;
         // 鼠标点击图版高亮提示逻辑
         // 首先恢复上一个图版
         if (
           this.$store.state.map2DViewerPolygonsCid.newCid &&
           map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid]
         ) {
-          map2DViewer.polygons[
-            this.$store.state.map2DViewerPolygonsCid.newCid
-          ].setStyle({
+          map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid].setStyle({
             color: this.$store.state.map2DViewerPolygonsCid.oldColor,
-            fillOpacity: 0,
+            fillOpacity: 0
           });
         }
         // 判断是否是重复点击,不是的话高亮,是的话不操作。
-        if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
-          this.$store.state.map2DViewerPolygonsCid = {
-            newCid: cid,
-            oldColor: color,
-          };
-          polygon.setStyle({
-            color: "red",
-            fillColor: "red",
-            fillOpacity: 0.35,
-          });
-        } else {
-          this.$store.state.map2DViewerPolygonsCid = {
-            newCid: null,
-            oldColor: null,
-          };
-        }
+        setTimeout(() => {
+          this.polygonOnClick = false;
+          if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
+            this.$store.state.map2DViewerPolygonsCid = {
+              newCid: cid,
+              oldColor: color
+            };
+            polygon.setStyle({
+              color: "red",
+              fillColor: "red",
+              fillOpacity: 0.35
+            });
+          } else {
+            this.$store.state.map2DViewerPolygonsCid = {
+              newCid: null,
+              oldColor: null
+            };
+          }
+        }, 200);
 
         let geojsonData = geometry;
         // 所有图层下的疑点图层 -- 常规展示
@@ -1019,7 +951,7 @@ export default {
               镇域名称: geoProperties["镇域名称"] || "--",
               "面积(平方米)": geoProperties["面积"] || "--",
               图层构成: geoProperties["图层构成"] || "--",
-              性质: geoProperties["性质"] || "--",
+              性质: geoProperties["性质"] || "--"
             };
             this.defaultStatus = defaultStatus;
 
@@ -1029,17 +961,9 @@ export default {
               this.currentSourceType = sourceType;
               this.currentModelId = modelId;
               this.currentColumnId = columnId;
-              let domItem = this.createAuditDiv(
-                cid,
-                geojsonData,
-                sourceType,
-                modelId,
-                columnId
-              );
+              let domItem = this.createAuditDiv(cid, geojsonData, sourceType, modelId, columnId);
               this.auditPopupShow = true;
-              this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
-                .setLatLng(e.latlng)
-                .setContent(domItem);
+              this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
               this.auditPopupShow = false;
               this.popup.openOn(map2DViewer.map);
             });
@@ -1049,15 +973,13 @@ export default {
               镇域名称: geoProperties["镇域名称"] || "--",
               "面积(平方米)": geoProperties["面积"] || "--",
               土地类型: geoProperties["土地类型"] || "--",
-              图斑编号: geoProperties["图斑编号"] || "--",
+              图斑编号: geoProperties["图斑编号"] || "--"
             };
 
             this.$refs.normalRef.$nextTick(() => {
               let domItem = this.createNormalDiv(cid, geojsonData, sourceType);
               this.normalAttrPopupShow = true;
-              this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
-                .setLatLng(e.latlng)
-                .setContent(domItem);
+              this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
               this.normalAttrPopupShow = false;
               this.normalPopup.openOn(map2DViewer.map);
             });
@@ -1078,7 +1000,7 @@ export default {
     },
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach((polygon) => {
+      map2DViewer.polygons[layer].forEach(polygon => {
         map2DViewer.map.removeLayer(polygon);
       });
     },
@@ -1086,8 +1008,9 @@ export default {
     drawPoints(data) {
       if (!map2DViewer.myLabels[`label_${data.id}`]) {
         let point = L.marker(data.coord, {
-          opacity: 1,
+          opacity: 1
         }).addTo(map2DViewer.groups["我的标记图层组"]);
+
         map2DViewer.myLabels[`label_${data.id}`] = point;
       }
     },
@@ -1099,12 +1022,46 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          fillOpacity: 0
         }).addTo(map2DViewer.groups["我的标记图层组"]);
+        polyline.on("click", e => {
+          this.pointOnClick(polyline, data.id, color);
+        });
         // zoom the map to the polyline
         map2DViewer.myLabels[`label_${data.id}`] = polyline;
       }
     },
+    pointOnClick(polygon, cid, color) {
+      this.polygonOnClick = true;
+      // 鼠标点击图版高亮提示逻辑
+      // 首先恢复上一个图版
+      if (this.$store.state.map2DViewerPolygonsCid.newCid && map2DViewer.myLabels[`label_${cid}`]) {
+        map2DViewer.myLabels[`label_${cid}`].setStyle({
+          color: this.$store.state.map2DViewerPolygonsCid.oldColor,
+          fillOpacity: 0
+        });
+      }
+      // 判断是否是重复点击,不是的话高亮,是的话不操作。
+      setTimeout(() => {
+        this.polygonOnClick = false;
+        if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
+          this.$store.state.map2DViewerPolygonsCid = {
+            newCid: cid,
+            oldColor: color
+          };
+          polygon.setStyle({
+            color: "red",
+            fillColor: "red",
+            fillOpacity: 0.35
+          });
+        } else {
+          this.$store.state.map2DViewerPolygonsCid = {
+            newCid: null,
+            oldColor: null
+          };
+        }
+      }, 200);
+    },
     drawPolygon(data, color) {
       if (!map2DViewer.myLabels[`label_${data.id}`]) {
         let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
@@ -1113,9 +1070,11 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          fillOpacity: 0
         }).addTo(map2DViewer.groups["我的标记图层组"]);
-
+        polygon.on("click", e => {
+          this.pointOnClick(polygon, data.id, color);
+        });
         map2DViewer.myLabels[`label_${data.id}`] = polygon;
       }
     },
@@ -1134,9 +1093,12 @@ export default {
             weight: 3,
             fillOpacity: color,
             opacity: 1,
-            fillOpacity: 0.4,
-            radius: Number(distance),
+            fillOpacity: 0,
+            radius: Number(distance)
           }).addTo(map2DViewer.groups["我的标记图层组"]);
+          circle.on("click", e => {
+            this.pointOnClick(circle, data.id, color);
+          });
           map2DViewer.myLabels[`label_${data.id}`] = circle;
         }
       }
@@ -1166,8 +1128,8 @@ export default {
       if (geometry) {
         geometry.removeFrom(map2DViewer.map);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>

File diff suppressed because it is too large
+ 138 - 309
src/views/ComprehensiveAnalysis.vue


Some files were not shown because too many files changed in this diff