在項目里要用到mapboxgl這個插件，所以就記錄了一下使用的過程
准備工作
1.去mapboxgl官網中注冊賬號，並新建一個token
2.使用npm引入mapbox的庫：
npm install --save mapbox-gl
頁面中配置
在布局中空新建一個div，為其配置一個id，在初始化mapbox的時候將id對應即可
<div id="map"></div>
在css中給這個div配置樣式，配置具體大小，（基本所有基於canvas的繪圖組件都需要分配一個有具體大小的“殼”）否則無法在界面上出現地圖
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
在script中引用mapbox：
const mapboxgl = require('mapbox-gl'); //引入組件
定義地圖的初始化函數，在掛載完成時調用：
mounted () {
this.initmap();
},
methods: {
initmap(){
mapboxgl.accessToken = 'pk.******************************************************'; //這里請換成自己的token
var map = new mapboxgl.Map({
container: 'map', // container id 綁定的組件的id
style: 'mapbox://styles/mapbox/streets-v11', //地圖樣式，可以使用官網預定義的樣式,也可以自定義
center: [118.726533,32.012005], // 初始坐標系，這個是南京建鄴附近
zoom: 15, // starting zoom 地圖初始的拉伸比例
pitch: 60, //地圖的角度，不寫默認是0，取值是0-60度，一般在3D中使用
bearing: -17.6, //地圖的初始方向，值是北的逆時針度數，默認是0，即是正北
antialias: true, //抗鋸齒，通過false關閉提升性能
});
}
}
現在地圖已經可以顯示出來了，如果要對地圖進行更多的操作，在map的初始化中可以用on設置事件的監聽與回調
map.on('click', function(e) {
console.log('我的被點擊了')
});
顯示一個3D地圖的完整例子如下：
<template>
<div id="map"></div>
</template>
<script type="text/ecmascript-6">
const mapboxgl = require('mapbox-gl');
export default {
name: 'mapboxgl',
mounted () {
this.initmap();
},
methods: {
initmap(){
mapboxgl.accessToken = 'pk.eyJ1IjoicGxheS1pc2FhYyIsImEiOiJjazU0cDkzbWowamd2M2dtemd4bW9mbzRhIn0.cxD4Fw3ZPB_taMkyUSFENA';
var map = new mapboxgl.Map({
container: 'map', // container id 綁定的組件的id
style: 'mapbox://styles/mapbox/streets-v11', //地圖樣式，可以使用官網預定義的樣式,也可以自定義
center: [118.726533,32.012005], // 初始坐標系
zoom: 15, // starting zoom 地圖初始的拉伸比例
pitch: 60, //地圖的角度，不寫默認是0，取值是0-60度，一般在3D中使用
bearing: -17.6, //地圖的初始方向，值是北的逆時針度數，默認是0，即是正北
antialias: true, //抗鋸齒，通過false關閉提升性能
});
// The 'building' layer in the mapbox-streets vector source contains building-height
// data from OpenStreetMap.
map.on('load', function() { //on設置監聽，以及觸發時的回調，這是加載時的觸發的生成3d地圖的例子
// Insert the layer beneath any symbol layer.
var layers = map.getStyle().layers;
var labelLayerId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}
map.addLayer( //在地圖樣式中添加一個Mapbox樣式圖層。(圖層，layerid)
{
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.6
}
},
labelLayerId
);
});
//地圖監聽點擊，觸發回調
map.on('click', function(e) {
console.log('123')
});
}
}
}
</script>
<style scoped>
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
在mapbox官網有更多的實例，可以在官網的Examples中查看，另外style中引入的mapbox的css我在一開始沒有引入時功能也是正常的，但在別人很多操作的實例中都是加入的，對於vuespa中是否需要引入持疑問態度