vue3+vite+mapbox构建项目地图初始化框架

一、创建vue3项目这一步直接略过，有不明白的可以翻我mapbox专栏里面的另一篇关于mapbox实现楼层分层单体化，里面说的十分详细。

二、安装mapboxgl库

pnpm install --save mapbox-gl

三、地图初始化

实际项目中这个肯定是作为单独一个路由页面组件的，但是这里为了便于展示成果，我就直接在app.vue中完成初始化。

具体代码如下

<template>
  <div
    ref="Map"
    id="Map"
  ></div>
</template>

<script setup>
// mapboxgl地图
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
// mapboxgl汉化
// import MapboxLanguage from '@mapbox/mapbox-gl-language'

let map // 地图
import { onMounted, onBeforeUnmount, ref } from 'vue'
// 初始化生命周期
onMounted(() => {
  init()
})
onBeforeUnmount(() => {
  map = null
})

const Map = ref(null),
  start = {
    center: [80, 80],
    zoom: 2,
    pitch: 0,
    bearing: 0
  },
  end = {
    center: [114.124064, 30.463405],
    zoom: 16,
    bearing: 20, //目标方位角
    pitch: 70
  }
function init() {
  mapboxgl.accessToken = '你的token'
  map = new mapboxgl.Map({
    container: Map.value,
    style: {
      version: 8,
      sources: {
        'raster-tiles': {
          type: 'raster',
          tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
          tileSize: 256
        }
      },
      layers: [
        {
          id: 'simple-tiles',
          type: 'raster',
          source: 'raster-tiles',
          minzoom: 14,
          maxzoom: 20
        }
      ]
    },
    ...start,
    projection: 'globe', // 为 3D 地球
    antialias: false //抗锯齿，通过false关闭提升性能
  })
  // map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }))
  // ### 添加导航控制条
  map.addControl(new mapboxgl.NavigationControl(), 'top-left')
  map.on('style.load', function () {
    map.setFog({})
    map.flyTo({
      ...end,
      duration: 5000,
      essential: true
    })
  })
}
</script>

<style>
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  display: none;
}
.mapboxgl-ctrl-icon {
  box-sizing: border-box;
}
#Map {
  width: 100%;
  height: 100vh;
}
</style>

最终效果