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

关注公众号，多多支持！