<template>
  <div class="map_main">
    <div :id="mapId" style="height: 100%;width:100%;"></div>
  </div>
</template>

<script>
let map;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
  name: "wMap",
  props: ["mapId"],
  components: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    initMap(option) {
      // mapboxgl.accessToken = 'pk.eyJ1IjoibmluZ2x4IiwiYSI6ImNsYnlnM2s2ODBnNmIzcHBpbzY5aDh3bHAifQ.hQL4zLjBss5i4x-zuFp9tg'
      let options = Object.assign(
        {},
        {
          container: this.mapId,
          style: map_config.MAP_STYLE,
          // style: 'mapbox://styles/mapbox/dark-v11',
          center: map_config.MAP_CENTER,
          zoom: map_config.MAP_ZOOM,
          maxZoom: map_config.MAX_ZOOM,
          bearing: map_config.MAP_BEARING,
          pitch: map_config.MAP_PITCH,
        },
        option
      );
      map = new mapboxgl.Map(options);
      return map;
    },
    destroyMap() {
      map?.remove;
      map = null;
    },
  },
  computed: {},
  beforeDestroy() {},
};
</script>

<style scoped>
.map_main {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #040d1c
}
</style>
<style>
.mapboxgl-ctrl-attrib {
  display: none;
}
</style>
