【前端搞地图】如何设计一张让用户过目不忘的地图-2

前言

🌏【前端搞地图】系列第二弹来啦，今天给大家带来一款地图设计神器，可以称作是地图界的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

配色

对于专业的设计师来说，配色肯定不是问题啦，想要什么感觉分分钟弄出来。但对于可能不是设计师的同学们来说，以下几个方法或许可以给你一点灵感。

1. 如果你做的地图是需要日常使用的，那么从自然中选取颜色就是最好的方式啦，因为自然的颜色和人类对色彩的认知是一致的，这样你的地图就更容易被人理解。

比如：

• 🏠居住地：棕色、粉色

• 🛣️道路：浅黄色、浅棕色、白色

• 🏖️水系：蓝色

• 🌴植被：绿色

2. 如果你需要在这几个大类上进行更精细的划分，可以尝试通过使用不同的深浅度。

比如：

• 🛣️道路：三级道路用浅黄色、二级道路用土黄色、一级道路用橙黄色

• 🏖️水系：河流、湖泊用浅蓝色，海洋用深蓝色

• 🌴植被：草地用浅绿，森林用深绿

3. 同色系的地图

很多情况下，我们会针对特定的场景有特定的风格要求。

比如:

我们要绘制一张登山爱好者用的地图。那么需要用到的信息可能就只有山脉、河流、植被、等高线、马路、旅馆(住宿点)信息。

于是我们可以尝试只保留这些最有用的信息，将其他不重要的信息全都删去。

选用一个绿色系的配色方案，通过调整绿色的深浅来区分内容。
同色系的地图下，能够非常有效的利用另一种颜色突出目标信息，同时更有代入感。

比如使用深色系的地图，营造出夜晚的氛围，快速突出路况信息：
此外，mapbox提供了一个有趣的配色工具 cartogram ，能够快速的从一张图片上生成配色方案。

制作 3D 建筑

mapbox 自身就提供了一些 3D 建筑数据，可以直接用。同时也支持自己上传数据。制作 3D 建筑的地图，只需要了解两个关键点就够了：

• 🔥设置数据属性

• 🔥通过 formula 设置建筑高度

增加绘制建筑图层，参考以上选择道路的的步骤一步一步增加选择数据，增加完数据，选择type数据展现形式，目前有以下几种：

• Fill 平面填充

• Fill extrusion 3D 填充 🔥

• Line 线条

• Circle 圆点

• Symbol 文字或者 icon

• Heatmap 热力图

这里选择 Fill extrusion，然后切换回 style，你会看到所有的建筑都变成黑色的了。style 中可以设置建筑的颜色透明度高度等…也可以自定义计算的方式去设置建筑物的高度，这个自行摸索啦💪💪💪

最后

写文不易，记得关注微信公众号：前端开发爱好者 给这篇文章来个三连击吧 👍👍👍。持续关注，【前端搞地图】系列将会持续更新，下一期将会围绕应用于项目做持续更新🔥🔥🔥