Mapbox Studioではこの度、3D TerrainとSkyレイヤーの追加、最大描画角度の拡大(マップのピッチが60度から85度に)等のアップデートにより、3Dマップでのデザインが可能になりました。これらの機能は、Mapbox GL JSではv2のリリースと同時に追加された機能ですが、本アップデートによりMapbox Studioでも使用可能になります。これにより、Mapbox Studioを用いることで、3Dマップの直接かつノーコードでのデザインが可能になりました。
3D Terrain
Mapbox Studioのメニューバーにある「Terrain」と書かれたドロップダウンから3D Terrainを設定することで、既存・新規問わず、どのスタイルでも3D表示が可能になりました。ドロップダウンの「Enable 3D terrain」をオンにすると、自動的に新しいDigital Elevation Modelタイル(地形がデジタル表現されたタイル)が追加され、地形の高さが切り替わります。また、「Exaggeration」スライダーで地形の押し出しレベルをコントロールすることもできます。値を0.0にすると、完全に平坦なマップになります、1.0にすると実寸比率のリアルな地形を表示します。1.0より大きい値では、値の大きさに応じて地形の高さが乗算されます。
Skyレイヤー
Skyレイヤーのスタイルを設定するためにはまず、「Land, water, & sky」コンポーネントを追加します。このコンポーネントは新しいSky APIと対応しており、「Atomosphere」または「Gradient」から空の表現方法を、また「Morning」や「Sunset」など一日の時間帯に基づいた太陽の位置を設定することで空の色味をカスタマイズできます。
Mapbox Studioでデザインされた3Dマップは、Mapbox GL JSを介して直接アプリに組み込むことができます。すべてのスタイルは以前のバージョンと互換性があり、古いバージョンのモバイルSDKではフォールバック(新機能を制限して動かす)され2Dで表示することができるので、どのプラットフォームでも3D機能を備えたスタイルを導入することができます。
ぜひあなたがつくった3Dマップを、Twitterで#BuiltWithMapboxを付けてシェアしてみてください!
*本記事で紹介した機能は一部スタイルでご利用いただけない場合がございます。