分屏

src/views/remote/MapView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="map">
-    <div id="mapDiv" v-show="type == 'normal'"></div>
+    <div id="mapDiv" v-if="type == 'normal'"></div>
     <template v-show="type == 'split'">
       <div id="mapCon1"></div>
       <div id="mapCon2"></div>
@@ -35,32 +35,41 @@ import ImageStatic from "ol/source/ImageStatic";
 import Draw from "ol/interaction/Draw";
 import GeoJSON from "ol/format/GeoJSON";
 export default {
+  props: {
+    type: {
+      type: String,
+      default: "normal",
+    },
+  },
   data() {
     return {
-      type: "normal",
+      // type: "normal",
       maps: {},
       curPageResultLayer: null,
       vectorLayer: null,
     };
   },
   methods: {
-    createMap(type) {
-      this.type = type;
+    createMap() {
       var view = new View({
         // center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
-        center: gcoord.transform([106.67591743605254 ,38.21012898330025], gcoord.WGS84, gcoord.BD09), //地图初始中心点
+        center: gcoord.transform(
+          [106.67591743605254, 38.21012898330025],
+          gcoord.WGS84,
+          gcoord.BD09
+        ), //地图初始中心点
         projection: "EPSG:4326",
         zoom: 4,
         minZoom: 1,
       });
       // window.map = this.map;
       // window.view = this.map.view;
-      if (this.type == "normal") {
-        this.addMap("mapDiv", view);
-      } else {
-        this.addMap("mapCon1", view);
-        this.addMap("mapCon2", view);
-      }
+      // if (this.type == "normal") {
+      this.addMap("mapDiv", view);
+      // } else {
+      this.addMap("mapCon1", view);
+      this.addMap("mapCon2", view);
+      // }
     },
     addMap(target, view) {
       if (this.maps[target]) return;
@@ -81,11 +90,11 @@ export default {
       });
       this.maps[target] = map;
       window.map = this.maps;
-      console.log(window.map,'window.map')
+      console.log(window.map, "window.map");
     },
   },
   mounted() {
-    this.createMap("normal");
+    this.createMap();
   },
 };
 </script>

src/views/remote/farmland/index.vue

@@ -3,7 +3,7 @@
     <div class="btn">
       <el-button @click="drawer = true">打开抽屉</el-button>
     </div>
-    <MapView ref="MapView" />
+    <MapView :type="maptype" ref="MapView" />
 
     <el-drawer
       :visible.sync="drawer"
@@ -112,6 +112,7 @@ export default {
   },
   data() {
     return {
+      maptype: "normal",
       total: 0,
       queryParams: {
         jcbh: "", //监测编号
@@ -149,7 +150,7 @@ export default {
       let url = this.newObj.proxypath + row.hsxtif;
       let urlQsx = this.newObj.proxypath + row.qsxtif;
       let urlHsx = this.newObj.proxypath + row.hsxtif;
-      this.$refs.MapView.createMap("split");
+      this.maptype = "split";
       this.nowId = row.hsxtif;
       this.addLayer("mapCon1", urlQsx);
       this.addLayer("mapCon2", urlHsx);