这么好看的 Mapbox 3D 地图渐变效果，你确定不要学？
不久前，我们推出了 Mapbox 制作 3D 地图的超详细教程，主要涉及到模型的加入，却没有怎么提及模型的样式风格化。的确，在做地图可视化的时候，不仅仅是 3D，灵魂在于颜色，这样才能夺人眼球，吸引客户的芳心。
自那以后，就屡次有开发者在问：怎么样才能实现为 3D 地图添加渐变的颜色效果呢？
在与开发者社区的小伙伴，以及和 Mapbox 总部的工程师交流后，我们总结出来了一个非常简单的 3D 建筑渐变色方法，不需要写一行代码都可以实现，类似下面的效果👇
🚀学习步骤
下面就跟着我们一起实现吧
首先，我们会从 Mapbox Studio 开始，不写一句代码，就实现上面的效果。
下面，如果你想更加自由地实现样式化，我们还会一起使用 Mapbox GL JS 用几行 Expression 代码实现更灵活更好看的作品。
🚀你将会掌握的内容
在一起实现的过程中，你会循序渐进掌握下面的内容：
在 Mapbox Studio 中添加 3D 建筑，添加过滤器，根据建筑高度插值实现渐变效果。
用 Mapbox GL JS 创建一个本地的 HTML 页面，展示渐变 3D 建筑图。
好了，下面我们就进入正式教学，如果遇到任何疑问，请关注 Mapbox 并在后台留言，或者联系 Mapbox 前台小姐姐 Max（微信号：Mapbox_max）。
👩🚀
在 Mapbox Studio 中实现 3D 建筑渐变效果
PS. 在刚刚写完这篇教程不久，Mapbox Studio 就更新了！所以下面的界面有一些和你现在使用的不太一样，但是基本功能是没有大变化的！Mapbox Studio 具体的更新请在 Mapbox 微信后台回复「studio 更新」了解详情。
1. 进入 Mapbox Studio
用 Chrome 浏览器打开 Mapbox Studio👇
如果没有注册可以快速注册登陆一下，注册后能查看地图加载量，生成 Access Token 等，对地图开发有很大的帮助，不后悔～
2. 创建 2D 底图
点击 New Style，选择自己心仪的地图模版，这是 2D 的模版，就是你的建筑「脚踩的地面」。
你可以选择设计师模版，也可以使用 Mapbox 小工具 Cartogram 上传喜欢的图片自定义好看的模版，点击 Create 即可，我们在这里选择了「Lè Shine」。
Lè Shine 冷静的蓝色正适合给炫彩的 3D 建筑做烘托了。
3. 添加 OSM 3D 建筑数据
要知道 Mapbox 的矢量图层保证了加载的流畅，类似于 PS 的图层，3D 建筑需要被定义在一个新的图层中。
我们先创建一个新的图层，专门用来显示 3D 建筑，点击左上角的 New Layer，并选择自带的数据源 Mapbox Streets v7 中的 Building。
为什么似乎没有看到 3D 建筑呢？你还要选择 Type 为 Fill Extrusion，如下图所示。
并使用过滤器，设置 Underground - false，显示合适的建筑数据。
你还可以设置建筑显示的缩放比例（0-22）。
比如上图，我们这里设置为缩放比例在 11.2 - 22 之间，才会显示 3D 建筑，这样在放大到某个程度的时候，建筑突然蹦出，是非常炫酷的一种感觉。
4. 为建筑设置渐变色
当 3 中所述的 Type, Filter, Zoom 等都设置好以后，点击 style 就可以开始为 3D 建筑做样式定制了！就是你最关心的渐！变！色！
这个时候，建筑还是黑色的，俯视而看是这个效果👇
我们以此修改下面的参数：
Height - Use a formula - Insert a data field - height
Base Height - Use a formula - Insert a data field - min-height
Color - Style across data range - height
Color - Rate of change - exponential
这样就设置好了建筑的高度和颜色渲染标准（插值，可产生渐变的效果）。
您可以看到上面的大红框，就是调节颜色的地方，您需要在不同的建筑高度处为期赋予不同的颜色。因为这里设置好了插值着色，所以最后的效果不是某个高度下某个颜色，而是颜色过渡的，也就是渐变色！
我们在这里推荐一些常见的配色推荐网站：
CoolHue，两种颜色渐变的效果，很简单，主题很鲜明
itmeo，多种颜色的渐变效果，可以在建筑很高的时候考虑使用
这些颜色所对应的数值 #？？？？，可以直接输入到不同 height 对应的颜色区域。
我们使用了两种颜色：height 0 时的粉色 #fbc2eb 和 height 400 时的蓝色 #a6c1ee。
如果你地图的区域建筑不是很多，可以在上图红色箭头的位置输入地点，比如我们输入的是「New York」，如下图所示👇
是不是很有少女心的感觉？
这时候你可以点击右上角的「Publish」,就可以获得一个 Share URL，当调节为 Public 的时候，就可以分享这个链接给别人看了！
就是这样！
👨🚀
使用 Mapbox GL JS 实现 3D 建筑渐变效果
其实 Mapbox Studio 在设置颜色的时候还是稍微有一点点麻烦的，你需要不停地复制粘贴，但其实如果用写代码的方式，就事半功倍了。
其实 Mapbox Studio 里面也是可以写代码的，点击 Edit JSON 即可，你可以看到高度数值和颜色代码，想要增加颜色或者修改高度和颜色，只需要增减修改代码就好。
Mapbox GL JS 和这个非常类似！它使用 Expression（Mapbox GL JS 样式规范的重要格式）轻松完成了 Studio 中的复杂功能。
首先是一样的，我们需要先把 3D 建筑显示出来，这个可以直接参考 Mapbox GL JS 的案例 - Display buildings in 3D。
您可以在桌面上新建一个空的文本文档，将下面的源代码粘贴进去，保存并修改后缀名为“.html”，再用浏览器打开即可看到 3D 建筑地图！
<html>
<head>
<meta charset='utf-8' />
<title>Display buildings in 3D</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94bWF4IiwiYSI6ImNqbnY4MHM3azA2ZmkzdnBnMThvNzRoZ28ifQ.IffqPZGkhcdPjnZ2dmSO6w';
var map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/light-v10',
center: [-74.0066, 40.7135],
zoom: 15.5,
pitch: 45,
bearing: -17.6,
container: 'map'
});
// The 'building' layer in the mapbox-streets vector source contains building-height
// data from OpenStreetMap.
map.on('load', function() {
// Insert the layer beneath any symbol layer.
var layers = map.getStyle().layers;
var labelLayerId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
'fill-extrusion-height': [
"interpolate", ["linear"], ["zoom"],
15, 0,
15.05, ["get", "height"]
],
'fill-extrusion-base': [
"interpolate", ["linear"], ["zoom"],
15, 0,
15.05, ["get", "min_height"]
],
'fill-extrusion-opacity': .6
}
}, labelLayerId);
});
</script>
</body>
</html>但是这模型还是白模，我们需要为其赋予颜色。可是在 Mapbox GL JS 库中找了半天，都没看到这样的例子，只有个给线增加渐变色的例子比较类似。
在这里，它使用了 Expression 实现了渐变的效果，类似的原理是不是也可以用在 3D 建筑上呢？答案是对的！
我们通过 Expression 相关文档，找到了关键语句👇
所以我们在刚刚保存的 3D 建筑文件中做一些小小的修改，如下图红色框所示，并换了一种蓝色系。
最后的效果如下图，感觉比用 Mapbox Studio 做的要更好看一些似的。
完整源代码请在 Mapbox 微信后台回复「渐变」即可获得
扫我，回复「渐变」
如果喜欢的话，请点一下「在看」并转发给相关的朋友吧！
我们将会不定期放出相关的内容，可以关注 Mapbox 微信公众号并小小期待一下 ❤️
👀相关阅读
👀点击关键词查看相关内容
商务合作请联系：apac-bd@mapbox.com
扫描下方二维码，回复【技术】即可加入开发者群，对接资源，一起学习成长。👇