搭建基于Vue的Mapbox GL开发框架

接触一些前端的WebGIS Javascript开发SDK,都是大同小异,但是一接触到Mapbox,就被其精美的在线地图,流畅的前端体验,强大的可视化渲染能力所吸引。Mapbox GL使用WebGL渲染地图和图层,这也使得大量数据的可视化在前端的渲染成为了可能,并且具有优秀的体验。所以决定研究一下Mapbox GL的相关开发,并通过博客的形式记录自己的学习历程。

创建Vue项目开发框架

通过Vue-CLI 创建一个vue webpack 开发模板框架
至于的相关使用 看官网即可

1
vue init webpack mapboxgl-learn

安装Mapbox GL依赖

在项目根目录执行

1
npm install --save mapbox-gl

添加mapboxgl全局变量

为了开发的方便通过webpack添加mapboxgl全局变量
在webpack.base.conf.js文件中通过ProvidePlugin添加自动加载模块

1
2
3
4
5
plugins: [
new webpack.ProvidePlugin({
'mapboxgl': 'mapbox-gl'
})
],

显示地图

  • 引入mapbox gl css
    在main.js 动态引入css文件 否则一些组件 或默认的样式将无法显示
1
import '../node_modules/mapbox-gl/dist/mapbox-gl.css'
  • 配置token
1
mapboxgl.accessToken = 'pk.eyJ1IjoiMTU4MTA1NzQ4NDUiLCJhIjoiY2ppMmZvc3Z6MDEyZjNxbXVvamZrc2l4eCJ9.L
  • 创建组件并构造地图
    直接贴代码了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <template>
    <div class="map-container" id = "map"></div>
    </template>

    <script>
    export default {
    name: 'ShowMap',
    data () {
    return {
    map: null,
    }
    },
    mounted() {
    this.initMap()
    },
    methods: {
    initMap: function() {
    this.map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [116.406658,39.912363], // starting position [lng, lat]
    zoom: 9, // starting zoom
    })
    }
    }
    }
    </script>


    <style scoped>
    .map-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }
    </style>
  • 效果如下