位置情報

[Mapboxリファレンス]地図をバードビューにし、建物を3D表示する

【機 能 概 要 】地図をバードビューにし、建物を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
);
});

Related post

  1. Mapboxのスタイル設定がより簡単に

  2. MAPBOXのサテライト画像改良版がリリース

  3. ARナビゲーション-Android

  4. navi

    MapBoxナビゲーションの概要-Android

  5. Mapboxの概要-Web

  6. Mapbox Vision SDK-Android

PAGE TOP