Vue中mapbox的使用
1:首先下载包文件
cnpm i mapbox-gl -S
2:导入包文件(main.js中导入)
import mapBoxGl from 'mapbox-gl'
Vue.prototype.$mapboxgl = mapBoxGl
3:new一个地图出来
<!-- mapbox -->
<template>
<div id="map">
<div>
<el-radio-group v-model="currentMap" size="small" @change="handleSelect">
<el-radio-button label="streets-v11">街道图</el-radio-button>
<el-radio-button label="satellite-v9">卫星图</el-radio-button>
</el-radio-group>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentMap: 'streets-v11',
map: ""
};
},
components: {},
created() {
this.$mapboxgl.setRTLTextPlugin(
"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
);
this.map.addControl(
new this.$mapboxgl.MapboxLanguage({
defaultLanguage: "zh"
})
);
},
mounted() {
this.initmap();
},
computed: {},
methods: {
initmap() {
this.$mapboxgl.accessToken =
"pk.eyJ1Ijoic3E4ODg1NTUiLCJhIjoiY2toNDdudTN6MDByNjMzbW84cDA2MWJxMSJ9.ol91y8mStuwyy-URFaq5Uw";
this.map = new this.$mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
center: [104.07, 30.67],
zoom: 5,
// pitch: 60, //视野倾斜,0-60
// bearing: -17.6,//视野旋转角度
})
// map.on("load", () => {
// map.flyTo({
// center: [0, 0],
// zoom: 5,
// speed: 0.2,
// curve: 2
// })
// })
//注册点击事件
this.map.on("click", function() {
console.log("点击");
});
},
handleSelect(item) {
this.map.setStyle('mapbox://styles/mapbox/' + item)
}
}
};
</script>
<style>
#map {
height: 500px;
border: 1px solid red;
}
</style>
一些变量的解释
里面的this.$mapboxgl.accessToken
最好还是自己申请把。教程放在下面
initmap中的center
是设置地图中心
initmap中的zoom
是设置地图比例
地图飞至某一位置(flyTo())
注意:“load”后面的回调函数必须使用箭头函数形式,不能用function()
申请key
官网地址:
注册登录进去以后点击自己头像位置然后点击account【他会叫你验证邮箱的】
验证完成以后再去点击account就可以看到自己的key了