分屏

package.json

@@ -44,6 +44,7 @@
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
+    "gcoord": "^1.0.6",
     "highlight.js": "9.18.5",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",

src/views/remote/MapView.vue

@@ -1,13 +1,16 @@
 <template>
-  <div id="mapDiv"></div>
-  <!-- <div>
-    <div id="mapCon1"></div>
-    <div id="mapCon2"></div>
-  </div> -->
+  <div class="map">
+    <div id="mapDiv" v-if="type == 'normal'"></div>
+    <template v-else>
+      <div id="mapCon1"></div>
+      <div id="mapCon2"></div>
+    </template>
+  </div>
 </template>
 
 <script>
 import "ol/ol.css";
+import gcoord from "gcoord";
 import { get as getProjection, transform } from "ol/proj.js";
 import parse from "wellknown";
 import Map from "ol/Map";
@@ -34,14 +37,33 @@ import GeoJSON from "ol/format/GeoJSON";
 export default {
   data() {
     return {
-      map: null,
-      map2: null,
+      type: "normal",
+      maps: {},
       curPageResultLayer: null,
       vectorLayer: null,
     };
   },
   methods: {
-    createMap() {
+    createMap(type) {
+      this.type = type;
+      var view = new View({
+        // center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
+        center: gcoord.transform([103.23, 35.33], 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);
+      }
+    },
+    addMap(target, view) {
+      if (this.maps[target]) return;
       var gaodeMapLayer = new TileLayer({
         title: "高德地图",
         source: new XYZ({
@@ -49,55 +71,21 @@ export default {
           wrapX: false,
         }),
       });
-      //   var view = new View({
-      //     center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
-      //     projection: "EPSG:3857",
-      //     zoom: 4,
-      //     minZoom: 1,
-      //   });
-      var view = new View({
-        center: [103.23, 35.33], //地图初始中心点
-        projection: "EPSG:4326",
-        zoom: 4,
-        minZoom: 1,
-      });
-      this.map = new Map({
-        target: "mapDiv",
-        // target: "mapCon1",
+      let map = new Map({
+        //地图容器div的ID
+        target,
+        //地图容器中加载的图层
         layers: [gaodeMapLayer],
-        //         layers: [
-        //      new TileLayer({
-        //        source: new TileWMS({
-        //          url: 'http://demo.boundlessgeo.com/geoserver/wms',
-        //          params: {'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'},
-        //          serverType: 'geoserver',
-        //        })
-        //      })
-        //    ],
-        view: view,
+        //地图视图设置
+        view, //同一个view
       });
-      window.map = this.map;
-      window.view = this.map.view;
-      console.log(this.map, "mapmap");
-      //   var gaodeMapLayer2 = new TileLayer({
-      //     title: "高德地图",
-      //     source: new XYZ({
-      //       url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
-      //       wrapX: false,
-      //     }),
-      //   });
-      //     this.map2 = new Map({
-      //       //地图容器div的ID
-      //       target: "mapCon2",
-      //       //地图容器中加载的图层
-      //       layers: [gaodeMapLayer2],
-      //       //地图视图设置
-      //       view: view, //同一个view
-      //     });
+      this.maps[target] = map;
+      window.map = this.maps;
+      console.log(window.map,'window.map')
     },
   },
   mounted() {
-    this.createMap();
+    this.createMap("normal");
   },
 };
 </script>