同屏对比显示预设模型和所有图层已打开的标记。

src/components/common/BottomForm/SameScreenComparison.vue

@@ -263,6 +263,7 @@ export default {
           this.$nextTick(() => {
             if (this.$refs["mapBox"][index]) {
               this.$refs["mapBox"][index].changeMapSize();
+              this.$refs["mapBox"][index].addSinglePolygon(false);
             }
           });
         });

src/components/map/Map.vue

@@ -2,19 +2,20 @@
   <div class="MapViewer" ref="map"></div>
 </template>
 <script>
-import publicFun from "@/utils/publicFunction.js";
+import transformCoord from "@/utils/coordinate";
 export default {
   name: "Map",
   data() {
     return {
       map: "",
       layers: "",
+      polygon: [],
       minZoom: 10,
       maxZoom: 16,
       bound: [
         [30.5, 121],
-        [31.5, 122],
-      ],
+        [31.5, 122]
+      ]
     };
   },
   mounted() {
@@ -22,14 +23,14 @@ export default {
     this.$nextTick(() => {
       this.mapInit();
       let that = this;
-      this.map.on("move", (e) => {
+      this.map.on("move", e => {
         if (that.index == that.mouseIndex) {
           let center = that.map.getCenter();
           let zoom = that.map.getZoom();
           this.$emit("changeCenterZoom", {
             center: [center.lat, center.lng],
             zoom: zoom,
-            index: that.index,
+            index: that.index
           });
         }
       });
@@ -38,12 +39,51 @@ export default {
   props: ["mapUrl", "index", "centerZoom", "mouseIndex", "centerZoomInit"],
   beforeDestroyed() {},
   methods: {
+    addSinglePolygon(state) {
+      this.$nextTick(() => {
+        if (!state && this.polygon) {
+          this.polygon.forEach(item => {
+            this.map.removeLayer(item);
+          });
+          this.addSinglePolygon(true);
+        } else if (this.$store.state.selectSelectDataMap && this.$store.state.selectSelectDataMap.singlePolygon) {
+          for (let item in this.$store.state.selectSelectDataMap.singlePolygon) {
+            this.$store.state.selectSelectDataMap.singlePolygon[item].forEach(item => {
+              let geometry = item.geometry;
+              let uniqueId = item.uniqueId;
+              let coordinates = "";
+              if (uniqueId === "一般耕地_47") {
+                let coord = JSON.parse(geometry).geometry.coordinates[0];
+                coordinates = coord.map(v => {
+                  return [v[1], v[0]];
+                });
+              } else {
+                coordinates = JSON.parse(geometry).geometry.coordinates[0];
+                coordinates = coordinates.map(v => {
+                  let data = transformCoord.shcj_to_wgs84(v[1], [v[0]]);
+                  data = [data[1], data[0]];
+                  return data;
+                });
+              }
+              let polygon = L.polygon(coordinates, {
+                color: "#FF0000",
+                weight: 3,
+                fillColor: "#FF0000",
+                opacity: 1,
+                fillOpacity: 0.4
+              }).addTo(this.map);
+              this.polygon.push(polygon);
+            });
+          }
+        }
+      });
+    },
     mapInit() {
       this.map = L.map(this.$refs.map, {
         attributionControl: false,
         zoomControl: false,
         minZoom: this.minZoom,
-        maxZoom: this.maxZoom,
+        maxZoom: this.maxZoom
         // maxBounds: new L.LatLngBounds(this.bound[0], this.bound[1]),
       }).setView(map2DViewer.map.getCenter(), map2DViewer.map.getZoom());
 
@@ -53,7 +93,7 @@ export default {
           url:
             // "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver/"
             // systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
-            this.mapUrl,
+            this.mapUrl
         })
         .addTo(this.map);
       this.layers = layer;
@@ -73,14 +113,14 @@ export default {
               url:
                 // "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver/"
                 // systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
-                this.mapUrl,
+                this.mapUrl
             })
             .addTo(this.map);
           this.layers = layer;
           this.map.invalidateSize(true);
         }
       });
-    },
+    }
   },
   watch: {
     centerZoom: {
@@ -89,7 +129,7 @@ export default {
           this.setView(newValue.center, newValue.zoom);
         }
       },
-      deep: true,
+      deep: true
     },
     centerZoomInit: {
       handler(newValue, oldValue) {
@@ -98,9 +138,9 @@ export default {
           this.map.setView(center, newValue.zoom);
         }
       },
-      deep: true,
-    },
-  },
+      deep: true
+    }
+  }
 };
 </script>
 <style scoped>

src/components/map/MapHolder.vue

@@ -33,7 +33,7 @@ export default {
       currentLabelHtml: null,
       tableObj: {},
       // 疑点审计的保存后的疑点状态集合
-      caseStatusMap: new Map(),
+      caseStatusMap: new Map()
     };
   },
   created() {},
@@ -64,7 +64,7 @@ export default {
       deleteSinglePolygon: this.deleteSinglePolygon,
       deleteGroupFromMap: this.deleteGroupFromMap,
       drawGeometry: this.drawGeometry,
-      deleteGeometry: this.deleteGeometry,
+      deleteGeometry: this.deleteGeometry
     });
   },
   beforeDestroyed() {
@@ -85,7 +85,7 @@ export default {
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    },
+    }
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -128,9 +128,9 @@ export default {
         this.$nextTick(() => {
           this.getJSonData();
         });
-      },
+      }
       // immediate: true
-    },
+    }
   },
   methods: {
     // 开始标记疑点事件
@@ -141,7 +141,7 @@ export default {
     stopLabelCase() {
       if (map2DViewer.measureTool) {
         map2DViewer.setDrawTool({
-          action: "remove",
+          action: "remove"
         });
       }
     },
@@ -163,40 +163,30 @@ export default {
         div.innerHTML = this.currentHtml;
         $(() => {
           if (properties) {
-            $(`#${str}_id .center-table-item-normal .leftcell`).each(
-              (index, domEle) => {
-                $(`#${str}_id .center-table-item-normal .leftcell`)
-                  .eq(index)
-                  .text(Object.keys(properties)[index]);
-              }
-            );
-            $(`#${str}_id .center-table-item-normal .rightcell`).each(
-              (index, domEle) => {
-                $(`#${str}_id .center-table-item-normal .rightcell`)
-                  .eq(index)
-                  .text(Object.values(properties)[index]);
-              }
-            );
+            $(`#${str}_id .center-table-item-normal .leftcell`).each((index, domEle) => {
+              $(`#${str}_id .center-table-item-normal .leftcell`).eq(index).text(Object.keys(properties)[index]);
+            });
+            $(`#${str}_id .center-table-item-normal .rightcell`).each((index, domEle) => {
+              $(`#${str}_id .center-table-item-normal .rightcell`).eq(index).text(Object.values(properties)[index]);
+            });
           }
 
           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));
             }
           }
 
           // 法律法规点击事件
           if ($(`#${str}_id a`)) {
-            $(`#${str}_id a`).click((e) => {
+            $(`#${str}_id a`).click(e => {
               console.log(e, "显示疑点相关的弹窗");
               this.$store.state.lawPopupShow = true;
             });
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click((e) => {
+            $(`#${str}_id input`).click(e => {
               switch (e.target.defaultValue) {
                 case "取消":
                   this.cancelBtnEvent();
@@ -231,7 +221,7 @@ export default {
         $(() => {
           console.log($(`#${str}_id textarea`).val(), "textarea");
           $(`#${str}_id`).css("height", "100%");
-          $(`#${str}_id input`).click((e) => {
+          $(`#${str}_id input`).click(e => {
             console.log(e.target.defaultValue);
             switch (e.target.defaultValue) {
               case "取消":
@@ -260,22 +250,20 @@ 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: 47,
         modelId: 49,
-        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();
         }
-      );
+      });
     },
     cancelBtnEvent() {
       map2DViewer.map.closePopup();
@@ -294,12 +282,7 @@ export default {
         let title = $(`#${str}_id select`).val();
         let des = $(`#${str}_id textarea`).val();
         let coordinates = [data.points];
-        let geometry = publicFun.generateGeoJSON(
-          title,
-          des,
-          geoType,
-          coordinates
-        );
+        let geometry = publicFun.generateGeoJSON(title, des, geoType, coordinates);
 
         let params = new FormData();
 
@@ -307,10 +290,10 @@ export default {
           geojson: JSON.stringify(geometry),
           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) {
               console.log(res, "添加标记成功");
               map2DViewer.map.closePopup();
@@ -319,34 +302,30 @@ export default {
               paramData = {
                 userId: Number(localStorage.getItem("USER_ID")),
                 sourceId: 0,
-                pageSize: 10,
+                pageSize: 10
               };
-              this.$Post(this.urlsCollection.selectByUser, paramData).then(
-                (userRes) => {
-                  if (userRes.code === 200) {
-                    // console.log(userRes, "获取我的标记疑点数据");
+              this.$Post(this.urlsCollection.selectByUser, paramData).then(userRes => {
+                if (userRes.code === 200) {
+                  // console.log(userRes, "获取我的标记疑点数据");
 
-                    if (userRes.content.length > 0) {
-                      this.$store.state.myLabelPointsArr = [];
-                      this.$store.state.myLabelPointsArr = userRes.content.map(
-                        (v) => {
-                          return {
-                            id: v.id,
-                            geojson: v.geojson,
-                            type: v.type,
-                          };
-                        }
-                      );
-                    }
+                  if (userRes.content.length > 0) {
+                    this.$store.state.myLabelPointsArr = [];
+                    this.$store.state.myLabelPointsArr = userRes.content.map(v => {
+                      return {
+                        id: v.id,
+                        geojson: v.geojson,
+                        type: v.type
+                      };
+                    });
                   }
-                  // 更新时调用一次搜索接口
                 }
-              );
+                // 更新时调用一次搜索接口
+              });
             }
             // 保存后需要删除地图上的标记
             this.reStartLabelCase();
           },
-          (error) => {
+          error => {
             console.log("标记疑点保存失败！", error);
             this.reStartLabelCase();
           }
@@ -359,9 +338,7 @@ export default {
         map2DViewer.jlMap = L.tileLayer(
           "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         ).addTo(map2DViewer.map);
-        map2DViewer.jlControl = L.control
-          .sideBySide(map2DViewer.map, map2DViewer.jlMap)
-          .addTo(map2DViewer.map);
+        map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
       } else if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
         map2DViewer.map.removeControl(map2DViewer.jlControl);
         map2DViewer.map.removeLayer(map2DViewer.jlMap);
@@ -384,9 +361,7 @@ export default {
       // 每次点击按钮后重绘弹窗
       if (this.currentHtml && this.currentCid) {
         setTimeout(() => {
-          this.popup.setContent(
-            this.createAuditDiv(this.currentCid, this.currentProperties)
-          );
+          this.popup.setContent(this.createAuditDiv(this.currentCid, this.currentProperties));
           // .openOn(map2DViewer.map);
         }, 300);
       }
@@ -395,7 +370,7 @@ export default {
     initDraw() {
       if (!map2DViewer.measureTool) {
         // 引入疑点标记绘制方法
-        map2DViewer.drawToolFire = (data) => {
+        map2DViewer.drawToolFire = data => {
           // 纬经度
           if (data && data.points.length >= 1) {
             let geoType = null;
@@ -434,7 +409,7 @@ export default {
           color: "red",
           font_size: "14px",
           closeButton: true,
-          iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
+          iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png"
         });
       }
     },
@@ -463,7 +438,7 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 16,
+        maxZoom: 16
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
@@ -477,7 +452,7 @@ export default {
 
             // url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
             // tileSize: 512
-            systemConfig.blueBlackMap,
+            systemConfig.blueBlackMap
         })
         .addTo(map2DViewer.map);
       // layer.setStyle({opacity:0,fillOpacity:0})
@@ -495,16 +470,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) => {
-          if (
-            this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
-          ) {
+        geoJson.features.map(feature => {
+          if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
             this.renderPolygon(feature);
           }
         });
@@ -549,7 +522,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;
@@ -561,25 +534,25 @@ export default {
         radius: 10,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273",
+        color: "#e6d273"
       });
       wmarker.bindLabel(feature.properties.NAME, {
         noHide: true,
         clickable: true,
-        offset: [-25, 10],
+        offset: [-25, 10]
       });
       wmarker.addTo(map2DViewer.groups["浦东新区_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"]);
     },
     latLngsToReverse: function (latlngsAry) {
@@ -603,16 +576,28 @@ export default {
       }
     },
     addSinglePolygon(geometry, cid, color, uniqueId) {
+      let uniqueIdList = [];
+      if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
+        uniqueIdList = this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
+      }
+
+      let singlePolygonItem = {
+        uniqueId: uniqueId,
+        geometry: geometry,
+        cid: cid
+      };
+      uniqueIdList.push(singlePolygonItem);
+      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] = uniqueIdList;
       let coordinates = "";
 
       if (uniqueId === "一般耕地_47") {
         let coord = JSON.parse(geometry).geometry.coordinates[0];
-        coordinates = coord.map((v) => {
+        coordinates = coord.map(v => {
           return [v[1], v[0]];
         });
       } else {
         coordinates = JSON.parse(geometry).geometry.coordinates[0];
-        coordinates = coordinates.map((v) => {
+        coordinates = coordinates.map(v => {
           let data = transformCoord.shcj_to_wgs84(v[1], [v[0]]);
           data = [data[1], data[0]];
           return data;
@@ -630,10 +615,10 @@ export default {
         weight: 3,
         fillColor: color,
         opacity: 1,
-        fillOpacity: 0.4,
+        fillOpacity: 0.4
       }).addTo(map2DViewer.analysisGroups[uniqueId]);
 
-      polygon.on("click", (e) => {
+      polygon.on("click", e => {
         this.auditPopupShow = true;
         this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
           .setLatLng(e.latlng)
@@ -646,7 +631,7 @@ export default {
     },
     // 综合分析 - 图层绘制面
     addPolygonLayer(data, cid, color) {
-      data.map((feature) => {
+      data.map(feature => {
         let polygonData = JSON.parse(JSON.stringify(feature));
         let coordinates = polygonData.geometry.coordinates[0];
         let infos = polygonData.properties;
@@ -655,18 +640,16 @@ export default {
           weight: 3,
           fillColor: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          fillOpacity: 0.4
         }).addTo(map2DViewer.map);
         map2DViewer.polygons[`${cid}_layer`].push(polygon);
         polygon.infos = infos;
-        polygon.on("click", (e) => {
+        polygon.on("click", e => {
           // console.log(e, "polygon");
           this.auditPopupShow = true;
           // console.log(e.latlng, "获取当前弹窗坐标111");
 
-          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
-            .setLatLng(e.latlng)
-            .setContent(this.createAuditDiv(cid));
+          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(this.createAuditDiv(cid));
           // .openOn(map2DViewer.map);
           this.auditPopupShow = false;
           this.popup.openOn(map2DViewer.map);
@@ -686,7 +669,7 @@ export default {
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
       console.log(layer, "layer");
-      map2DViewer.polygons[layer].forEach((polygon) => {
+      map2DViewer.polygons[layer].forEach(polygon => {
         map2DViewer.map.removeLayer(polygon);
       });
     },
@@ -696,7 +679,7 @@ export default {
       if (!map2DViewer.myLabels[`label_${data.id}`]) {
         // console.log("开始绘制点", data);
         let point = L.marker(data.coord, {
-          opacity: 1,
+          opacity: 1
         }).addTo(map2DViewer.map);
         map2DViewer.myLabels[`label_${data.id}`] = point;
       }
@@ -710,15 +693,13 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          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()
-        );
+        map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
       }
     },
     drawPolygon(data, color) {
@@ -730,14 +711,12 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          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()
-        );
+        map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
       }
     },
 
@@ -751,24 +730,21 @@ export default {
           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, "圆的半径");
+          (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),
+            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()
-        );
+        map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
       }
     },
     /**
@@ -797,8 +773,8 @@ export default {
         console.log(geometry, "移除");
         geometry.removeFrom(map2DViewer.map);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>