mapbox gl： Vue单页面组件

使用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);