技术 | 用 Mapbox GL 制作舞动的 3D 建筑物

Mapbox GL 团队的使命是帮助你完全控制地图的外观和性能，做出充满互动性、创造性、基于位置的应用程序，实现惊人又有趣的效果。

基于这一点，我们最近抽出一天时间做了一下“黑客”。我把 runtime styling API 结合到 Web Audio API 中，制作了一张动态地图，地图中的 3D 建筑将随周围环境的节奏而跳跃：

用全屏演示感受一下 Demo

点击这里，连上您的麦克风，然后放上最喜欢的音乐。

如何制作

想试试做类似的地图吗？

我用了 Mapbox GL JS 的 runtime styling API 的几个功能来制作动画。首先我根据建筑的真实高度，用图层过滤器（layer filter）把它们分为16个容器（bin）：

var bins = 16;
var maxHeight = 200;
var binWidth = maxHeight / bins;

for (var i = 0; i < bins; i++) {
   map.addLayer(
{
       'id': '3d-buildings-' + i,
       'source': 'composite',
       'source-layer': 'building',
'filter': ['all', ['==', 'extrude', 'true'], ['>', 'height', i * binWidth], ['<=', 'height', (i + 1) * binWidth]],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height-transition': { duration: 0, delay: 0 },
'fill-extrusion-opacity': .6 } }); }

在GitHub上浏览 Dancing.js。

然后我创建了 Web Audio 的 AudioContext 和 AnalyzerNode，并进行配置，以使其返回相同数目的音频数据容器。我用该数据更新 fill-extrusion-height 属性：

var avg = 0;
for (var i = 0; i < bins; i++) { avg += dataArray[i];
map.setPaintProperty('3d-buildings-' + i, 'fill-extrusion-height', 10 + 4 * i + dataArray[i]); } avg /= bins;

在GitHub上浏览 Dancing2.js。

最后，对于其它变量，我让地图的方位角（bearing）和光源（light） 的颜色随时间变化而变化，同时，在声音变大时光也更强：

map.setBearing(now / 500);
map.setLight({ color: "hsl(" + now / 100 % 360 + "," + Math.min(50 + avg / 4, 100) + "%,50%)", intensity: Math.min(1, avg / 256 * 10) });

在GitHub上浏览 Dancing3.js。

更多细节请点击查询源码。

是不是非常酷炫啊，你会制作什么样的有趣的地图呢？欢迎您通过 Mapbox 微信公众号分享您对数据动态可视化的见解。

---

相关文章