![d540f8d9b964245cc1a1d6e1debcb032.png](https://i-blog.csdnimg.cn/blog_migrate/7cdd225d694b14d03e4f15d7f9198571.jpeg)
3D hypsometric Map Tutorial
一说起地形图,你们的脑海中会浮现什么?
![9a66ccb89dd8926080ac0082ad30e343.png](https://i-blog.csdnimg.cn/blog_migrate/d9d0abb65ddbe29c5b72aaa64f6d6e43.jpeg)
等高线地形图 来源网址
![aafae631ce9020523349d8b28919f2a4.png](https://i-blog.csdnimg.cn/blog_migrate/d78371afdb34fcce37110d7d9ce76c92.jpeg)
分层设色地形图 来源网址
上面的等高线地形图和分层设色地形图都是地形图的不同表现形式。 前者简洁,可一眼看出山地的缓陡之趋势;后者颜色鲜艳,更具直观性和清晰度,还具有立体感。但作为以 2D 表现 3D 的真实世界的地图,似乎还是缺了些什么~
3D ?对, 就是 3D!这里就有个案例,可以让分层设色地形图变成 3D 的,这里就和大家分享下制作思路吧!
最终效果
这是我们创建的 3D 分层设色地形图。
![590ed08d2c3e43d8b86ac78a3bd67bd8.png](https://i-blog.csdnimg.cn/blog_migrate/537e5caddd9fa32ae8a2c02aa83a335e.jpeg)
美国犹他州的雪松城:平均海拔超过1500米
![48849c806c6ac0b44121e28ca76a8698.png](https://i-blog.csdnimg.cn/blog_migrate/c2b11e81dbb53006ec411779ee385dee.jpeg)
秘鲁的利马:地形高低落差极大
![2c6e4efa80652bf013b34d76ea10d00b.png](https://i-blog.csdnimg.cn/blog_migrate/cda849726c2a78548af0d2da02526fdb.jpeg)
尼泊尔一侧的喜马拉雅山脉:层峦叠嶂,高低起伏。(注:这里的颜色分层设置和上面两张图不一样)
这样的案例,你不需要有任何设计基础,也不需要提前任何定型数据,也不需要有编程知识,只需要跟着 blog 的指引,就能一步一步完成啦。
下面我们会按照“创建含海拔数据的新图层 - 高度拉伸 - 颜色和海拔设置 - 最终出图”思路手把手带你学会 3D 分层设色地形图的创作。
如果对 Mapbox Studio 还十分陌生,建议可以学习一下之前的教程:
- 地图界的 PS — Mapbox Studio 入门指南(中英文教程合集)
- 用 Mapbox 做 3D 地图,这篇文章快说透了 (技术&案例大盘点)
- 这么好看的 Mapbox 3D 地图渐变效果,你确定不要学?
第1步:登陆 Mapbox Studio 创建地图
![0fab74d7e29e701914fc8c09e2e40ee1.png](https://i-blog.csdnimg.cn/blog_migrate/9814144665b383e80335e74f40dcd7a7.jpeg)
登陆你的 Mapbox Studio 的账号, 进入 style 页面, 选取 Outdoor 户外样式的地图。
选取 Outdoor 地图的原因是,这个样式的地图自带山地海拔数据,无需特地寻找!(不是 Max 自夸,这可是业内独家的地形海拔数据哦!)
![d63957c32b1aa929a9ca6c05b2e3fc79.png](https://i-blog.csdnimg.cn/blog_migrate/af05b81e39503a4aa0666261454c49fd.jpeg)
第2步:复制等高线数据的图层,建立新图层
![98c1c9facf715d098401525e4938d88a.png](https://i-blog.csdnimg.cn/blog_migrate/918342f0a41bee909a6bc354e72822c3.jpeg)
找到 Layers - Terrain land - contour-line 图层,复制该图层。你将得到一个新图层,contour-line copy。
第3步:高度拉升 fill extrusion
![4992d6a2beea244ab64129f03b89d38a.png](https://i-blog.csdnimg.cn/blog_migrate/d0530791e05eb4470da32d6f952178b6.jpeg)
点击 coutur-line copy 图层,选择 Type, 将原来的 Line 切换为 Fill extrusion。这一步的目的是为了能够基于海拔数据进行高度拉伸,从而达到3D 效果。
![8e3b453a57d7b2e17c1381f74463e4cc.png](https://i-blog.csdnimg.cn/blog_migrate/233a76ef1ad90be6bf919f9a4de1df65.jpeg)
出现新的弹框提示,选择 Okay。紧接着, 点击该图层的 Style 中的 Height, 选择 Style across data range (跨越数据范围的样式), 并选择 ele (即海拔高度)。
点击查看更多关于跨越数据范围的样式
![1b67c39d7a8e5f52d8fe6cb76e5455cc.png](https://i-blog.csdnimg.cn/blog_migrate/af8d869767b9d8833e8b12b70f3765de.jpeg)
紧接着出现下方图片所示信息,将这些数据进行更改。
![932778c3116088cfdf6fa91c8d58fc7a.png](https://i-blog.csdnimg.cn/blog_migrate/f14455c46df3f1ad6b6b684baa0df330.jpeg)
将这些数据进行如下更改,变成下图所示:ele -410 对应 0 meters 更改为 ele 0 对应 0 meters;ele 8840 对应 0 meters 更改为 ele 8840 对应 8840 meters.
![6e1e68e6820b313a9207125319ee915a.png](https://i-blog.csdnimg.cn/blog_migrate/cc6c5ec25934f05cd29aed87749b9be0.jpeg)
现在基于海拔高度而拉伸的3D效果将是随着海拔升高而线性变化,即等高线海拔数据增高,拉伸高度也等比例增高。(在这里负海拔高度不被考虑入内)
第4步:设置分层颜色
现在,点击 Color,将不同海拔高度对应的颜色进行添加与更新(如下图所示)。
![087e5227dee120e27be1e7f7359ba918.png](https://i-blog.csdnimg.cn/blog_migrate/01132a44015bab698bb91771f643884b.jpeg)
在添加新的海拔高度和对应色彩时, 我们是按照彩虹的颜色进行设置的,红橙黄绿青蓝紫,海拔越高越偏向紫色。关于颜色的选取,建议选择饱和度更高的颜色,效果会更好。
![00b9b833465ef7c8f625e80bed3d2a94.png](https://i-blog.csdnimg.cn/blog_migrate/e6689f626b98f15a8fd3e463d132074c.jpeg)
第5步:最终完成,分享你的作品
做完上面4步,你的 3D 分层设色地形图就快要完成了,但显然这个俯视的视角无法查看成品。那么按住 Ctr + Click + Drag, 拖动并倾斜地图, 你就可以看见一个正真的 3D 地形图了, 有着渐变色的效果,高程显示一目了然,你可以根据效果进行调试更改,以达到最终效果。
![82cbceb5b9daa8aec6b80680b2733e8f.png](https://i-blog.csdnimg.cn/blog_migrate/e01fe449bd8f88575a68527fd34457d6.jpeg)
在犹他州看看
![2e5968a827cc3f64c6686b9407ae2376.png](https://i-blog.csdnimg.cn/blog_migrate/c72c22d1777c68c8dede621fa52ef10d.jpeg)
去秘鲁的利马看看效果
这样, 一个 3D 分层设色地形图就做完了, 是不是很简单呢?
修改整个 Style 的名称,点击右上角的 Publish 做个发布,并 share 一下生成预览链接,分享给别人“炫耀一下“吧!
点击下方直接查看这个作品
Outdoorsapi.mapbox.com![d362a4f62cf5f6db5c7a20567642809e.png](https://i-blog.csdnimg.cn/blog_migrate/6ecdc72e6a8abefaa6851fc557abb9ec.png)
点击下方,可以将本文的案例加入自己的 Mapbox Studio 账户中,进行进一步学习。
Outdoorsapi.mapbox.com![d362a4f62cf5f6db5c7a20567642809e.png](https://i-blog.csdnimg.cn/blog_migrate/6ecdc72e6a8abefaa6851fc557abb9ec.png)
在此基础上,你可以分享 Style URL 到自己的其他应用中,调用 Mapbox API 实现交互效果哦。
如果你想获得更多关于地图的内容教程,欢迎添加 Max(Mapbox_max) 加入开发者群。
欢迎您进入 http://Mapbox.cn 留下你的问题、建议、产品想法等,我们会在 1- 3 个工作日内回复你哦!