「抖音风格」动态地图制作方法已上线

上一期的内容，我们为大家推荐的两个《怪奇物语 Stranger Things》电视剧主题模版中，有一个模版Upside-down 获得了很多朋友的关注

这，不是一闪一闪的抖音风格吗？

这张地图的灵感来自 7 月 4 日新上的美剧《 怪奇物语 Stranger Things 》第三季，最大的特色在于通过“缩放”操作来驱动样式的变换。

为什么说是“缩放”驱动的地图呢？当放大这张地图时，身边的世界会渐渐模糊，甚至逐渐消失，然后突然出现颜色倒置，配以闪电⚡️和雷击感，继续放大，则会恢复到正常的世界。

点击这里立即使用本模版

这篇文章，玄幻唯美的地图模版作者 - Madison Draper - Mapbox Support Engineer / Geographer 将会为大家分享一下这套模版的制作思路。

br/>关于分享者

Madison Draper 经常会使用 Mapbox 做一些惹人眼球的地图设计，并在 Twitter 上分享，您可以在文末看到她设计的其他炫酷的作品。

br/>教程开始

Upside Down 里面用到了特别的 South Up 投影，也就是我们目前的“上北下南”变成了“上南下北”，作者可真能想！要怎么实现这样的效果呢？

br/>数据准备我们可以去开源的 Natural Earth 平台下载全球 247 个国家的相关数据（该数据仅供学习参考）。

我们选择合适的数据下载，并按照下面的步骤处理：1. 将 .shp 文件拖入 QGIS 打开。2. 将数据旋转 180 度，如下图。

3. 右键点击窗口左侧 Layers 中某一层，右键选择 Export - Save Features As，选择好保存路径（File Name），以及设置导出保存为 GeoJSON，点击 OK。

4. 在 Mapbox Studio 中的 Tileset 里上传刚刚导出的 GeoJSON 文件。

如果上传成功，系统会进行自动处理，处理成功后则会收到提示（因为数据比较大，可能会耗比较长的时间，请耐心等待哦，或者刷新查看最新结果）。

等数据准备好，下面我们可以开始编辑样式了！

样式编辑 —— 闪动图层偏移量设置这里比较重要的是一闪一闪的模糊效果，我们通过创建多个低透明度多边形，并设置偏移量，使其随着缩放级别的增加，偏移量收敛并且增加多边形的透明度。为了搞清楚问题，我们不妨站在巨人的肩膀上，直接从 Upside down 地图模版中学习吧。

1. 首先，在电脑上打开 Upside down 地图模版：https://www.mapbox.com/studio/styles/add-style/mapbox/cjxdh9gko00qi1co3ug0oi8md/

在模版中，已经为您加载好了刚才上传的数据，在 Layers 中的 upsidedown-translate 和 upsidedown 层中，如下图所示，绿色的地图部分就是旋转了 180 度的颠倒世界。

2. 将 upsidedown-translate 和 upsidedown 图层的 Opacity 设置为如下参数。

为了方便，可以直接以代码的形式录入，点击右下角的 复制下方代码，粘贴即可。

3. 【闪电地图关键步骤】在 upsidedown-translate 和 upsidedown 图层缩放级别设置“平移”以创建模糊闪动的效果。

为了方便，可以直接以代码的形式录入，点击右下角的 复制下方代码，粘贴即可。

样式编辑 —— 闪电边界线风格设置除了闪动的图层，我们会发现还有很多如闪电一般的边界线，随着缩放比例在变化。

这样的效果如何制作呢？闪电层占据了整体风格中近一半的层，因此在单个缩放级别上设置多个层以复制闪电的快速性至关重要。

我们在这里，基于开头创建的数据，创建了 6 个线图层：lighting-1～6。

这些图层中的数据都是整体数据的一部分，我们可以在选择数据的时候，用 Filter 过滤器（比如名字）让每个线图层含有不同的数据。

并且，在样式设置 Style 中，为这些数据赋予不同缩放比例下，不同的透明度，可以参考模版中的配置。

这样就可以大功告成啦！看着似乎有点懵逼？在工具上亲自操作一遍就都明白了。

除了本文的模版，作还还制作了很多的其他地图设计，比如下面是部分 Mapbox 地图作品

想要了解更多 Mapbox 的可能应用，以及地图设计方法，请不遗余力地关注我们吧 ❤️

小预告：我们将会在 7 月举办《地图设计指南》送书活动，扫描上方二维码，关注我们获得最新消息哦。