在制作方案的过程中前期分析底图如何获取？相信是每一个设计伙伴都关心的问题。

这次我们学习的Mapbox、Mapstack、Snazzy maps、百度地图个性编辑器四个网站，将解决你的疑惑！




 PART 1 MAPBOX 

网址链接：https://www.mapbox.com/


▲ CREDICT TO Mireta

Mapbox支持高度自定义各种地图元素，比如，道路，水系，绿地，建筑物，背景色，等等。Mapbox打造的Mapbox studio地图制作虚拟工作室，是一个很完美的地图元素个性化编辑器。另外，我们也可以把自己项目的地理信息数据传到Mapbox云端，然后在自己项目的客户端展现出来。


 ▍STEP 1

进入页面后，首先注册账号，选取Products，然后选择Studio，进入Mapbox studio。

之后我们选择New style，Mapbox studio提供了官方主题和其他设计者上传的个人主题。 使用者可以根据个人喜欢，选择自己喜好的风格或者直接新建个人。

▲ CREDICT TO Mireta


 ▍STEP 2

我们先载入一个官方预设，然后在图面上点击不同位置，可以显示当前位置所包含的不同图层，选择我们要修改的对应图层。可以在左侧的标签栏内针对该图层做具体的修改。

▲ CREDICT TO Mireta

 ▍STEP 3

当我们将图底显示风格修改成满意后，可以在右上角选择导出，这时候可以在左下角弹出的标签栏内设置输出参数，目前输出最大支持8k*8k px的输出大小。

▲ CREDICT TO Mireta



 PART 2 MAPSTACK 

网址链接：http://mapstack.stamen.com/


然后和大家介绍一款艺术风格非常强烈，编辑也特别简单的懒人图底网站：MAPSTACK


▍STEP 1

进入网页后，首页列出了10种官方预设风格，我们可以分别点进去查看一下。载入预设后，界面分为左右两块。左侧是当前已经加载的底图图层，右侧是当前样式的具体效果。我们可以选择右侧的标签来导出底图。

▲ CREDICT TO Mireta


 ▍STEP 2

当然，除开直接加载预设，我们也可以选择TRY IT！来设置个人风格的显示模式。我们选择一个空白的图底开始，然后点击Add a Layer，在下拉菜单里载入自己需要的不同图层。也可以通过调整左侧图层的叠加顺序来改变最终的显示效果。

▲ CREDICT TO Mireta


 ▍STEP 3

在Add a Layer里面有很多选项，可以对地图背景进行变换，最重要的是，我们可以将建筑、道路、绿地、水纹分层，根据自己的需求，单独导出自己需要的那一部分内容。

▲ CREDICT TO Mireta


 PART 3 SNAZZY MAPS 

网址链接：https://snazzymaps.com/


▲ CREDICT TO Mireta

Snazzy Maps 就是一个提供 Google 地图配色大全的网站，它挑选了许多设计师调整过后的Google 地图，使用者透过标签来找到自己喜爱的 Google Maps 配色，将网站提供的程式码复制过去，就能把地图调整成你需要的配色。


▍STEP 1

进入网页后，我们可以在页面上看到来自全球各地的设计师上传的底图模式。大家可以按照热度和上传时间来进行检索，选择自己喜欢的样式。

▲ CREDICT TO Mireta


▍STEP 2

载入合适的模板后，找到我们的设计场地。

▲ CREDICT TO Mireta


▍STEP 3

我们可以在地图的左上角看到有修改参数和输出图片两个选项，大家可以根据自己的需要，找到对应的信息图层进行修改和图片的导出。

▲ CREDICT TO Mireta



PART 4 百度地图个性编辑性

网址链接：http://lbsyun.baidu.com/custom/


之前介绍了三款风格强烈，上手容易的获取城市底图的网站。但是他们本身是基于google map或者osm数据来进行风格编辑的，很多时候涉及的国内的场地后，大家会发现场地信息和数据缺失严重，因此最后在给大家推荐一款针对国内设计场地的网站—百度地图个性编辑器。


▍STEP 1

首先我们打开网页，点击开始编辑。然后找到我们的场地所在。

▲ CREDICT TO Mireta


▍STEP 2

然后点击查看JSON，调出样式JSON界面，这时候我们可以针对不同的标签指令进行颜色和显示的修改。也可以针对建筑、道路、绿地、水纹等图层信息进行单独的显示和和导出。

▲ CREDICT TO Mireta