同屏对比页面添加图斑信息展示

src/components/common/BottomForm/SameScreenComparison.vue

@@ -46,18 +46,10 @@
           已选择<span class="checkLength">{{ checkedCities.length }}</span
           >个
         </div>
-        <el-checkbox-group
-          id="mapCheckBox"
-          v-model="checkedCities"
-          @change="handleCheckedCitiesChange"
-          :min="2"
-          :max="6"
-        >
+        <el-checkbox-group id="mapCheckBox" v-model="checkedCities" @change="handleCheckedCitiesChange" :min="2" :max="6">
           <el-checkbox
             class="mapCheckBox"
-            :disabled="
-              checkedCities.length >= 6 && checkedCities.indexOf(index) == -1
-            "
+            :disabled="checkedCities.length >= 6 && checkedCities.indexOf(index) == -1"
             v-for="(city, index) in mapList"
             :checked="city.active"
             :label="index"
@@ -69,31 +61,68 @@
     </div>
     <!-- 底部文本域 -->
     <div id="textareaBox">
-      <div class="doPrintInfo">时间：{{ newTime }}</div>
-      <div class="textareaTitle">描述记录:</div>
-      <el-input
-        type="textarea"
-        :autosize="{ minRows: 3, maxRows: 4 }"
-        placeholder="请输入内容"
-        v-model="textarea1"
-      >
-      </el-input>
+      <div class="doPrintInfo">
+        <div>
+          时间：{{ newTime }}
+          <div v-if="$store.state.mapMarkInfo['行政区代码']">
+            行政区代码:<span style="color: #c0c4cc">{{ $store.state.mapMarkInfo["行政区代码"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['镇域名称']">
+            镇域名称:<span style="color: #c0c4cc">{{ $store.state.mapMarkInfo["镇域名称"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['数据来源']">
+            数据来源:<span style="color: #c0c4cc">{{ $store.state.mapMarkInfo["数据来源"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['图斑编号']">
+            图斑编号:<span style="color: #c0c4cc">{{ $store.state.mapMarkInfo["图斑编号"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['面积']">
+            面积（平方米）:<span style="color: #c0c4cc">{{ $store.state.mapMarkInfo["面积"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['问题描述']">
+            问题描述:<span style="color: #c0c4cc">{{ $store.state.mapMarkInfo["问题描述"] }}</span>
+          </div>
+        </div>
+        <div>
+          <div class="textareaTitle">描述:</div>
+          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入内容" v-model="textarea1">
+          </el-input>
+        </div>
+      </div>
     </div>
     <!-- 打印区域 -->
     <div id="imgBox">
-      <span>基本农田被侵占</span>
-      <img
-        src=""
-        id="imgOut"
-        style="
-          width: 1240px;
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-        "
-      />
-      <div class="doPrintInfo2">时间：{{ newTime }}</div>
-      <span><div>描述记录:</div></span>
-      <div>{{ textarea1 }}</div>
+      <span>{{ $store.state.mapMarkInfo["Layer"] ? $store.state.mapMarkInfo["Layer"] : pageTitle }}</span>
+      <img src="" id="imgOut" style="width: 1240px; background-repeat: no-repeat; background-size: 100% 100%" />
+
+      <div class="doPrintInfo2">
+        <div>
+          时间：{{ newTime }}
+          <div v-if="$store.state.mapMarkInfo['行政区代码']">
+            行政区代码:<span style="color: #dcdfe6">{{ $store.state.mapMarkInfo["行政区代码"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['镇域名称']">
+            镇域名称:<span style="color: #dcdfe6">{{ $store.state.mapMarkInfo["镇域名称"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['数据来源']">
+            数据来源:<span style="color: #dcdfe6">{{ $store.state.mapMarkInfo["数据来源"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['图斑编号']">
+            图斑编号:<span style="color: #dcdfe6">{{ $store.state.mapMarkInfo["图斑编号"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['面积']">
+            面积（平方米）:<span style="color: #dcdfe6">{{ $store.state.mapMarkInfo["面积"] }}</span>
+          </div>
+          <div v-if="$store.state.mapMarkInfo['问题描述']">
+            问题描述:<span style="color: #dcdfe6">{{ $store.state.mapMarkInfo["问题描述"] }}</span>
+          </div>
+        </div>
+        <hr />
+        <div>
+          <div class="textareaTitle">描述:</div>
+          <p>{{ textarea1 }}</p>
+        </div>
+      </div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="clearDialogVisible()">取 消</el-button>
@@ -116,6 +145,7 @@ export default {
   components: { Map },
   data() {
     return {
+      pageTitle: "同屏对比",
       sortBaseMap: [],
       doPrintLoading: false,
       // 同屏对比弹窗显示状态
@@ -138,7 +168,7 @@ export default {
       // 底部文本域
       textarea1: "",
       // 地图底图列表
-      mapList: [],
+      mapList: []
     };
   },
   created() {
@@ -177,27 +207,25 @@ export default {
       params.append("page", 0);
       let sortparam = [{ field: "c_year", orderByType: 1 }];
       params.append("orderBy", JSON.stringify(sortparam));
-      this.$Post(this.urlsCollection.selectContentList, params).then((res) => {
+      this.$Post(this.urlsCollection.selectContentList, params).then(res => {
         if (res.code === 200 && res.content.data.length > 0) {
           let data = res.content.data;
-          data.forEach((v) => {
+          data.forEach(v => {
             map2DViewer.baseMapCollection.unshift({
               mapName: v.title,
-              mapUrl:
-                v.c_url +
-                "?AccessKey=lUaEMxqqhZKLSImGuP/Ergx47orYVyIqHVgxfyGpIurKAy9kdq5uU1cWuTuIXeOM",
+              mapUrl: v.c_url + "?AccessKey=lUaEMxqqhZKLSImGuP/Ergx47orYVyIqHVgxfyGpIurKAy9kdq5uU1cWuTuIXeOM",
               active: v.c_defined_show ? v.c_defined_show : false,
               basemapType: v.basemap,
               year: v.c_year,
-              abbr: v.c_abbr,
+              abbr: v.c_abbr
             });
           });
-          this.mapList = map2DViewer.baseMapCollection.map((v) => {
+          this.mapList = map2DViewer.baseMapCollection.map(v => {
             return {
               mapName: v.mapName,
               mapUrl: v.mapUrl,
               active: v.active,
-              year: v.year,
+              year: v.year
             };
           });
         }
@@ -208,6 +236,7 @@ export default {
     changeShowBottomMenusStatus() {
       // 打开弹窗
       this.dialogVisible = true;
+      this.$store.state.mapMarkInfo = {};
       this.$emit("changeShowBottomMenusStatus", false);
       // 打开弹窗前首先同步一下地图定位
       let mapCenter = map2DViewer.map.getCenter();
@@ -216,7 +245,7 @@ export default {
         this.centerZoomInit = {
           lat: mapCenter.lat,
           lng: mapCenter.lng,
-          zoom: mapZoom,
+          zoom: mapZoom
         };
       }
       setTimeout(() => {
@@ -257,7 +286,7 @@ export default {
           _width,
           _height,
           useCORS: true,
-          allowTaint: true,
+          allowTaint: true
         };
         let that = this;
         let parentNodeList = [];
@@ -295,45 +324,31 @@ export default {
         });
         // html2canvas插件实现dom转imageBase64
         html2canvas(this.$refs.doPrint, ops).then(
-          (canvas) => {
-            document
-              .getElementById("imgOut")
-              .setAttribute("src", canvas.toDataURL("image/png"));
+          canvas => {
+            document.getElementById("imgOut").setAttribute("src", canvas.toDataURL("image/png"));
             setTimeout(() => {
               if (that.doPrintLoading) {
                 that.doPrint(parentNodeList, svgElemNodeList, canvasList);
               }
             }, 1000);
           },
-          (error) => {
+          error => {
             that.$message.error(error);
-            this.showMapSvgAndRemoveMapCanvas(
-              parentNodeList,
-              svgElemNodeList,
-              canvasList
-            );
+            this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
             this.doPrintLoading = false;
           }
         );
         setTimeout(() => {
           if (this.doPrintLoading) {
             this.$message.error("打印超时请稍后重试！");
-            this.showMapSvgAndRemoveMapCanvas(
-              parentNodeList,
-              svgElemNodeList,
-              canvasList
-            );
+            this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
             this.doPrintLoading = false;
           }
         }, 10000);
       } catch (e) {
         if (this.doPrintLoading) {
           this.$message.error("打印异常，异常信息：" + e);
-          this.showMapSvgAndRemoveMapCanvas(
-            parentNodeList,
-            svgElemNodeList,
-            canvasList
-          );
+          this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
           this.doPrintLoading = false;
         }
       }
@@ -360,11 +375,7 @@ export default {
       var obj = document.getElementById("imgBox");
       doc.write(obj.innerHTML);
       doc.close();
-      this.showMapSvgAndRemoveMapCanvas(
-        parentNodeList,
-        svgElemNodeList,
-        canvasList
-      );
+      this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
       this.doPrintLoading = false;
       new_iframe.contentWindow.focus();
       new_iframe.contentWindow.print();
@@ -372,12 +383,12 @@ export default {
     },
     // 修改选中地图
     handleCheckedCitiesChange() {
-      this.sortBaseMap = this.checkedCities.map((v) => {
+      this.sortBaseMap = this.checkedCities.map(v => {
         return {
           id: v,
           mapUrl: this.mapList[v].mapUrl,
           mapName: this.mapList[v].mapName,
-          year: this.mapList[v].year,
+          year: this.mapList[v].year
         };
       });
       let newSortBaseMap = this.sortBaseMap.sort((a, b) => {
@@ -420,9 +431,9 @@ export default {
       if (!this.MouseDownStatus) {
         this.mouseIndex = mouseIndex;
       }
-    },
+    }
   },
-  watch: {},
+  watch: {}
 };
 </script>
 <style lang="less" scoped>
@@ -519,6 +530,7 @@ export default {
 .textareaTitle {
   font-size: 20px;
   font-weight: 400;
+  color: #ffffff;
 }
 #imgBox {
   display: none;
@@ -533,9 +545,17 @@ export default {
   }
 }
 .doPrintInfo {
+  display: flex;
   color: #ffffff;
+  div {
+    padding: 0 10px;
+  }
 }
 .doPrintInfo2 {
+  display: flex;
   color: #000000;
+  div {
+    padding: 0 10px;
+  }
 }
 </style>

src/components/map/Map.vue

@@ -9,7 +9,7 @@ export default {
     return {
       map: "",
       layers: "",
-      polygon: [],
+      polygon: []
     };
   },
   mounted() {
@@ -17,14 +17,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
           });
         }
       });
@@ -36,53 +36,41 @@ export default {
     addSinglePolygon(state) {
       this.$nextTick(() => {
         if (!state && this.polygon) {
-          this.polygon.forEach((item) => {
+          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) {
+        } else if (this.$store.state.selectSelectDataMap && this.$store.state.selectSelectDataMap.singlePolygon) {
+          for (let item in this.$store.state.selectSelectDataMap.singlePolygon) {
             // 如果是叠置分析的图层处理方式
-            if (
-              this.$store.state.selectSelectDataMap.singlePolygon[
-                item
-              ][0].uniqueId.indexOf("overlay") > -1
-            ) {
-              let uniqueId =
-                this.$store.state.selectSelectDataMap.singlePolygon[item][0]
-                  .uniqueId;
-              let color =
-                this.$store.state.selectSelectDataMap.singlePolygon[item][0]
-                  .color;
-              let statesArr =
-                this.$store.state.selectSelectDataMap.singlePolygon[item].map(
-                  (v) => {
-                    return JSON.parse(v.geometry);
-                  }
-                );
+            if (this.$store.state.selectSelectDataMap.singlePolygon[item][0].uniqueId.indexOf("overlay") > -1) {
+              let uniqueId = this.$store.state.selectSelectDataMap.singlePolygon[item][0].uniqueId;
+              let color = this.$store.state.selectSelectDataMap.singlePolygon[item][0].color;
+              let statesArr = this.$store.state.selectSelectDataMap.singlePolygon[item].map(v => {
+                return JSON.parse(v.geometry);
+              });
               this.readGeojson(statesArr, color);
             } else {
               // 非叠置分析图层的处理方式
-              this.$store.state.selectSelectDataMap.singlePolygon[item].forEach(
-                (v) => {
-                  let geometry = v.geometry;
-                  let coord = JSON.parse(geometry).geometry.coordinates[0];
-                  // 经纬度顺序转换
-                  let coordinates = publicFun.latLngsToReverse(coord);
-                  let polygon = L.polygon(coordinates, {
-                    color: v.color,
-                    weight: 3,
-                    fillColor: v.color,
-                    opacity: 1,
-                    fillOpacity: 0,
-                  }).addTo(this.map);
-                  this.polygon.push(polygon);
-                }
-              );
+              this.$store.state.selectSelectDataMap.singlePolygon[item].forEach(v => {
+                let geometry = v.geometry;
+                let coord = JSON.parse(geometry).geometry.coordinates[0];
+                // 经纬度顺序转换
+                let coordinates = publicFun.latLngsToReverse(coord);
+                let polygon = L.polygon(coordinates, {
+                  color: v.color,
+                  weight: 3,
+                  fillColor: v.color,
+                  opacity: 1,
+                  fillOpacity: 0
+                }).addTo(this.map);
+                polygon.on("click", e => {
+                  if (v.geometry && JSON.parse(v.geometry).properties) {
+                    this.$store.state.mapMarkInfo = JSON.parse(v.geometry).properties;
+                  }
+                });
+                this.polygon.push(polygon);
+              });
             }
           }
         }
@@ -94,7 +82,7 @@ export default {
       let geojsonData = L.geoJSON(geojsonArr, {
         style: function (feature) {
           return { color: color };
-        },
+        }
       }).addTo(this.map);
       this.polygon.push(geojsonData);
     },
@@ -104,14 +92,12 @@ export default {
         "+proj=tmerc +lat_0=0 +lon_0=121.2751921 +k=1 +x_0=0 +y_0=-3457147.81 +ellps=krass +units=m +no_defs",
         {
           resolutions: [
-            132.2919312505292, 52.91677250021167, 26.458386250105836,
-            13.229193125052918, 5.291677250021167, 2.6458386250105836,
-            1.3229193125052918, 0.5291677250021167, 0.26458386250105836,
-            0.13229193125052918, 0.0529167725002, 0.0264583862501,
-            0.0132291931251, 0.00529167725, 0.002645838625, 0.0013229193125,
+            132.2919312505292, 52.91677250021167, 26.458386250105836, 13.229193125052918, 5.291677250021167, 2.6458386250105836,
+            1.3229193125052918, 0.5291677250021167, 0.26458386250105836, 0.13229193125052918, 0.0529167725002, 0.0264583862501,
+            0.0132291931251, 0.00529167725, 0.002645838625, 0.0013229193125
           ],
           origin: [-66000, 75000],
-          bounds: L.bounds([-65000, -76000], [75000, 72000]),
+          bounds: L.bounds([-65000, -76000], [75000, 72000])
         }
       );
       this.map = L.map(this.$refs.map, {
@@ -120,13 +106,11 @@ export default {
         minZoom: 0,
         maxZoom: 14,
         attributionControl: false,
-        zoomControl: false,
+        zoomControl: false
       }).setView(map2DViewer.map.getCenter(), map2DViewer.map.getZoom());
 
       //添加默认图层
-      let layer = this.$store.state.mapMethodsCollection
-        .get("RENDER")
-        .addTiledMapLayer(this.mapUrl);
+      let layer = this.$store.state.mapMethodsCollection.get("RENDER").addTiledMapLayer(this.mapUrl);
       this.layers = layer;
     },
     setView: function (coord, zoom) {
@@ -140,15 +124,12 @@ export default {
       this.$nextTick(() => {
         if (this.map) {
           this.map.removeLayer(this.layers);
-          let layer = this.$store.state.mapMethodsCollection
-            .get("RENDER")
-            .addTiledMapLayer(this.mapUrl)
-            .addTo(this.map);
+          let layer = this.$store.state.mapMethodsCollection.get("RENDER").addTiledMapLayer(this.mapUrl).addTo(this.map);
           this.layers = layer;
           this.map.invalidateSize(true);
         }
       });
-    },
+    }
   },
   watch: {
     centerZoom: {
@@ -157,7 +138,7 @@ export default {
           this.setView(newValue.center, newValue.zoom);
         }
       },
-      deep: true,
+      deep: true
     },
     centerZoomInit: {
       handler(newValue, oldValue) {
@@ -166,9 +147,9 @@ export default {
           this.map.setView(center, newValue.zoom);
         }
       },
-      deep: true,
-    },
-  },
+      deep: true
+    }
+  }
 };
 </script>
 <style scoped>

src/store/index.js

@@ -51,6 +51,8 @@ export default new Vuex.Store({
     // 全局类型变量
     selectSelectDataMap: {},
     preModelLayerMap: [],
+    // 同屏对比中选中图层暂存详细信息
+    mapMarkInfo: {}
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,