分屏

src/views/remote/MapView.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="map">
-    <div id="mapDiv" v-if="type == 'normal'"></div>
-    <template v-show="type == 'split'">
-      <div id="mapCon1"></div>
-      <div id="mapCon2"></div>
+    <div id="mapDiv" v-show="maptype == 'normal'"></div>
+    <template>
+      <div id="mapCon1" v-show="maptype == 'split'"></div>
+      <div id="mapCon2" v-show="maptype == 'split'"></div>
     </template>
   </div>
 </template>
@@ -36,7 +36,7 @@ import Draw from "ol/interaction/Draw";
 import GeoJSON from "ol/format/GeoJSON";
 export default {
   props: {
-    type: {
+    maptype: {
       type: String,
       default: "normal",
     },
@@ -64,7 +64,8 @@ export default {
       });
       // window.map = this.map;
       // window.view = this.map.view;
-      // if (this.type == "normal") {
+      console.log(this.$props.maptype, "----");
+      // if (this.$props.maptype == "normal") {
       this.addMap("mapDiv", view);
       // } else {
       this.addMap("mapCon1", view);
@@ -96,6 +97,15 @@ export default {
   mounted() {
     this.createMap();
   },
+  watch: {
+    maptype() {
+      this.$nextTick(() => {
+        window.map.mapDiv.updateSize(); // 更新地图尺寸
+        window.map.mapCon1.updateSize(); // 更新地图尺寸
+        window.map.mapCon2.updateSize(); // 更新地图尺寸
+      });
+    },
+  },
 };
 </script>
 

src/views/remote/farmland/index.vue

@@ -3,7 +3,7 @@
     <div class="btn">
       <el-button @click="drawer = true">打开抽屉</el-button>
     </div>
-    <MapView :type="maptype" ref="MapView" />
+    <MapView :maptype="maptype" ref="MapView" />
 
     <el-drawer
       :visible.sync="drawer"
@@ -112,7 +112,7 @@ export default {
   },
   data() {
     return {
-      maptype: "normal",
+      maptype: 'normal',
       total: 0,
       queryParams: {
         jcbh: "", //监测编号