修复当点击切换底图时，卷帘对比的对比底图url也被修改BUG。

src/components/map/BasemapChange.vue

@@ -5,7 +5,7 @@
       class="map-change"
       :style="{
         right: `${rightPosition}%`,
-        bottom: `${bottomPostion}px`,
+        bottom: `${bottomPostion}px`
       }"
       @mouseover="mouseover"
       @mouseleave="mouseleave"
@@ -19,7 +19,7 @@
         :class="{ active: index === 0 }"
         :style="{
           right: `${index * state.rightPX}px`,
-          'z-index': 99 - index,
+          'z-index': 99 - index
         }"
         @click="change(index, item.type)"
       />
@@ -46,7 +46,7 @@ export default {
         // 深色地图
         SEA: require("@/assets/map/03_.png"),
         // 街道底图
-        JDA: require("@/assets/map/01_.png"),
+        JDA: require("@/assets/map/01_.png")
       },
       state: {
         // 图片数组
@@ -55,17 +55,17 @@ export default {
             src: require("@/assets/map/03.png"),
             type: 1,
             active: "SEA",
-            defalut: "SE",
+            defalut: "SE"
           },
           {
             src: require("@/assets/map/02.png"),
             type: 0,
             active: "DXA",
-            defalut: "DX",
-          },
+            defalut: "DX"
+          }
         ],
-        rightPX: 50, // 每张图片距离右侧的距离 * index
-      },
+        rightPX: 50 // 每张图片距离右侧的距离 * index
+      }
     };
   },
   computed: {
@@ -77,14 +77,14 @@ export default {
     },
     baseMapType() {
       return this.$store.state.baseMapType;
-    },
+    }
   },
   watch: {
     baseMapRight: {
       handler(val) {
         this.rightPosition = val;
       },
-      immediate: true,
+      immediate: true
     },
     menuChange: {
       handler(val) {
@@ -97,11 +97,11 @@ export default {
         }
       },
       deep: true,
-      immediate: true,
+      immediate: true
     },
     baseMapType(val) {
       // console.log(val, "地图类型");
-    },
+    }
   },
   methods: {
     change(index, type) {
@@ -123,7 +123,6 @@ export default {
             map2DViewer.map.removeLayer(map2DViewer.layers["darkmap"]);
             map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
           }
-
           break;
         case 1:
           // console.log("蓝黑图");
@@ -131,9 +130,11 @@ export default {
             map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
             map2DViewer.map.addLayer(map2DViewer.layers["darkmap"]);
           }
-
           break;
       }
+
+      // 调用全局事件总线中的指定事件
+      this.$bus.$emit("reJLControl");
     },
     // 悬浮时图片右移
     mouseover() {
@@ -141,8 +142,8 @@ export default {
     },
     mouseleave() {
       this.state.rightPX = 50;
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>

src/components/map/MapHolder.vue

@@ -28,7 +28,7 @@ export default {
       currentHtml: null,
       // 标记疑点
       currentLabelCid: null,
-      currentLabelHtml: null,
+      currentLabelHtml: null
     };
   },
   mounted() {
@@ -36,6 +36,10 @@ export default {
     this.$bus.$on("JLControl", () => {
       this.JLControl();
     });
+    // 监听全局事件总线中的卷帘对比重绘事件（reJLControl）
+    this.$bus.$on("reJLControl", () => {
+      this.reJLControl();
+    });
     this.$bus.$on("caseAuditEvent", () => {
       this.caseAuditEvent();
     });
@@ -48,7 +52,7 @@ export default {
       setView: this.setView,
       deletePolygonLayer: this.deletePolygonLayer,
       drawGeometry: this.drawGeometry,
-      deleteGeometry: this.deleteGeometry,
+      deleteGeometry: this.deleteGeometry
     });
   },
   beforeDestroyed() {
@@ -68,7 +72,7 @@ export default {
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    },
+    }
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -113,9 +117,9 @@ export default {
         this.$nextTick(() => {
           this.getJSonData();
         });
-      },
+      }
       // immediate: true,
-    },
+    }
   },
   methods: {
     // 开始标记疑点事件
@@ -126,7 +130,7 @@ export default {
     stopLabelCase() {
       if (map2DViewer.measureTool) {
         map2DViewer.setDrawTool({
-          action: "remove",
+          action: "remove"
         });
       }
     },
@@ -148,14 +152,14 @@ export default {
         $(() => {
           // 法律法规点击事件
           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.modifyBtnEvent();
@@ -190,7 +194,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 "取消":
@@ -228,12 +232,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();
 
@@ -241,12 +240,12 @@ export default {
           geojson: JSON.stringify(geometry),
           type: geoType,
           userId: Number(localStorage.getItem("USER_ID")),
-          sourceId: 0,
+          sourceId: 0
         };
         console.log(params, "params");
 
         this.$Post(this.urlsCollection.addConllection, params).then(
-          (res) => {
+          res => {
             if (res.code == 200) {
               console.log(res, "添加标记成功");
               map2DViewer.map.closePopup();
@@ -255,32 +254,28 @@ 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
+                      };
+                    });
                   }
-                  // 更新时调用一次搜索接口
                 }
-              );
+                // 更新时调用一次搜索接口
+              });
             }
           },
-          (error) => {
+          error => {
             console.log(error);
           }
         );
@@ -292,9 +287,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);
@@ -302,14 +295,22 @@ export default {
         map2DViewer.jlControl = null;
       }
     },
+    // 卷帘对比重绘
+    reJLControl() {
+      if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
+        map2DViewer.map.removeControl(map2DViewer.jlControl);
+        map2DViewer.map.removeLayer(map2DViewer.jlMap);
+        delete map2DViewer.jlMap;
+        map2DViewer.jlControl = null;
+        this.JLControl();
+      }
+    },
     // 疑点审计
     caseAuditEvent() {
       // 每次点击按钮后重绘弹窗
       if (this.currentHtml && this.currentCid) {
         setTimeout(() => {
-          this.popup
-            .setContent(this.createAuditDiv(this.currentCid))
-            .openOn(map2DViewer.map);
+          this.popup.setContent(this.createAuditDiv(this.currentCid)).openOn(map2DViewer.map);
         }, 300);
       }
     },
@@ -317,7 +318,7 @@ export default {
     initDraw() {
       if (!map2DViewer.measureTool) {
         // 引入疑点标记绘制方法
-        map2DViewer.drawToolFire = (data) => {
+        map2DViewer.drawToolFire = data => {
           // 纬经度
           if (data && data.points.length >= 1) {
             let geoType = null;
@@ -357,7 +358,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"
         });
       }
     },
@@ -386,17 +387,14 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 16,
+        maxZoom: 16
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
       let guid = publicFun.buildGuid("baseLayer");
       let layer = L.esri
         .tiledMapLayer({
-          url:
-            systemConfig.mapService +
-            "?servertype=Street_Purplish_Blue&token=" +
-            systemConfig.token,
+          url: systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
           // url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
           // tileSize: 512
         })
@@ -416,16 +414,14 @@ export default {
         map2DViewer.groups["浦东新区_polygon"].remove();
       }
       // 请求并渲染新的区域图层
-      get("./static/json/pdgeojson.json", "").then((geoJson) => {
+      get("./static/json/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);
           }
         });
@@ -470,7 +466,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;
@@ -481,25 +477,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) {
@@ -524,7 +520,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;
@@ -533,18 +529,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);
@@ -555,7 +549,7 @@ export default {
 
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach((polygon) => {
+      map2DViewer.polygons[layer].forEach(polygon => {
         map2DViewer.map.removeLayer(polygon);
       });
     },
@@ -564,8 +558,8 @@ export default {
       this.setView(data.coord, 16);
       if (!map2DViewer.myLabels[`label_${data.id}`]) {
         console.log("开始绘制点", data);
-        let point = L.marker(data.coord,{
-          opacity:1
+        let point = L.marker(data.coord, {
+          opacity: 1
         }).addTo(map2DViewer.map);
         map2DViewer.myLabels[`label_${data.id}`] = point;
       }
@@ -579,15 +573,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) {
@@ -599,14 +591,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());
       }
     },
 
@@ -620,24 +610,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());
       }
     },
     /**
@@ -666,8 +653,8 @@ export default {
         console.log(geometry, "移除");
         geometry.removeFrom(map2DViewer.map);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>

src/views/HomeView.vue

@@ -83,7 +83,7 @@
     <!-- 频发问题 -->
     <FrequencyView id="FrequencyContainer" v-if="$ifMenu('5', '2')" />
 
-    <!-- Home页面 -->
+    <!-- Home页面（因为客户要求需要动画，所以不能用v-if控制首页元素的显示与隐藏，而是改为组件内部动态v-show控制元素的样式） -->
     <!-- 左侧菜单列 -- 首页 -->
     <div id="leftMenus">
       <MenuCard v-for="item in menus.left" :menuData="item" :key="item.title" />