使用Vue开发地图的时候，鉴于也不熟悉Vue，就将mapbox gl以单页面的形式做成了组件，共享map实例进行地图操作开发。
具体的实现如下：
安装mapbox gl 类库：通过npm install mapbox-gl --save安装类库，或者国内的cnpm也可以。
新建Vue的模版页：div承载mapbox gl地图
<template>
<div>
<div ref="basicMapbox"></div>
</div>
</template>
通过脚本代码添加mapbox的对象：需要在mounted里，进行mapbox gl的初始化，container属性，通过ref指向div。
<script>
import mapboxgl from "mapbox-gl";
export default {
data() {
return {
};
},
mounted() {
this.init();
},
created: function() {
},
methods: {
created() {
},
// 初始化
init() {
mapboxgl.accessToken =
"yourtoken";
const map = new mapboxgl.Map({
container: this.$refs.basicMapbox,
maxZoom: 17,
style: {
version: 8,
name: "mapboxdata",
sources: {
tdtbase: {
type: "raster",
tiles: [
"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
],
tileSize: 256
}
},
layers: [
{
id: "tdtbase",
type: "raster",
source: "tdtbase",
minzoom: 0,
maxzoom: 18
}
]
},
});
}
}
};
在页面上应用组件：
先引用组件
import map2d from "./组件路径";
在页面上加载
<div >
<map2d ></map2d>
</div>
这样就能够将组件加载上去。
对于需要操作map对象，可以通过store的方式进行共享，各组件调用map实例，进行功能实现。
this.$store.commit("set2dmap", map);
