<template>
  <div id="main">
    <div style="width:100%;height:100%">
      <tong-map-control :option="option" @maploadend="maploadend" :controls="controls"></tong-map-control>
    </div>
  </div>
</template>

<script>

import Vue from 'vue'
import {tongMapComponent} from 'tongmap-component'
Vue.use(tongMapComponent)
export default {
  data() {

    return {
      option: {
        url: 'http://10.10.64.30:8009/geoserver/gwc/service/wmts/?layer=world:world_info&format=image/png',
        crs: 'EPSG:4326',
        // center: [114, 23],
        // zoom: 8,
        center: [115.216652, 34.579401],
        zoom: 6,
        maxZoom: 18,
        minZoom: 0
      },
      controls: [{name: "navigate", position: "top-left"}, {
        name: "measure",
        x: '500px', y: '20px'
      }, {name: "scaleline", position: "bottom-right"}, {
        name: "scalebar",
        position: 'bottom-left'
      }]
    }
  },
  methods: {
    maploadend() {

    },
    getParams(url) {
      //获取？后面第一个字符串的索引
      var index = url.indexOf('?') + 1;
      //取得url后面的字符串name=zs&age=18&b=2
      var params = url.substr(index);
      //使用&切割字符串，返回一个数组
      var arr = params.split('&');
      //定义一个空对象
      var o = {};
      //数组中每一项的样子 key=value
      for (var i = 0; i < arr.length; i++) {
        //临时数组
        var tmpArr = arr[i].split('=');
        var key = tmpArr[0];
        var value = tmpArr[1];
        o[key] = value;
      }
      return o;
    },

    InitMap() {


      var testSource = new TileWMS({
        url: 'http://10.10.64.30:8009/geoserver/wms',
        params: {
          'LAYERS': 'world:ne_10m_roads',
          'TILED': true,
        },
      })
      testSource.setTileLoadFunction((tile, src) => {
        var client = new XMLHttpRequest();
        client.open('GET', src);
        client.responseType = "arraybuffer";
        client.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        client.setRequestHeader('Authorization', 'Bearer OAMSUAM_A_FC35F8D5109E877953A1743598A30E6D');
        client.onload = function () {
          var arrayBufferView = new Uint8Array(this.response);
          var blob = new Blob([arrayBufferView], {type: 'image/png'});
          var urlCreator = window.URL || window.webkitURL;
          var imageUrl = urlCreator.createObjectURL(blob);
          tile.getImage().src = imageUrl;
        };
        client.send();
      })

      var layers = [
        new TileLayer({
          source: new TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {
              'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
              'TILED': true,
            },
          }),
        }),
        new TileLayer({
          source: testSource
        })];
      var map = new Map({
        layers: layers,
        target: 'map',

        view: new View({
          zoom: 4,
          projection: 'EPSG:4326',
          center: [0, 0],

        }),
      });

    }
  },
  mounted() {

    /*this.InitMap()
    fetch("http://10.10.1.36:18900/aaa/oauth/ctoken", {
      method: "POST",
      mode: 'cors',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer OAMSUAM_A_FC35F8D5109E877953A1743598A30E6D'
      },
      body: JSON.stringify({
        grant_type: 'client_credentials'
      })
    }).then(response => response.json()).then(json => {
      let result = json
      this.InitMap('http://10.10.1.35/ogctest2?service=WMS&version=1.1.0&request=GetMap&LAYERS=TongGSM:governmenta0b6275f1b724d0da6987a8674306c951600340406422')
    })*/
  }
}
</script>

<style>
body {
  margin: 0;
}

#main {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

</style>
