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

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

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

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

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前端渲染。在这就不班门弄斧了，在大神文章指引下，一步步制作出一张粗略的地图。

在自己电脑创建的mapbox可以在别人电脑上用的，但是不会显示。
map文件是工程文件，只是记录了一个文件保存路径，是相对的储存位置，所以不会显示。
如果想要在另一台电脑上显示，需要将你所需要的点线面注记图层导出，即导出后相对应的带有wp、wl、wt后缀的文件，拷贝到另一台电脑，在新地图添加图层即可显示。
如果文件太多太杂，可以在窗口右侧mapgislocal中右键创建数据库，将你所需要的文件导入数据库，然后在mapgis安装目录下的sample中将新建的数据库拷贝到另一台电脑，安装目录的相同位置，打开软件刷新mapgislocal就可以了。

通过mapbox的官网介绍，他们是一家为web及移动应用提供位置服务及导航的平台。mapbox已经是一款非常强大的平台。

点击style(样式)，进入后可以看到你设计过的全部的样式文件，如果你还没有设计过地图样式，这个部分会是空白的。

点击create创建一款全新的地图，在这里你可以选择利用mapbox给你提供的基础样式的基础上进行创作，或者选择一款空白的地图来手动添加图层。

对于我这样的设计师来讲已经满足了我几乎所有的需求除了数据获取，包括地图颜色、图标定制、字体库等。对于新上手的设计师mapbox studio也有一些设计样本提供学习和使用。

注意事项：

因为在这份地图里面包含了几乎所有的地图图层，包括道路，植被类型，用地类型，甚至兴趣点的数据和样式图标都是按照规范设定好的。

这样就能知道数据的结构和mapbox的设计逻辑，其实进入设计面板大家很容易就能看到左边的图层栏很像Adobe的layer，就是一层一层覆盖的，从最基础的土地类型到覆盖在上面的植被到道路最后建筑和兴趣点，这就方便理解了。

---