同屏对比和卷帘对比组件开发。

public/static/config/config.js

@@ -21,6 +21,8 @@ var map2DViewer = {
   polylines:{},
   circles:{},
   map:null,
+  jlMap:null,
+  jlControl: {},
   layers:{},
   groups:{}
 }

src/components/common/BottomForm/SameScreenComparison.vue

@@ -10,14 +10,14 @@
     <!-- 同屏对比主题 -->
     <div class="ssc_main">
       <!-- 地图列表 -->
-      <div class="ssc_main_mapList">
+      <div class="ssc_main_mapList" :style="{ width: subMitStatus ? '100%' : '60%' }">
         <div
           class="ssc_main_mapList_showList"
           :id="'map' + index"
           v-for="(mapIndex, index) in checkedCities"
           :key="index"
           :style="mapListBoxStyle()"
-          @mouseover="changeMouseIndex(index)"
+          @mousedown="changeMouseIndex(index)"
         >
           <span>{{ mapList[mapIndex].mapName }}</span>
           <Map
@@ -30,7 +30,7 @@
         </div>
       </div>
       <!-- 底图列表 -->
-      <div class="ssc_main_aimapList">
+      <div class="ssc_main_aimapList" v-show="!subMitStatus">
         <span>地图底图(最多只能选择6个)</span>
         <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
           <el-checkbox
@@ -52,8 +52,8 @@
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="clearDialogVisible()">取 消</el-button>
-      <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
+      <el-button @click="clearDialogVisible()">{{ subMitStatus ? "返回上级" : "取 消" }}</el-button>
+      <el-button type="primary" @click="subMitDialogVisible()">{{ subMitStatus ? "打 印" : "确 定" }}</el-button>
     </span>
   </el-dialog>
 </template>
@@ -74,16 +74,11 @@ export default {
       dialogVisible: false,
       checkedCities: [],
       // 地图暂存显示变量
-      mouseIndex: -1,
-      center: [-40, 10.72521988],
-      zoom: 3,
-      minZoom: 3,
-      maxZoom: 5,
-      bound: [
-        [85, -85],
-        [-85, 85]
-      ],
       centerZoom: {},
+      mouseIndex: -1,
+      // 确认状态
+      subMitStatus: false,
+      // 地图底图列表
       mapList: [
         {
           mapName: "2018年航空影像图（春季）",
@@ -228,15 +223,25 @@ export default {
     },
     // 同屏对比取消
     clearDialogVisible() {
-      // 关闭弹窗
-      this.dialogVisible = false;
-      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
-      this.$emit("changeShowBottomMenusStatus", true);
+      // 返回上级
+      if (this.subMitStatus) {
+        this.subMitStatus = !this.subMitStatus;
+      } else {
+        // 关闭弹窗
+        this.dialogVisible = false;
+        // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+        this.$emit("changeShowBottomMenusStatus", true);
+      }
     },
     // 同屏对比表单提交
     subMitDialogVisible() {
-      this.$message.success("打开其他弹窗!");
-      this.clearDialogVisible();
+      this.subMitStatus = !this.subMitStatus;
+      if (this.subMitStatus) {
+        this.$message.success("确定!");
+      } else {
+        this.$message.success("打印!");
+        // this.clearDialogVisible();
+      }
     },
     // 修改
     handleCheckedCitiesChange(e) {
@@ -264,7 +269,7 @@ export default {
   width: 100%;
   height: calc(100vh - 190px);
   &_mapList {
-    width: 60%;
+    width: 100%;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -289,6 +294,11 @@ export default {
         font-weight: bold;
         color: #fff;
         z-index: 999;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        -khtml-user-select: none;
+        user-select: none;
       }
     }
   }

src/components/common/BottomMenus.vue

@@ -1,14 +1,9 @@
 <template>
   <div id="bottomMenus">
     <!-- 底部菜单动态SVG底座 -->
-    <BottomMenuSvg
-      id="svgBox"
-      @changeShowBottomMenusStatus="changeShowBottomMenusStatus()"
-    />
+    <BottomMenuSvg id="svgBox" @changeShowBottomMenusStatus="changeShowBottomMenusStatus()" />
     <!-- 申请任务弹窗 -->
-    <CreateTaskForm
-      @changeShowBottomMenusStatus="changeShowBottomMenusStatus"
-    />
+    <CreateTaskForm @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 我的任务弹窗 -->
     <MyMission @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 同屏对比弹窗 -->
@@ -25,7 +20,7 @@
       :style="{
         width: showBottomMenusStatus ? '981px' : '0px',
         height: showBottomMenusStatus ? '200px' : '0px',
-        border: showBottomMenusStatus ? '1px solid #00aaff' : 'none',
+        border: showBottomMenusStatus ? '1px solid #00aaff' : 'none'
       }"
     >
       <!-- 模块遍历渲染也是menus对象的第一层数组 -->
@@ -42,9 +37,7 @@
           <!-- 遍历渲染每个模块下的子菜单，也是menus数组中subMenu数组 -->
           <div
             class="colBtuMenu"
-            @click="
-              changeBottomMenu(item.index, subItem.index, subItem.clickEmit)
-            "
+            @click="changeBottomMenu(item.index, subItem.index, subItem.clickEmit)"
             v-for="(subItem, subIndex) in item.subMenu"
             :key="subIndex"
           >
@@ -56,14 +49,8 @@
             ></div>
 
             <!-- 子菜单图标的选择性渲染 -->
-            <el-image
-              class="BtuMenu_hover"
-              :src="returnBgImage(subItem.bgImage + '-a')"
-            ></el-image>
-            <el-image
-              class="BtuMenu"
-              :src="returnBgImage(subItem.bgImage)"
-            ></el-image>
+            <el-image class="BtuMenu_hover" :src="returnBgImage(subItem.bgImage + '-a')"></el-image>
+            <el-image class="BtuMenu" :src="returnBgImage(subItem.bgImage)"></el-image>
             <!-- 子菜单标题 -->
             <div class="BtuMenu_title">
               {{ subItem.title }}
@@ -95,7 +82,7 @@ export default {
     MyMission,
     SameScreenComparison,
     UploadingData,
-    CustomModelDialog,
+    CustomModelDialog
   },
   data() {
     return {
@@ -111,8 +98,8 @@ export default {
           title: "任务申请",
           subMenu: [
             { index: 0, title: "申请任务", bgImage: "sqrw", clickEmit: "sqrw" },
-            { index: 1, title: "我的任务", bgImage: "wdrw", clickEmit: "wdrw" },
-          ],
+            { index: 1, title: "我的任务", bgImage: "wdrw", clickEmit: "wdrw" }
+          ]
         },
         {
           index: 1,
@@ -123,20 +110,20 @@ export default {
               index: 0,
               title: "疑点审计",
               bgImage: "ydsj",
-              clickEmit: "caseAuditEvent",
+              clickEmit: "caseAuditEvent"
             },
             {
               index: 1,
               title: "标记疑点",
               bgImage: "bjyd",
-              clickEmit: "labelCaseEvent",
+              clickEmit: "labelCaseEvent"
             },
             { index: 2, title: "同屏对比", bgImage: "tpdb", clickEmit: "tpdb" },
             {
               index: 3,
               title: "卷帘对比",
               bgImage: "jldb",
-              clickEmit: "JLControl",
+              clickEmit: "JLControl"
             },
             { index: 4, title: "上传数据", bgImage: "scsj", clickEmit: "scsj" },
             {
@@ -151,15 +138,15 @@ export default {
           index: 2,
           width: "94px",
           title: "疑点报告",
-          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }],
+          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }]
         },
         {
           index: 3,
           width: "94px",
           title: "现场勘查",
-          subMenu: [{ index: 0, title: "发到手机", bgImage: "fdsj" }],
-        },
-      ],
+          subMenu: [{ index: 0, title: "发到手机", bgImage: "fdsj" }]
+        }
+      ]
     };
   },
   mounted() {},
@@ -187,7 +174,7 @@ export default {
       // 该逻辑可能会舍弃
       this.$store.commit("changeBottomMenu", {
         index: index,
-        subIndex: subIndex,
+        subIndex: subIndex
       });
       if (clickEvent) {
         // 调用全局事件总线中的指定事件
@@ -196,10 +183,7 @@ export default {
     },
     // 根据菜单参数bgImage,菜单父级index和子菜单index,判断全局变量已选中底部菜单的index对比，返回不同状态下的icon图标地址。
     returnBgImage(bgImage, index, subIndex) {
-      if (
-        this.$store.state.bottomMenuIndexs.index == index &&
-        this.$store.state.bottomMenuIndexs.subIndex == subIndex
-      ) {
+      if (this.$store.state.bottomMenuIndexs.index == index && this.$store.state.bottomMenuIndexs.subIndex == subIndex) {
         return "/static/images/bottomMenuIcon/" + bgImage + "-a.png";
       } else {
         return "/static/images/bottomMenuIcon/" + bgImage + ".png";
@@ -220,9 +204,9 @@ export default {
         // 否则直接切换底部菜单显示隐藏状态
         this.showBottomMenusStatus = !this.showBottomMenusStatus;
       }
-    },
+    }
   },
-  watch: {},
+  watch: {}
 };
 </script>
 
@@ -310,12 +294,7 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      background-image: linear-gradient(
-        to left,
-        @topTitleMinLeft,
-        @borderColor,
-        @topTitleMinLeft
-      );
+      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
       font-size: 16px;
       font-family: pingfangSC;
       font-weight: 300;

src/components/map/Map.vue

@@ -9,8 +9,8 @@ export default {
     return {
       map: "",
       layers: [],
-      center: [31.2, 121.5],
-      zoom: 9,
+      center: map2DViewer.map.getCenter(),
+      zoom: map2DViewer.map.getZoom(),
       minZoom: 10,
       maxZoom: 16,
       bound: [
@@ -36,7 +36,7 @@ export default {
   props: ["mapUrl", "index", "centerZoom", "mouseIndex"],
   beforeDestroyed() {},
   methods: {
-    mapInit: function () {
+    mapInit() {
       this.map = L.map(this.$refs.map, {
         attributionControl: false,
         zoomControl: false,
@@ -66,7 +66,7 @@ export default {
     centerZoom: {
       handler(newValue, oldValue) {
         if (newValue.center && newValue.zoom && newValue.index != this.index) {
-          this.setView(newValue.center,newValue.zoom);
+          this.setView(newValue.center, newValue.zoom);
         }
       },
       deep: true

src/components/map/MapHolder.vue

@@ -17,6 +17,7 @@ export default {
   components: { CaseAuditPopup, LabelCasePopup },
   data() {
     return {
+      // 卷帘对比开关
       JLControlShowStatus: false,
       town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
       auditPopupShow: false,
@@ -44,13 +45,12 @@ export default {
     this.mapInit();
     // 可视化区域图
     this.getJSonData();
-
     // 地图常用渲染方法
     // console.log(this.$store.state.mapMethodsCollection,"methods");
     this.$store.state.mapMethodsCollection.set("RENDER", {
       addPolygonLayer: this.addPolygonLayer,
       setView: this.setView,
-      deletePolygonLayer: this.deletePolygonLayer,
+      deletePolygonLayer: this.deletePolygonLayer
     });
   },
   beforeDestroyed() {
@@ -76,13 +76,13 @@ export default {
         $(() => {
           // 法律法规点击事件
           if ($(`#${str}_id a`)) {
-            $(`#${str}_id a`).click((e) => {
+            $(`#${str}_id a`).click(e => {
               console.log(e, "a label");
             });
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click((e) => {
+            $(`#${str}_id input`).click(e => {
               switch (e.target.defaultValue) {
                 case "修改":
                   this.modifyBtnEvent();
@@ -106,7 +106,18 @@ export default {
 
     // 卷帘对比
     JLControl() {
-      console.log("用户点击了卷帘对比菜单!");
+      this.JLControlShowStatus = !this.JLControlShowStatus;
+      if (this.JLControlShowStatus) {
+        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);
+      } else {
+        map2DViewer.map.removeControl(map2DViewer.jlControl);
+        map2DViewer.map.removeLayer(map2DViewer.jlMap);
+        delete map2DViewer.jlMap;
+        map2DViewer.jlControl = null;
+      }
     },
     // 疑点审计
     caseAuditEvent() {
@@ -131,7 +142,7 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 17,
+        maxZoom: 17
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
@@ -140,9 +151,7 @@ export default {
         .tiledMapLayer({
           url:
             // "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver/"
-            systemConfig.mapService +
-            "?servertype=Street_Purplish_Blue&token=" +
-            systemConfig.token,
+            systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
         })
         .addTo(map2DViewer.map);
       layer.guid = guid;
@@ -153,11 +162,9 @@ export default {
       if (!map2DViewer.map) {
         this.mapInit();
       } else {
-        get("./static/json/pdgeojson.json", "").then((geoJson) => {
-          geoJson.features.map((feature) => {
-            if (
-              this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
-            ) {
+        get("./static/json/pdgeojson.json", "").then(geoJson => {
+          geoJson.features.map(feature => {
+            if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
               let center = turf.center(feature.geometry);
               this.renderPolygon(feature);
             }
@@ -180,7 +187,7 @@ export default {
         weight: 3,
         fillColor: this.getColor(itemvalue),
         opacity: 1,
-        fillOpacity: 0.4,
+        fillOpacity: 0.4
       }).addTo(map2DViewer.map);
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
       center.reverse();
@@ -188,25 +195,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.map);
       L.circleMarker(center, {
         radius: 8,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273",
+        color: "#e6d273"
       }).addTo(map2DViewer.map);
       L.circleMarker(center, {
         radius: 5,
         weight: 1,
         fillOpacity: 1,
-        color: "#e6d273",
+        color: "#e6d273"
       }).addTo(map2DViewer.map);
     },
     latLngsToReverse: function (latlngsAry) {
@@ -234,7 +241,7 @@ export default {
     addPolygonLayer(data, cid, color) {
       // cid -- 'yongjiu'
       console.log(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;
@@ -243,7 +250,7 @@ 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;
@@ -265,11 +272,11 @@ export default {
 
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach((polygon) => {
+      map2DViewer.polygons[layer].forEach(polygon => {
         map2DViewer.map.removeLayer(polygon);
       });
-    },
-  },
+    }
+  }
 };
 </script>
 <style scoped>