<template>
  <div class="map">
    <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>

<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";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import TileWMS from "ol/source/TileWMS";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import Feature from "ol/Feature";
import LineString from "ol/geom/LineString";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import { Vector as LayerVec } from "ol/layer";
import { Style, Icon } from "ol/style";
import { Point } from "ol/geom";
import { Vector as SourceVec, XYZ } from "ol/source";
import Tile from "ol/layer/Tile";
import { OSM } from "ol/source";
import * as control from "ol/control";
import * as coordinate from "ol/coordinate";
import ImageLayer from "ol/layer/Image";
import ImageStatic from "ol/source/ImageStatic";
import Draw from "ol/interaction/Draw";
import GeoJSON from "ol/format/GeoJSON";
import { WMTS } from "ol/source";
export default {
  props: {
    maptype: {
      type: String,
      default: "normal",
    },
  },
  data() {
    return {
      // type: "normal",
      maps: {},
      curPageResultLayer: null,
      vectorLayer: null,
    };
  },
  methods: {
    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
        // ), //地图初始中心点
        projection: "EPSG:4326",
        zoom: 4,
        minZoom: 1,
      });
      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({
      //   //   url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
      //   //   wrapX: false,
      //   // }),
      //   source: new XYZ({
      //     url: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.arcgisKey}`,
      //     // url: `https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/4905/{z}/{y}/{x}`,
      //     crossOrigin: "anonymous",
      //     // attributions: ["ArcGIS", new Date().getFullYear()],
      //   }),
      // });

        var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
        // 矢量底图
        var vecLayer = new Tile({
            source: new XYZ({
                url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
            })
        });
        // 矢量标注
        var cvaLayer = new Tile({
            source: new XYZ({
                url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
            })
        });

      let map = new Map({
        //地图容器div的ID
        target,
        //地图容器中加载的图层
        // layers: [gaodeMapLayer],
        layers: [vecLayer, cvaLayer],
        //地图视图设置
        view, //同一个view
      });
      this.maps[target] = map;
      window.map = this.maps;
      console.log(window.map, "window.map");
    },
  },
  mounted() {
    this.createMap();
  },
  watch: {
    maptype() {
      this.$nextTick(() => {
        window.map.mapDiv.updateSize(); // 更新地图尺寸
        window.map.mapCon1.updateSize(); // 更新地图尺寸
        window.map.mapCon2.updateSize(); // 更新地图尺寸
      });
    },
  },
};
</script>

<style scoped>
.map {
  width: calc(100% - 520px);
  height: 91vh;
  position: relative;
}
#mapDiv {
  width: 100%;
  height: 100%;
}

#mapCon2 {
  position: absolute;
  top: 0px;
  left: 50%;
}
#mapCon1 {
  position: absolute;
  top: 0px;
  left: 0%;
}
#mapCon1,
#mapCon2 {
  width: 50%;
  height: 100%;
}
</style>