交互 点击变色_渐变色+3D立体!地形图也能玩出新花样!(制作方法大揭秘)...

d540f8d9b964245cc1a1d6e1debcb032.png

3D hypsometric Map Tutorial

一说起地形图,你们的脑海中会浮现什么?

9a66ccb89dd8926080ac0082ad30e343.png

等高线地形图 来源网址

aafae631ce9020523349d8b28919f2a4.png

分层设色地形图 来源网址

上面的等高线地形图和分层设色地形图都是地形图的不同表现形式。 前者简洁,可一眼看出山地的缓陡之趋势;后者颜色鲜艳,更具直观性和清晰度,还具有立体感。但作为以 2D 表现 3D 的真实世界的地图,似乎还是缺了些什么~

3D ?对, 就是 3D!这里就有个案例,可以让分层设色地形图变成 3D 的,这里就和大家分享下制作思路吧!

最终效果

这是我们创建的 3D 分层设色地形图。

590ed08d2c3e43d8b86ac78a3bd67bd8.png

美国犹他州的雪松城:平均海拔超过1500米

48849c806c6ac0b44121e28ca76a8698.png

秘鲁的利马:地形高低落差极大

2c6e4efa80652bf013b34d76ea10d00b.png

尼泊尔一侧的喜马拉雅山脉:层峦叠嶂,高低起伏。(注:这里的颜色分层设置和上面两张图不一样)

这样的案例,你不需要有任何设计基础,也不需要提前任何定型数据,也不需要有编程知识,只需要跟着 blog 的指引,就能一步一步完成啦。

下面我们会按照“创建含海拔数据的新图层 - 高度拉伸 - 颜色和海拔设置 - 最终出图”思路手把手带你学会 3D 分层设色地形图的创作。

如果对 Mapbox Studio 还十分陌生,建议可以学习一下之前的教程:

  • 地图界的 PS — Mapbox Studio 入门指南(中英文教程合集)
  • 用 Mapbox 做 3D 地图,这篇文章快说透了 (技术&案例大盘点)
  • 这么好看的 Mapbox 3D 地图渐变效果,你确定不要学?

第1步:登陆 Mapbox Studio 创建地图

0fab74d7e29e701914fc8c09e2e40ee1.png

登陆你的 Mapbox Studio 的账号, 进入 style 页面, 选取 Outdoor 户外样式的地图。

选取 Outdoor 地图的原因是,这个样式的地图自带山地海拔数据,无需特地寻找!(不是 Max 自夸,这可是业内独家的地形海拔数据哦!)

d63957c32b1aa929a9ca6c05b2e3fc79.png

第2步:复制等高线数据的图层,建立新图层

98c1c9facf715d098401525e4938d88a.png

找到 Layers - Terrain land - contour-line 图层,复制该图层。你将得到一个新图层,contour-line copy。

第3步:高度拉升 fill extrusion

4992d6a2beea244ab64129f03b89d38a.png

点击 coutur-line copy 图层,选择 Type, 将原来的 Line 切换为 Fill extrusion。这一步的目的是为了能够基于海拔数据进行高度拉伸,从而达到3D 效果。

8e3b453a57d7b2e17c1381f74463e4cc.png

出现新的弹框提示,选择 Okay。紧接着, 点击该图层的 Style 中的 Height, 选择 Style across data range (跨越数据范围的样式), 并选择 ele (即海拔高度)。

点击查看更多关于跨越数据范围的样式

1b67c39d7a8e5f52d8fe6cb76e5455cc.png

紧接着出现下方图片所示信息,将这些数据进行更改。

932778c3116088cfdf6fa91c8d58fc7a.png

将这些数据进行如下更改,变成下图所示:ele -410 对应 0 meters 更改为 ele 0 对应 0 meters;ele 8840 对应 0 meters 更改为 ele 8840 对应 8840 meters.

6e1e68e6820b313a9207125319ee915a.png

现在基于海拔高度而拉伸的3D效果将是随着海拔升高而线性变化,即等高线海拔数据增高,拉伸高度也等比例增高。(在这里负海拔高度不被考虑入内)

第4步:设置分层颜色

现在,点击 Color,将不同海拔高度对应的颜色进行添加与更新(如下图所示)。

087e5227dee120e27be1e7f7359ba918.png

在添加新的海拔高度和对应色彩时, 我们是按照彩虹的颜色进行设置的,红橙黄绿青蓝紫,海拔越高越偏向紫色。关于颜色的选取,建议选择饱和度更高的颜色,效果会更好。

00b9b833465ef7c8f625e80bed3d2a94.png

第5步:最终完成,分享你的作品

做完上面4步,你的 3D 分层设色地形图就快要完成了,但显然这个俯视的视角无法查看成品。那么按住 Ctr + Click + Drag, 拖动并倾斜地图, 你就可以看见一个正真的 3D 地形图了, 有着渐变色的效果,高程显示一目了然,你可以根据效果进行调试更改,以达到最终效果。

82cbceb5b9daa8aec6b80680b2733e8f.png

在犹他州看看

2e5968a827cc3f64c6686b9407ae2376.png

去秘鲁的利马看看效果

这样, 一个 3D 分层设色地形图就做完了, 是不是很简单呢?

修改整个 Style 的名称,点击右上角的 Publish 做个发布,并 share 一下生成预览链接,分享给别人“炫耀一下“吧!

点击下方直接查看这个作品

Outdoors​api.mapbox.com
d362a4f62cf5f6db5c7a20567642809e.png

点击下方,可以将本文的案例加入自己的 Mapbox Studio 账户中,进行进一步学习。

Outdoors​api.mapbox.com
d362a4f62cf5f6db5c7a20567642809e.png

在此基础上,你可以分享 Style URL 到自己的其他应用中,调用 Mapbox API 实现交互效果哦。

如果你想获得更多关于地图的内容教程,欢迎添加 Max(Mapbox_max) 加入开发者群。


欢迎您进入 http://Mapbox.cn 留下你的问题、建议、产品想法等,我们会在 1- 3 个工作日内回复你哦!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值