一步一步制作一幅Mapbox Style风格的园区地图

目前Mapbox在自动驾驶领域布局很深，几个Uber高管入职Mapbox，Vision SDK也开始公测，初入自动驾驶领域的我必须紧跟步伐。
再看看国内各大厂，早以换成前端渲染引擎，而朋友圈内大佬，
淡叔 Mapbox GL JS本地化实践
一休哥 《权力的游戏》3d地图-基于Mapbox customlayer
公瑾 Mapbox本地离线部署
也都在追Mapbox，前端渲染必成大势所趋。

我理解的前端渲染

前端渲染即借助前端js引擎对地图矢量瓦片进行渲染。例如：Mapbox gl js就是一个浏览器端的渲染引擎，矢量瓦片就是Mapbox Vector Tiles。其优势是什么，看看Mapbox官网：

Benefits of vector tiles

Vector tiles have two important advantages over fully rendered image tiles:

• Styling: as vectors, tiles can be styled when requested, allowing for many map styles on global data
• Size: vector tiles are really small, enabling global high resolution maps, fast map loads, and efficient caching

Mapbox Streets, our global basemap, is entirely made of vector tiles. Any map data you upload with Mapbox Studio is converted into vector tiles before styling.

总体思路

假如你现在需要对一个园区进行地图制作，想做成矢量瓦片并在前端进行渲染，这篇文章适合你。
首先我们要把现有的矢量文件制作成mvt格式的矢量瓦片，接着针对要渲染的各个图层及背景图层定义Style（不借助Mapbox Studio情况下），大体就这样。作者今天就来操作，敬请期待。

---

接着说，在作者这两天摸索的同时，非常有幸看到这位大神的著作，拜读一下收获颇丰——《开源方案搭建可离线的精美矢量切片地图服务-1.开篇（附成果演示地址）》，该大神分好几篇循序渐进讲解如何制作一个矢量瓦片图，并通过Mapbox gl js前端渲染。在这就不班门弄斧了，在大神文章指引下，一步步制作出一张粗略的地图。

image.png