プロダクト

空、描画角度、地形など、3D地図の高度なカスタマイズが可能に。マップボックスが地図開発基盤プロダクトを刷新

2020-12-16

マップボックス・ジャパン合同会社は、新しいWeb SDKであるGL JS vesion2(注1)を実装してMapbox 3Dをリリースしたことをお知らせいたします。これにより、全てのマップが3Dで表示されるようになり、標高の高い地形の表示、空のカスタマイズ、新しいカメラAPIの利用、パフォーマンスの向上を可能にします。

3D Terrainとは

新しい高度な地形レンダリング機能により、全てのマップ機能が3D地形とシームレスに連動します。 既存のレイヤータイプは自動的に調整されて地形に合わせて配置され、マーカーは地面に固定されます。タッチとマウスの動作は3D地形に合わせて調整され、スムーズで予測可能なユーザーインタラクションを提供します。

Camera APIとは

低レベルのカメラコードへのアクセスを提供することで、開発者はマップを他のUI要素と密に連携させたり、スムーズかつ正確に遷移させたり、ビューポート内で適切なコンテンツをフレーミングするための詳細な調整を行うことができます。Camera API は、3次元でのカメラの値(位置と回転)への直接のプログラミングを可能にします。具体的には以下の特徴が挙げられます。

  • 新機能”lookAt”機能による複雑なカメラの方向の容易な認識
  • マップのピッチを60度から85度に拡大
  • プラットフォーム固有のアニメーションツールキット等との統合

Sky APIとは

Camera APIがマップのピッチを上げて地平線を表示すると、Sky APIは地理的な位置と時間帯に基づいて太陽の位置をシミュレートします。空は、大気のデフォルト値で自動的に生成され、グラデーション表現を使用してカスタマイズすることが可能です。
空のレイヤーは、太陽の方向と空の色を設定するための低レベルアクセスを提供します。グラデーションの空はカメラの真上を中心にしており、空が地平線に向かっていくにつれて色が薄くなるように色止めが設定されています。

革新的なマップレンダリングで地図の読み込み性能を30%高速化

新しいGL JSは、リソースの読み込みとタスク配分の優先順位を改善することで大幅に初回読み込み時間短縮しました。また、マップの読み込みはブラウザのメイン Javascript スレッドの時間を短縮し、ウェブの残りの読み込みに多くのリソースを残すことができます。読み込み時間は 2 つの方法で測定します。

  1. 全てのマップコンテンツをレンダリングしてアイドル状態になるまでの時間として測定される初回読み込み時間(Load time benchmarks)
  2. マップの一部が最初に表示される平均時間の測定値であるSpeed Indexと呼ばれる指標です。(Speed index benchmarks)

Webの読み込み時間のvesion1とversion2の比較
Webの読み込み時間のvesion1とversion2の比較

読み込みが高速なサイトは、エンゲージメント、コンバージョン率、顧客維持の向上につながります。通常、ページのロード時間が1秒から3秒になると、バウンス率が32%増加し、2秒以内にロードされるモバイルサイトではコンバージョン率が15%高くなると言われています。

注釈
(注1)Mapbox GL JS:ウェブ上のカスタマイズ可能なベクターマップ用のJavaScriptライブラリのこと。
    Mapbox Style 仕様とWebGL(ウェブブラウザで3次元コンピュータグラフィックスを表示させる
    ための標準仕様)を使用して、Mapboxベクタータイルから地図データをレンダリングしています。
    Mapbox GL JSには、AndroidおよびiOSアプリケーション用のSDKも含まれます。

関連ニュース