前言
🌏
【前端搞地图】系列第二弹来啦，今天给大家带来一款地图设计神器，可以称作是地图界的ps。这款神器就是Mapbox Studio。在之前的一篇文章中简单讲述了Mapbox的简单使用，需要学习的小伙伴可以自行查看: 【前端搞地图】如何设计一张让用户过目不忘的地图，这篇文章主要来介绍Mapbox Studio的用法。
效果
Mapbox Studio 是什么？
地图界的ps``地图界的ps``地图界的ps, 重要的事情说三篇，你如果不知道ps是什么，那我就没辙了，废话不多说，先来看看这个ps长什么样吧！！！
好了，下面正式开始画图吧！！！
正式开始画图
画图之前先上一下
ps链接:https://studio.mapbox.com/也可以进入Mapbox国际站导航上的Products > Studio直接进入; 因为Mapbox服务器部署在国外,所以访问起来会稍微有点慢,网络不好的童鞋可以自行寻找解决办法或者耐心等待 🤥没有注册的童鞋记得自行
注册登录哈,这里就不做过多介绍了 🐠
新建一个 style
可以从官方模版选择，或者从自己历史中选择一个,这里我选择了一个Basic > Galaxy的模板
进入之后就会出现地图了
和大部分的绘图软件一样，
mapbox的绘图也有“图层”这一概念。先画出大地，然后画出海洋、河流、湖泊，接着画出森林......依次一层一层的叠加图层，最终变成一张地图。同样，也会有图层顺序的概念。放在最顶上的图层会将放在下面的图层遮住。仔细查看左侧配置菜单,发现几乎所有的元素都是可以配置的,可以自定义颜色自定义图层等... 以下只演示部分功能,具体的功能可以自己打开
ps摸索尝试,本菜鸡也是自己一步一步摸索出来的 🐶添加图层
点击左侧菜单
Layers, 依次点击+添加一个图层,选择数据。这里可以选择官方的提供的数据也可以去上传自己的数据,上传数据点击Upload data将会看到一个上传文件框,将MBTiles、KML、GPX、GeoJSON、Shapefile（压缩）或CSV文件拖放到此处以将其转换为矢量切片。要创建栅格切片，请拖放GeoTIFF文件。这里我就直接使用官方的数据了,加载
道路数据,加载完数据,有些童鞋肯定会想,这也不是我想要的地图呀??? 🔥别急,如此强大的
ps工具,怎么会没有办法修改样式呢 🔥
颜色、宽度、透明度... 等多种样式都是可以调整的以上只是演示了加载
道路数据,官方还提供了行政``航路``机场``建筑``土地``水系... 等数据,这个就不去一一演示了,使用方式基本类似
修改语言
从以上图片可以看出,目前地图大部分文字展示之类的都是
英文,这是因为Mapbox本来就是国外的,所以默认语言使用英文也是很正常的。记得很久之前Mapbox Studio是不支持直接设置语言的，以前想要设置语言需要集成到项目中使用代码设置，这样对没有代码基础的童鞋或者是设计师使用起来可能不是太友好，既然号称地图界的ps,肯定不能仅仅来满足开发者使用啊。但是比较赞是，Mapbox Studio新版本已经支持直接在编辑的时候设置语言了，这个要给Mapbox 团队一个大大的赞👍👍👍
关于设计
因为本人不是专业的设计师,设计配色部分内容参考自:https://zhuanlan.zhihu.com/p/69845741
配色
对于专业的设计师来说，配色肯定不是问题啦，想要什么感觉分分钟弄出来。但对于可能不是设计师的同学们来说，以下几个方法或许可以给你一点灵感。
- 如果你做的地图是需要日常使用的，那么从
自然中选取颜色就是最好的方式啦，因为自然的颜色和人类对色彩的认知是一致的，这样你的地图就更容易被人理解。
比如：
- 🏠
居住地：棕色、粉色 - 🛣️
道路：浅黄色、浅棕色、白色 - 🏖️
水系：蓝色 - 🌴
植被：绿色
- 如果你需要在这几个
大类上进行更精细的划分，可以尝试通过使用不同的深浅度。
比如：
- 🛣️
道路：三级道路用浅黄色、二级道路用土黄色、一级道路用橙黄色 - 🏖️
水系：河流、湖泊用浅蓝色，海洋用深蓝色 - 🌴
植被：草地用浅绿，森林用深绿
- 同色系的地图
很多情况下，我们会针对特定的场景有特定的风格要求。
比如:
我们要绘制一张登山爱好者用的地图。那么需要用到的信息可能就只有山脉、河流、植被、等高线、马路、旅馆(住宿点)信息。
于是我们可以尝试只保留这些最有用的信息，将其他不重要的信息全都删去。
选用一个绿色系的配色方案，通过调整绿色的深浅来区分内容。同色系的地图下，能够非常有效的利用另一种颜色突出目标信息，同时更有代入感。
比如使用深色系的地图，营造出夜晚的氛围，快速突出路况信息：此外，mapbox提供了一个有趣的配色工具 cartogram ，能够快速的从一张图片上生成配色方案。
制作 3D 建筑
mapbox 自身就提供了一些
3D建筑数据，可以直接用。同时也支持自己上传数据。制作3D建筑的地图，只需要了解两个关键点就够了：
- 🔥设置数据属性
- 🔥通过
formula设置建筑高度
增加绘制建筑图层，参考以上选择道路的的步骤一步一步增加选择数据，增加完数据，选择type数据展现形式，目前有以下几种：
Fill平面填充Fill extrusion3D 填充 🔥Line线条Circle圆点Symbol文字或者 iconHeatmap热力图
这里选择 Fill extrusion，然后切换回 style，你会看到所有的建筑都变成黑色的了。style 中可以设置建筑的颜色透明度高度等...也可以自定义计算的方式去设置建筑物的高度，这个自行摸索啦💪💪💪
