3.vue3+openlayers加载Mapbox地图

1. 注册 Mapbox 账户

• 访问 Mapbox官网，并点击右上角的 Sign Up 按钮，创建一个新的账户。如果你已有 Mapbox 账户，可以直接登录。

2. 创建一个 Mapbox 项目

• 登录后，进入 Mapbox 的 Account Dashboard 页面。
• 在页面上，你会看到一个 Create a new token 或者 Access tokens 的按钮。点击它进入令牌（token）管理页面。

3. 生成 API Key (Access Token)

• 在 Access tokens 页面中，点击 Create a new token。
• 为你的 token 设置一个名字（例如：“Vue App Token”），并根据需要选择相应的权限。通常，选择 Default public token 即可。
• 创建后，Mapbox 会生成一个新的 API Key（也叫 Access Token）。你可以将这个 token 用在你的项目中。

4. 使用 API Key

• 在你的 Vue 代码中，你可以将生成的 API Key 用于加载 Mapbox 地图。上面代码中的 key 变量就是你从 Mapbox 获取的 API Key。

示例：

qqq
<template>
  <button class="back-button" @click="goBack">返回</button>
  <div class="container">
    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载OpenStreetMap地图</div></div>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import 'ol/ol.css';
import { ref, onMounted } from 'vue';
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { OSM } from 'ol/source';
import router from "@/router";
const goBack = () => {
  router.push('/OpenLayers');
};
// 创建 ref 来持有 map 对象
const map = ref(null);

// 初始化地图的函数
const initMap = () => {
  const osmLayer = new TileLayer({
    source: new OSM(),
    zIndex: 1,
  });

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [osmLayer],
    view: new View({
      projection: 'EPSG:4326',
      center: [104.389, 30.903],
      zoom: 9,
    }),
  });
};

// 在组件挂载后调用初始化地图函数
onMounted(() => {
  initMap();
});
</script>

<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 150px auto;
  border: 1px solid #42B983;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#vue-openlayers {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>

javascript

复制代码

const key = "你的Mapbox API Key";

5. 管理你的 API Key

• Mapbox 允许你管理和更新你的 Access Tokens。如果你需要撤销某个 API Key 或创建新的 Key，可以在 Access tokens 页面中进行管理。

注意： Mapbox 的免费套餐有一定的使用限制。如果你的应用需要更高的请求量或高级功能，可能需要升级为付费套餐。你可以在 Mapbox 的价格页面找到详细的定价信息。

这样，你就能够获得并使用 Mapbox 的 API Key 来加载地图了。