<template>
  <div class="draw-map-container" id="drawMapContainer">
    
  </div>
</template>

<script>
import * as MP from './lib/Mp.js';

  export default {
    name: 'draw_test',
    data(){
        return {
            map:null,
            mp:null,
        }
    },
    mounted(){
        this.initMap();
    },
    methods:{
        initMap(){
            this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
            this.map = new this.$mapboxgl.Map({
                container:"drawMapContainer",
                center:[118.0075,35.42222222],
                zoom:12,
                maxZoom:20,
                minZoom:5,
                pitch:0,
                // style:"mapbox://styles/mapbox/satellite-v9"
                style:"mapbox://styles/mapbox/streets-v11"
                // style:"mapbox://styles/mapbox/dark-v10"
                
            });
            let _this = this;
            this.map.on("load",function(){
                _this.drawPont();
            })
        },
        drawPont(){
            this.mp = new MP(this.map)
            this.mp.draw('POINT')
            this.mp.on("Point", function (e) {
                console.log('draw-point', e)
            })
        }
    }
  }
</script>

<style scoped>
  .draw-map-container{
      width:100vw;
      height:100vh;
  }
</style>