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