这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

申请key

去mapbox的官网注册账号，然后通过下图创建属于自己的key,然后通过key来加载地图 。

使用npm引入mapbox-gl的依赖

npm install --save mapbox-gl

组件中的配置

先在布局中创建一个div，充当地图存放的容器，通过id来进行初始化绑定。

<div id="mapbox" class="map"></div>

同时在css中给这个div样式

  .map{
    width: 100%;
    height: 100%;
    position: absolute;
  }

在js中引入mapboxgl的对象

 import mapboxgl from 'mapbox-gl'

初始化地图

定义地图的初始化函数

 methods: {
    init(){
        mapboxgl.accessToken = this.key; //这里请换成自己的token
        var map = new mapboxgl.Map({
          container: 'mapbox', // container id 绑定的组件的id
          style: 'mapbox://styles/mapbox/streets-v11', //地图样式，可以使用官网预定义的样式,也可以自定义
          center: [120.2,30.1666], // 初始地图中心点位置
          zoom: 15,     // starting zoom 地图初始的层级
          pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
          bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
          antialias: true, //抗锯齿，通过false关闭提升性能
        });  
    }
}

在挂载完成时调用

mounted() {
  this.init()
},

就这样就可以将mapbox-gl于vue项目中成功的渲染出来了。

效果如下：

不同的地图风格展示：

夜间导航风格

style:'mapbox://styles/mapbox/navigation-guidance-night-v2'

白天导航风格

style:'navigation-guidance-day-v2'

卫星影像图

style:'mapbox://styles/mapbox/satellite-v9'

最后

mapbox-gl的地图风格支持自定义，这部分有些复杂，在下一章中在介绍如何配置不同的风格。