<template>
  <div>
    <div id="map"></div>
    <div
      style="
        display: none;
        width: 400px;
        height: 160px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        margin-top: 250px;
        position: absolute;
        pointer-events: none;
      "
      class="sub-main"
    ></div>
    <div id="control">
      <div class="map-control">
        <div class="map-type-button" v-if="isImg" @click="changeMap">
          <img class="map-img" src="../../../static/img/vec.png" />
        </div>
        <div class="map-type-button" v-else @click="changeMap">
          <img class="map-img" src="../../../static/img/img.png" />
        </div>
      </div>
      <div class="map-dimensional">
        <div class="map-type-button" v-if="is3D" @click="change3D">
          <img class="map-img" src="../../../static/img/2d.png" />
        </div>
        <div class="map-type-button" v-else @click="change3D">
          <img class="map-img" src="../../../static/img/3d.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { store } from "@/components/vuex/store.js";
import OLCesium from "ol-cesium";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

export default {
  name: "Map",
  data() {
    return {
      is3D: false,
      isImg: false,
      baseLayers: {},
      mapData: [
        {
          name: "天地图影像地图",
          url: "http://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
          index: 0,
        },
        {
          name: "天地图影像注记",
          url: "http://t3.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
          index: 1,
        },
        {
          name: "天地图矢量地图",
          url: "http://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
          index: 2,
        },
        {
          name: "天地图矢量注记",
          url: "http://t3.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
          index: 3,
        },
      ],
      token:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZmY0YjNlOC0xNDhlLTQ2NDctYmVjYi1mYWRhMjE0NzNhMTAiLCJpZCI6MTIyMDUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjA1NTk5NzB9.3vV7ACQa7bCp-SoXaWGm36wNF3EgoqvYpAJ8xPIPPfs",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    initmap(coordinate) {
      let that = this;
      that.map = new Map({
        target: "map",
        view: new View({
          center: coordinate,
          projection: "EPSG:4326",
          zoom: 12,
        }),
      });
      for (let i = 0; i < that.mapData.length; i++) {
        let layer = that.mapData[i];
        let name = layer.name;
        let url = layer.url;
        let tileLayer = new TileLayer({
          title: name,
          source: new XYZ({
            crossOrigin: "anonymous",
            url: url,
          }),
        });
        tileLayer.setZIndex(layer.index);
        let key = i.toString();
        that.baseLayers[key] = tileLayer;
        if (i === 0 || i === 1) {
          tileLayer.setVisible(false);
        }
        that.map.addLayer(tileLayer);
      }
      that.ol3d = new OLCesium({ map: that.map }); // map is the ol.Map instance
      that.ol3d.setEnabled(that.is3D);
      window.ol3d = that.ol3d; // temporary hack for easy console debugging
      that.$emit("view", that.ol3d);
      that.$emit("mapView", that.ol3d.getOlMap());
    },
    init() {
      var geoLocation = new BMap.Geolocation();
      var coordinate = [];
      var that = this;
      if (
        this.$store.state.LocalLocation.currentPosition != "" &&
        this.$store.state.LocalLocation.currentLocation != ""
      ) {
        coordinate.push(this.$store.state.LocalLocation.currentPosition.lng);
        coordinate.push(this.$store.state.LocalLocation.currentPosition.lat);
        if (coordinate == []) {
          coordinate = [116.397499, 39.90871];
        }
        this.initmap(coordinate);
      } else {
        geoLocation.getCurrentPosition(function (res) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var currentPosition = res.point;
            var currentLocation = res.address;
            that.$store.dispatch("updateLocation", {
              location: currentLocation,
            });
            that.$store.dispatch("updatePosition", {
              position: currentPosition,
            });
            coordinate.push(
              that.$store.state.LocalLocation.currentPosition.lng
            );
            coordinate.push(
              that.$store.state.LocalLocation.currentPosition.lat
            );
            that.initmap(coordinate);
          } else {
            that.$message.info("位置权限未打开，请重新操作！");
            coordinate = [116.397499, 39.90871];
            that.initmap(coordinate);
          }
        });
      }
    },
    change3D: function (callback) {
      this.is3D = !this.is3D;
      this.ol3d.setEnabled(this.is3D);
    },
    changeMap: function (callback) {
      this.isImg = !this.isImg;
      if (this.isImg) {
        // 显示影像图层，设置矢量图层不可见
        this.baseLayers["0"].setVisible(true);
        this.baseLayers["1"].setVisible(true);
        this.baseLayers["2"].setVisible(false);
        this.baseLayers["3"].setVisible(false);
      } else {
        // 显示矢量图层，设置影像图层不可见
        this.baseLayers["0"].setVisible(false);
        this.baseLayers["1"].setVisible(false);
        this.baseLayers["2"].setVisible(true);
        this.baseLayers["3"].setVisible(true);
      }
    },
  },
  store,
};
</script>

<style lang="scss" scoped>
#control {
  z-index: 1;
  position: absolute;
  display: flex;
  flex-flow: row;
  align-items: center;
  bottom: 20px;
  right: 60px;
}
#map {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
body {
  overflow: hidden;
  height: 100%;
}
.map-img {
  width: 80px;
  height: 100px;
}
.map-type-button {
  width: 50px;
  display: inline-block;
  text-align: center;
}
.map-control .map-type-button {
  margin-right: 35px;
}
</style>
