<template>
 <div>
   <div class="map" ref="map"></div>

 </div>
</template>

<script>
import "leaflet/dist/leaflet.css"
import L from 'leaflet/dist/leaflet'
import * as Esri from 'esri-leaflet'
// require('./wmts.js')
L.esri = Esri



L.TileLayer.WMTS = L.TileLayer.extend({
        defaultWmtsParams: {
          service: 'WMTS',
          request: 'GetTile',
          version: '1.0.0',
          layer: '',
          style: '',
          tilematrixset: '',
          format: 'image/jpeg'
        },
 
        initialize: function (url, options) { // (String, Object)
          this._url = url;
          var lOptions= {};
          var cOptions = Object.keys(options);
          cOptions.forEach(element=>{
            lOptions[element.toLowerCase()]=options[element];
          });
          var wmtsParams = L.extend({}, this.defaultWmtsParams);
          var tileSize = lOptions.tileSize || this.options.tileSize;
          if (lOptions.detectRetina && L.Browser.retina) {
            wmtsParams.width = wmtsParams.height = tileSize * 2;
          } else {
            wmtsParams.width = wmtsParams.height = tileSize;
          }
          for (var i in lOptions) {
            // all keys that are in defaultWmtsParams options go to WMTS params
            if (Object.prototype.hasOwnProperty.call(wmtsParams,i) && i!="matrixIds") {
              wmtsParams[i] = lOptions[i];
            }
          }
          this.wmtsParams = wmtsParams;
          this.matrixIds = options.matrixIds||this.getDefaultMatrix();
          L.setOptions(this, options);
        },
 
        onAdd: function (map) {
          this._crs = this.options.crs || map.options.crs;
          L.TileLayer.prototype.onAdd.call(this, map);
        },
 
        getTileUrl: function (coords) { // (Point, Number) -> String
          var tileSize = this.options.tileSize;
          var nwPoint = coords.multiplyBy(tileSize);
          nwPoint.x+=1;
          nwPoint.y-=1;
          var sePoint = nwPoint.add(new L.Point(tileSize, tileSize));
          var zoom = this._tileZoom;
          var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
          var se = this._crs.project(this._map.unproject(sePoint, zoom));
          var tilewidth = se.x-nw.x;
          var ident = this.matrixIds[zoom].identifier;
          var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;
          var X0 = this.matrixIds[zoom].topLeftCorner.lng;
          var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
          var tilecol=Math.floor((nw.x-X0)/tilewidth);
          var tilerow=-Math.floor((nw.y-Y0)/tilewidth);
          var url = L.Util.template(this._url, {s: this._getSubdomain(coords)});
          return url + L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;
        },
 
        setParams: function (params, noRedraw) {
          L.extend(this.wmtsParams, params);
          if (!noRedraw) {
            this.redraw();
          }
          return this;
        },
 
        getDefaultMatrix : function () {
          /**
           * the matrix3857 represents the projection
           * for in the IGN WMTS for the google coordinates.
           */
          var matrixIds3857 = new Array(22);
          for (var i= 0; i<22; i++) {
            matrixIds3857[i]= {
              identifier    : "" + i,
              // topLeftCorner : new L.LatLng(-180,180)
              topLeftCorner : new L.LatLng(20037508.3428,-20037508.3428)
            };
          }
          return matrixIds3857;
        }
      });
 
      L.tileLayer.wmts = function (url, options) {
        return new L.TileLayer.WMTS(url, options);
      };
 




// icon 显示问题
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;

export default {
  name: 'Map',
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化Map
    initMap() {
    
  //     const token = '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='+token, {
  //           maxZoom: 13,
  //           minZoom: 5,
  //           zoomOffset: 1
  //       })
  //       var normalMapa = L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='+token,  {
  //           maxZoom: 13,
  //           minZoom: 5,
  //           zoomOffset: 1
  //       })

  //       var imgMapm = L.tileLayer('http://t0.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='+token,  {
  //           maxZoom: 13,
  //           minZoom: 5,
  //           zoomOffset: 1
  //       })
  //       var imgMapa = L.tileLayer('http://t0.tianditu.gov.cn/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='+token,  {
  //           maxZoom: 13,
  //           minZoom: 5,
  //           zoomOffset: 1
  //       })
  //  var normalMap = L.layerGroup([normalMapm, normalMapa]),
  //           imgMap = L.layerGroup([imgMapm, imgMapa]);
  //       var baseLayers = { "行政": normalMap ,"卫星":imgMap};

  //       var overlayLayers = {
  //       }

        var map = L.map(this.$refs.map, {
            // crs: L.CRS.EPSG4326,s
            center: [27.335483, 103.785457],
            // center: [24,118],
            zoom: 12,
           
            zoomControl: false
        });
  //       L.control.layers(baseLayers, overlayLayers).addTo(map);
  //       L.control.zoom({
  //           zoomInTitle: '放大',
  //           zoomOutTitle: '缩小'
  //       }).addTo(map);

        const token = 'KhTlmtGizEANsimdOfkRQnglK8MEWkXfeJt0fvTFp4OW0xTpYvbgZu43Ch4Az_MsdzqfrqW7qEYCS0noH5tEzg..';
        // http://222.76.242.138
        var imgMap = L.tileLayer('http://222.76.242.138/arcgis/rest/services/CGCS_DOMMAP/MapServer/WMTS/arcgis/rest/services/DOM2018/MapServer/WMTS?token='+token,  {
            maxZoom: 13,
            minZoom: 5,
            zoomOffset: 1
        })

        // imgMap = L.esri.featureLayer({url: 'http://222.76.242.138/arcgis/rest/services/DOM2015/MapServer'})

        map.addLayer(imgMap)


  // var map = L.map(this.$refs.map,{crs: L.CRS.EPSG4326}).setView([24.48, 118.108], 13);
      // // // L.esri.basemapLayer("Streets").addTo(map)
      // let url = 'http://222.76.242.138/arcgis/rest/services/CGCS_DOMMAP/MapServer/WMTS/arcgis/rest/services/DOM2012/MapServer/WMTS'
      // var ign = new L.TileLayer.WMTS( url ,
      //                          {
      //                              layer: 'DOM2012',
      //                              tilematrixset: "EPSG:4490:18",
      //                              TileMatrix: 'EPSG:4490:8'
      //                          }
      //                         );
      // ign.addTo(map)


    // L.tileLayer('http://t1.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=24d5b80acbdcdd40817dd64ed0636c55', {
    //   maxZoom: 20,
    //   tileSize: 256,
    //   zoomOffset: 1
    // }).addTo(map );

    // let url = 'http://222.76.242.138/arcgis/rest/services/CGCS_DOMMAP/MapServer/WMTS/arcgis/rest/services/DOM2012/MapServer/WMTS'
    // var nexrad = L.tileLayer.wms(url, {
    //     // layers: [0,1,2,3,4,5,6,7,8,9], // 0,1,2,3,4,5,6,7
    //     // format: 'image/png',
    //     // transparent: true,
    //     // attribution: "Weather data © 2012 IEM Nexrad"
    // })
    // map.addLayer(nexrad)


      // let options = {
      //   url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk='
      // }
      // // console.log(style,pointToLayer,onEachFeature,filter,where)
      // let layer = Esri.dynamicMapLayer(options)
      // layer.addTo(map)
      // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      //     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      // }).addTo(map);
      // // icon
      // L.marker([51.5, -0.09]).addTo(map)
      //     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      //     .openPopup();

      // http://222.76.242.138/arcgis/rest/services/CGCS_DOMMAP/MapServer/WMTS/arcgis/rest/services/DOM2012/MapServer/WMTS
    }
  }
}
</script>

<style scoped>
.map {
  height: 100vh;
  width: 100%;
}
</style>