<template>
  <div :id="mapId" :style="`width: ${width}; height: ${height}`"></div>
</template>

<script setup lang="ts">
import { defineProps, ref,  onMounted, onUnmounted } from "vue"
import { v4 as uuidv4 } from 'uuid';
import mapboxgl, { Map, } from 'mapbox-gl';
import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts'

const props = defineProps(["width", "height"])
const { width, height } = props
const mapId = `map-${uuidv4()}`
let map: Map;
onMounted(() => {
  mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
  map = initMap();
})
const initMap = () => {
  return new mapboxgl.Map({
    container: mapId,
    language: 'zh-cmn',
    projection: 'equirectangular', // wgs84参考系
    style: MapboxDefaultStyle,
    maxZoom: 22,
    minZoom: 6,
    zoom:10,
    // ...props.mapOptions,
    center:[117.984425,35.270654],
  });
};
// onUnmounted(() => {
//   map && map.remove();
// })
</script>

<style lang="scss" scoped></style>
