MapboxGL基础知识介绍

---

---

前言

作为一名webgis前端开发工程师，日常工作则是根据业务需求完成地图渲染和空间数据可视化等基础工作，在做地图数据渲染和可视化这块我们经常用到的有商业使用的如：百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶，同时也有开源的一些地图引擎如：openlayers、mapboxgl、Leaflet等 。本文主要介绍其中的开源地图引擎mapboxgl，下面会分成几个章节进行具体介绍。

---

一、Mapbox是什么？

Mapbox公司于2010年6月01日在美国成立，在我国上海也有开发国内业务的分公司（办事处）。该公司致力于打造全球最漂亮的个性化地图，Mapbox的出现打破了陈旧的古老的GIS领域的一道墙，让GIS领域的技术又打开了一副新篇章，它提供了mapboxgl.js地图渲染引擎，并提供丰富的API和示例让开发者可以快速实现地图可视化效果，同时还有自定义配图的mapbox studio，这是一个可以自定义地图风格样式的制图系统，对数据的可视化提供了很好的帮助，更重要的是同时它制定了MBTiles瓦片存储规范和Mapbox Vector Tile(Mapbox 矢量瓦片)，对GIS行业有很大的影响。

二、Mapbox常用服务工具介绍

1.mapboxgl.js

Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL，以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。

官方API地址: https://docs.mapbox.com/mapbox-gl-js/api/

github地址：https://github.com/mapbox/mapbox-gl-js

前端实现过程：
第一步 引入相关的依赖（vue可以直接npm 引入对应版本即可）
提示：这里推荐使用mapbox1版本，因为目前mapbox2版本是必须要填token参数的

<script src='https://api.mapbox.com/mapbox-gl-js/v1.13.2/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.13.2/mapbox-gl.css' rel='stylesheet' />

第二步 初始化一个地图对象

提示：这里要注意如果使用mapbox官方在线地图 需要加入mapboxgl.accessToken = 'pk.xxx';

var map = new mapboxgl.Map({
    container: 'map', // div容器ID
    //后面有文章会专门讲style的结构和如何自己制作
    style: './style.json',//地图初始化样式文件 这里也可以使用mapbox官方提供的在线地图的样式地址 
    center: [ 21.939098,47.059736],//地图中心点
    zoom: 8 // 地图层级
});

2.mapbox studio

地图编辑器Mapbox Studio用于创建一个自定义、交互式的地图，可以将这些自定义的地图和数据服务使用在自己的Web系统或移动端(Android/IOS)上。

官方地址：https://studio.mapbox.com

核心功能：可以根据用户自己上传数据和mapbox现有的地图数据（mapbox使用的是openstreetmap的地图数据）可视化配置图层样式，通过图层的叠加展示出一个多元素丰富内容的地图，然后可以导出对应的样式和雪碧图，在代码中引入使用。

操作使用参考地址（视频使用教程）：https://www.bilibili.com/video/BV1yE411M7Tn/

3.tippecanoe

是mapbox配套的矢量瓦片生产切片工具，可以根据提供的geojson等矢量数据进行切片生产矢量瓦片进行使用，参数丰富，适用于很多场景。

github地址:https://github.com/mapbox/tippecanoe

切片相关常用命令参考地址：https://wenku.baidu.com/view/0d66f70b463610661ed9ad51f01dc281e53a5638.html

切片示例命令：

//切片命令 切6-11级 矢量瓦片
tippecanoe  -Z6 -z11 -o demo.mbtiles -ps -l demo demo.geojson
//合并命令
tile-join -o result.mbtiles cesi1.mbtiles cesi2.mbtiles 

4.mapbox-gl-draw

mapbox-gl.js地图上的绘图和编辑功能的支持插件，引入该插件可以在地图上进行绘制编辑等操作。

github地址：https://github.com/mapbox/mapbox-gl-draw

---

总结

mapboxgl是一个很好的地图开发引擎，在数据可视化这块做出了很多好的案例，mapbox的优点在于它是一个美学主义的地图引擎，在可视化方面拥有非常好的用户体验，缺点就是它并非科班出身，相对于openlayers来说mapbox对gis的涵盖面不广，特别是在坐标系只支持3857这块就在使用中会遇到一些问题。