<template>
  <div>
    <div
      class="map"
      id="map"
      ref="map"
    ></div>
    <div class="base-map">
      <div class="item" v-for="(item,key) in allLayers" :key="key" @click="change(key)" :class="{'activity': index===key}">{{item.title}}</div>
    </div>
  </div>
</template>

<script>
import * as L from "leaflet";
import * as Esri from "esri-leaflet";
import "proj4";
import "proj4leaflet";
import "leaflet.wmts";

L.esri = Esri;
export default {
  name: "",
  data() {
    return {
      imgLayers: [
        {title: '2012厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2012/MapServer',token: 'KhTlmtGizEANsimdOfkRQq3OIGH9iqNIX185zLci6ttGelMXSwd8xKTJq4CpAcSNWZCpbLRxu8P5DJuuZPCdJw..'},
        {title: '2013厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2013/MapServer',token: 'KhTlmtGizEANsimdOfkRQsuJQg281bfxM8NO1dUY5-xgzyE3yMXWoB13uuZbaePR9YjhIgRmdVaO16DWUJQ0fA..'},
        {title: '2014厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2014/MapServer',token: 'KhTlmtGizEANsimdOfkRQi0ridpq68lVjRQD65FXxDyDUo9RmMLpYT51B_3RYFw7o_wI7uQ6wWQ27DAZHGi2uA..'},
        {title: '2015厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2015/MapServer',token: 'KhTlmtGizEANsimdOfkRQoDxUbJfXA6VI4xvQlgRjCrxJSI4BjFKZUsDovfQoROTpPTkkfh6r33We9CVJgxYSw..'},
        {title: '2016厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2016/MapServer',token: 'KhTlmtGizEANsimdOfkRQmRinbEn_YyeDj-qDSV0YwYNkPBmQ--7fIVoVqkYqCPwGacBQsg-skfIbZhiXFBYAA..'},
        {title: '2017厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2017/MapServer',token: 'KhTlmtGizEANsimdOfkRQna9aPia93yQlcne1xjc8bCpNAtA5Yq7PAG2KPPEnksiOJ8JEGIAede1lUXHpE7H2Q..'},
        {title: '2018厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2018/MapServer',token: 'KhTlmtGizEANsimdOfkRQixA4mmyzgtWNc19FKxn1LzM36kSNKFWDx9se7GLnxPe670-FWKjp1iWQ2Jnto_unw..'},
        {title: '2019厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/DOM2019/MapServer',token: 'KhTlmtGizEANsimdOfkRQk92vRFIHvGsM8BTS11OU9VUMzLFDlqVsSJ0b0qKKOBpl3bVWy0VkXBq2A-vm-tMMg..'},
        {title: '2020厦门影像',url: 'http://222.76.242.138/arcgis/rest/services/CGCS_DOMMAP/MapServer',token: 'KhTlmtGizEANsimdOfkRQlOfF2AR4wy2NQzfAFl-DVj6t0LIpw7hyP1GBsvAeRavVeWBB1BnQ6rp8LWe7G0tGg..'},
      ],
      vetorLayers: [
        {title: '2018厦门晕渲',url: 'http://222.76.242.138/arcgis/rest/services/CGCS_DEMMAP/MapServer',token: 'KhTlmtGizEANsimdOfkRQqwSVed4dhDk3Bkvt5Ixy2wJb8uG-beMmvJueoO2zcsBH_5DngxB8qRf-HN50tsddw..'},
        {title: '2019厦门矢量',url: 'http://222.76.242.138/arcgis/rest/services/CGCS_XMMAP/MapServer',token: 'KhTlmtGizEANsimdOfkRQnfvgB7xTmc6WlWX5U5bBDEk4z6tAjyR17bLHiCgmMntZQPmDiGlD-kKuOep53nxQQ..'},
      ],
      allLayers: [],
      map: null,
      oldLayer: null,
      index: 0
    }
  },
  mounted() {
    let map = this.initMap()
    // 初始化所有图层
    this.initLayers()
    this.map = map
    console.log(map)
  },
  methods: {
    initMap() {
      let CRS_4490 = new L.Proj.CRS(
        "EPSG:4490",
        "+proj=longlat +ellps=GRS80 +no_defs",
        {
          resolutions: [
            0.703125,
            0.3515625,
            0.17578125,
            0.087890625,
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            6.866455078125e-4,
            3.4332275390625e-4,
            1.71661376953125e-4,
            8.58306884765625e-5,
            4.291534423828125e-5,
            2.1457672119140625e-5,
            1.0728836059570312e-5,
            5.364418029785156e-6,
            2.682209064925356e-6,
            1.3411045324626732e-6
          ],
          origin: [-180, 90]
        }
      );
      let map = L.map("map", {
        crs: CRS_4490,
        minZoom: 10,
        maxZoom: 18,
      }).setView([24.4846, 118.0404], 10)


      // 测试显示地图位置用
      // const token2 = '24d5b80acbdcdd40817dd64ed0636c55'
      // // const token = '4b350b4f343fa22cdb2047e93b4d8712'
      // var normalMapm = L.tileLayer('http://t3.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='+token2, {
      //       maxZoom: 18,
      //       minZoom: 10,
      //       zoomOffset: 1
      //   })

      // normalMapm.addTo(map)


      return map
    },
    // 创建图层
    createLayers(item) {
      let tileMapLayer = L.esri.dynamicMapLayer({
        url: item.url,
        maxZoom: 18,
        minZoom: 10,
        zoomOffset: 1,
        useCors: true,
        token: item.token
      });
      return tileMapLayer
    },
    // 初始化图层
    initLayers() {
      let imageLayers = []
      let vetorLayers = []
      // let all = []
      // 影像
      this.imgLayers.forEach((item)=>{
        let layer = this.createLayers(item)
        layer.title = item.title
        imageLayers.push(layer)
      })
      // 矢量
      this.vetorLayers.forEach((item)=>{
        let layer = this.createLayers(item)
        layer.title = item.title
        vetorLayers.push(layer)
      })
      this.allLayers =  imageLayers.concat(vetorLayers)
      // console.error('all',all)
      // this.allLayers.push.apply(imageLayers)
      // this.allLayers.push.apply(vetorLayers)
      // all[0].addTo(this.map)
      console.log(this.allLayers,'allLayers')

    },
    change(index) {
      if(!this.map) return
      if(this.oldLayer) {
        this.map.removeLayer(this.oldLayer)
      }
      this.index = index
      const currentLayer = this.allLayers[index]
      this.oldLayer = currentLayer
      this.map.addLayer(currentLayer)
      console.log(index, this.oldLayer)
    },
    //
  
  }
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 100vh;
}
.base-map{
    position: absolute;
    right: 50px;
    width: 600px;
    height: 80px;
    background: red;
    z-index: 999;
    bottom: 5px;
    display: flex;
    overflow: scroll;
}
.base-map .item{

    padding: 5px;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
}
.activity{
  background: grey
}
</style>