同屏对比样式优化，以及地图组件渲染优化。

src/components/common/BottomForm/SameScreenComparison.vue

@@ -28,6 +28,7 @@
         >
           <span>{{ mapList[mapIndex].mapName }}</span>
           <Map
+            ref="mapBox"
             :mapUrl="mapList[mapIndex].mapUrl"
             :index="index"
             :mouseIndex="mouseIndex"
@@ -245,6 +246,7 @@ export default {
       this.$emit("changeShowBottomMenusStatus", false);
       // 打开弹窗前首先同步一下地图定位
       this.centerZoomInit = { center: map2DViewer.map.getCenter(), zoom: map2DViewer.map.getZoom() };
+      this.handleCheckedCitiesChange();
     },
     // 弹窗关闭询问
     handleClose() {
@@ -322,13 +324,31 @@ export default {
       new_iframe.contentWindow.print();
       // document.body.removeChild(iframe);
     },
-    // 修改
+    // 修改选中地图
     handleCheckedCitiesChange(e) {
-      // console.log("已选中的底图：", this.checkedCities, this.checkedCities.length);
+      setTimeout(() => {
+        this.checkedCities.forEach((item, index) => {
+          this.$nextTick(() => {
+            if (this.$refs["mapBox"][index]) {
+              this.$refs["mapBox"][index].changeMapSize();
+            }
+          });
+        });
+      }, 300);
     },
     // 根据地图列表，返回合适的样式
     mapListBoxStyle() {
-      return "width:calc(33% - 2px);height:calc(50% - 2px);";
+      if (this.checkedCities.length >= 5) {
+        return "width:calc(33% - 2px);height:calc(50% - 2px);";
+      } else if (this.checkedCities.length === 4) {
+        return "width:calc(50% - 2px);height:calc(50% - 2px);";
+      } else if (this.checkedCities.length === 3) {
+        return "width:calc(33% - 2px);height:calc(100%);";
+      } else if (this.checkedCities.length === 2) {
+        return "width:calc(50% - 2px);height:calc(100%);";
+      } else {
+        return "width:calc(100%);height:calc(100%);";
+      }
     },
     // 当其中一个地图移动或缩放时
     changeCenterZoom(data) {

src/components/map/Map.vue

@@ -59,6 +59,14 @@ export default {
     setView: function (coord, zoom) {
       let center = L.latLng(coord[0], coord[1]);
       this.map.setView(center, zoom);
+    },
+    // 更改地图渲染个数
+    changeMapSize() {
+      this.$nextTick(() => {
+        if (this.map) {
+          this.map.invalidateSize(true);
+        }
+      });
     }
   },
   watch: {