<template>
  <div class="map-container" style="width:100%;height:100%">
    <div id="map" style="width: 100%;height: 100%"></div>
  </div>
</template>

<script>
export default {
  name: "MapBox",
  mounted() {
    this.$nextTick(() => {
      this.loadMap()
    })
  },
  methods: {
    loadMap() {
      let _this = this
      this.$mapboxgl.accessToken = this.CONFIG.MAPBOX_OPTIONS.ACCESS_TOKEN
      let map = new this.$mapboxgl.Map({
        container: 'map',
        style: {
          glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
          "version": 8,
          "sources": {
            "raster-tiles": {
              "type": "raster",
              "tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + this.CONFIG.TDT.ACCESS_TOKEN],
              "tileSize": 256,
            }
          },
          "layers": [{
            "id": "tdt-img-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
          }]
        },
        zoom: 12,
        maxZoom: 17,
        minZoom: 11,
        center: [118.11036, 35.17734],
      });
      map.addControl(new this.$mapboxgl.NavigationControl(),"bottom-right");
      map.on('load', function () {
        _this.$emit('onMapLoad', map)
      });
    },
  }
}
</script>

<style scoped>

</style>