【機 能 概 要　】地図をバードビューにし、建物を3Dで表現する事が出来ます。
　　　　　　　　また、建物は高さや色などを細かく設定する事が出来ます。
【想定ユーザー】カーナビユーザー
【注　意　点　】この3Dで表現された建物の高さは実際の高さを反映したものではありません。

▼コードサンプル

▼body以降の記述
mapboxgl.accessToken = 'Mapboxキー';
var map = new mapboxgl.Map({
container: 'map', // container id
style: '設定スタイルID', 　　　　　 //設定スタイル
center: [139.768884,35.681236], 　//デフォルト位置 [東経,北緯]
zoom: 16,　　　　　　　　　　　　　　//初期スケール
pitch: 60,　　　　　　　　　　　　　 //3Dの仰角
bearing: -25,　　　　　　　　　　　　//地図の回転角度
container: 'map',
antialias: true
});

map.on('load', function() {
map.resize();
// 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',　　//建物の色

'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': 0.6
}
},
labelLayerId
);
});