vue3使用mapBoxgl

Vue 3 可以使用 Mapbox GL JS 库来显示地图，可以按照以下步骤实现：

1. 安装 Mapbox GL JS 库

使用 npm 或者 yarn 安装：

npm install mapbox-gl

或者

yarn add mapbox-gl

2. 在 Vue 3 中引入 Mapbox GL JS 库

在 Vue 3 中使用 Mapbox GL JS 库需要在组件中引入，可以在组件的 `setup` 方法中使用 `import` 引入：

import mapboxgl from 'mapbox-gl';

export default {
  setup() {
    // ...
  },
}

3. 创建地图容器

在 `setup` 方法中创建地图容器：

import { ref, onMounted } from 'vue';
import mapboxgl from 'mapbox-gl';

export default {
  setup() {
    const mapContainer = ref(null);

    onMounted(() => {
      const map = new mapboxgl.Map({
        container: mapContainer.value,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-74.5, 40],
        zoom: 9,
      });
    });

    return {
      mapContainer,
    }
  },
}

在上面的代码中，`mapContainer` 是一个 ref，用来引用地图容器的 DOM 元素，在 `onMounted` 钩子函数中创建地图，设置了容器、地图样式、中心点坐标和缩放级别。

4. 在模板中使用地图容器

在模板中使用 `div` 元素作为地图容器：

<template>
  <div ref="mapContainer"></div>
</template>

在上面的代码中，`ref` 绑定了 `mapContainer` 变量，这个变量是在 `setup` 方法中定义的。

5. 完整代码示例

<template>
  <div ref="mapContainer"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import mapboxgl from 'mapbox-gl';

export default {
  setup() {
    const mapContainer = ref(null);

    onMounted(() => {
      const map = new mapboxgl.Map({
        container: mapContainer.value,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-74.5, 40],
        zoom: 9,
      });
    });

    return {
      mapContainer,
    }
  },
}
</script>

<style>
  #mapContainer {
    width: 100%;
    height: 400px;
  }
</style>

在上面的代码中，`#mapContainer` 是地图容器的 CSS 样式，设置了宽度和高度。