首发于 地图说
凸显特定区域有妙招!地图可视化之掩膜技术【Mapbox Studio 教程大放送】

凸显特定区域有妙招!地图可视化之掩膜技术【Mapbox Studio 教程大放送】

如果你在地图制作时只想要凸显出某一特定区域,比如美国的阿拉斯加洲、比利时一国,欧洲全境,这该如何实现呢?

掩膜(Masking) 技术应运而生。掩膜技术是制图的专业术语,指通过隐藏地图上的一些要素,使感兴趣的地理区域成为主要的视觉区域,从而限制了不必要的视觉混乱。

今天我们将教大家,基于免费的高分辨率 Mapbox 边界数据,在 Studio 中,应用掩膜制图技术,在地图上突出单个国家——美国。

实现如下的效果。现在,让我们开始教程吧!


前置准备

开始前,我们需要具备以下前置条件!

  • Mapbox Studio
    登陆账号! 没有账号的快去注册哦~
  • 边界数据
    Mapbox Studio 为所有使用者内置了高分辨率国家边界矢量瓦片集,而且是免费!因为这次我们要凸显的是美国全国区域,studio 自带的数据可以满足。 如果你要可视化其他特定区域,也可以上传相关边界数据集至 Studio,然后进行操作。

准备好了吧?正式操作开始!

5 个简单步骤

第 1 步

在 Studio 中,首先创建一个新的空白样式。选择图层标签,并添加 "Mapbox Satellite " 图层,即 Mapbox 卫星图层。


第 2 步

接下来,添加 "Mapbox Countries V1 "层。默认的样式是黑色的。

不要感到惊慌! 现在虽是一片漆黑,但好戏即将开场,我们会在下一步进行调整。


第 3 步

现在我们要为 "Mapbox Countries V1 "图层设置样式,调整“Style with data conditions(数据条件)”中对于颜色的设置。使用 "Name "数据字段,输入 "United States (美国)",选中数据。



如果你不清楚你要选择的国家在其中的名字,你还可以使用 " select data (选择数据) "面板,通过右键点击地图来查看您选择的国家的各类属性。


第 4 步

一旦 "United States "被选中,将颜色的不透明度值设为 "0 "。地图应该看起来像下面这样 。





然后,将其他的地区,即 Fallback value (回退值)里的颜色调整为白色和不透明度为 1。现在,地图应该显示所有国家除了美国,都是白色的。




第 5 步

添加 Mapbox 的 " Water "层(水域层),并将填充颜色改为白色。

这就是我们的成果——感兴趣的国家凸显出来了,其他区域都隐藏了。当然,我们可以灵活地将国家的回退值设计成任何颜色,并将该样式与水域层匹配。试试不同的颜色,以便与数据可视化或网络平台的背景颜色最匹配。



添加周围的地理环境

如果要添加一些相关的周边地理环境,如国家边界,只需复制 “Mapbox Countries V1 ”图层,但这次我们将把样式类型改为 “line(线)”。

进入 “Select data (选择数据)”,将 “type (类型 )“ 改为 “line (线)”,如下图。

确保将新增的“Mapbox Countries V1 ”图层放在所有图层的最顶端。下面的例子中,线条的宽度较细,并将其染成灰色。


黑白卫星层作为背景背景层

你也可以增加更多周围细节,同时不喧宾夺主。

请看下面的例子,我们添加了另一个卫星层。注意它在层次结构中的位置——在水域层下面,但在国家边界层上面。我们还为该层的不透明度赋予了0.4的值,并将饱和度降为-1。


最后的最后

通过以上几步,你已经成功完成了凸现特定区域的地图。小提醒,Mapbox Studio 的地图,可以直接用于网页呈现和移动端展示,点击右上角的 share(分享)键,你就可以与大家分享甚至直接嵌入到网页等各类平台中啦!

预览链接:

你甚至可以将地图投影调整为阿尔伯斯投影, 看下图效果 ! 为什么要改投影?怎么改?请查看之前的推文~

Mapbox中国:一行代码改变地图投影类型! 自适应投影功能现身Mapbox GL JS V2.6


趁热打铁,现在就用 Studio 尝试制图掩膜技术吧!


如果有任何问题,欢迎您进入 Mapbox.cn 留下你的商务需求、问题、建议、产品想法等,我们会在 1- 3 个工作日内回复你哦!

编辑于 2022-03-14 19:50

文章被以下专栏收录

    地图说

    好看的地图故事,版主微信:Mapbox_max