Mapbox GL JS v2：3D地図 + カメラAPI + Sky APIのリリース

本日、Mapbox 3Dが新しいウェブSDK、GL JS v2を使用してリリースされました。すべての地図が3Dになり、カメラとその地図の表示を制御するための自由形式のローレベルAPIであるCamera APIをリリースしました。これにより、地図の最大ピッチが60度から85度に増加し、新しいSky APIと組み合わせることで、地理的な位置と時間に基づいて太陽の位置をシミュレートできます。以前に構築されたすべてのアプリケーション、スタイル、およびカスタム設計された地図は、GL JSで引き続き動作し、3Dに対応できるようになりました。

地図の読み込みパフォーマンスが30%向上

リソース読み込みとタスク分散の優先順位付けにより、地図の読み込みパフォーマンスが30%向上： GL JSでは、地図の読み込みが平均30%向上し、一部のスタイルでは50%以上向上しました。リソース読み込みとタスク分散の優先順位付けが改善されたことで、地図の読み込みが高速化され、Webアプリケーションで利用できるCPUリソースが増えました。サイトの読み込みが速いほど、エンゲージメント、コンバージョン率、顧客維持率が向上します。ページの読み込み時間が1秒から3秒に増加すると、直帰率が32%増加し、2秒以内に読み込まれるモバイルサイトは、コンバージョン率が15%高くなります。 

「0.1秒のサイトスピード改善により、旅行消費者のコンバージョンが10.1％増加し、平均注文額が1.9％わずかに増加したことが確認された」 - モバイルサイトのスピード改善がブランドの収益にどのようなプラスの影響を与えるかに関するデロイトの調査 "ミリ秒が数百万を生む"

Camera API

‍ローレベルのカメラコードへのアクセスを提供することで、開発者は地図が他のUI要素と緊密に連携し、スムーズかつ正確に移行し、ビューポートに適切なコンテンツをフレーミングできる詳細を微調整できます。Camera APIは、3次元でのカメラ値（位置と回転）の直接プログラミングを提供します。具体的には次のとおりです:

• 新しい「lookAt」関数による、複雑なカメラの向きの簡単な検索
• 地図のピッチを60度から85度に増加。
• プラットフォーム固有または他のアニメーションツールキットとの統合。

フリーフォームカメラを使用すると、シーンの中心にある正確な緯度と経度を必要とせずに、カメラを移動およびアニメーション化できます。これは、焦点ポイントを無視するモーション、複数の焦点を持つモーション、または焦点ポイントを動的に更新するモーションに役立ちます。フィットネスアプリで、お気に入りのランニングコースを峡谷の上を飛びながら追跡したり、航空機追跡アプリで、飛行機のすぐ後ろを飛行してその経路を追跡したりすることを想像してみてください。また、スイープロテーション、飛行、または複数の焦点ポイント間をイージングするなど、ビュー方向の滑らかで相対的なモーションにも役立ちます。カメラは、空中経路に沿って移動したり、一定のカメラ速度で地上ベースのオブジェクトを追跡したり、固定された関心ポイントを中心に回転するターンテーブルアニメーションを構築したりできます。

3D地形

‍ すべての地図機能は、新しい3D地形レンダリング機能とシームレスに連携します。既存のレイヤータイプは自動的に調整され、地形とマーカーに合わせて固定されます。タッチとマウスのジェスチャーは3D地形に合わせて調整され、スムーズで予測可能なユーザーインタラクションを提供します。

map.on('load', function () {
    map.addSource('mapbox-dem', {
        "type": "raster-dem",
        "url": "mapbox://mapbox.mapbox-terrain-dem-v1",
    });
    map.setTerrain({"source": "mapbox-dem"});
});

‍`exaggeration`係数の導入‍

オプションの`exaggeration`係数を使用して、地図上に地形を設定します。この係数は、押し出しスケールとして機能します。この値が大きいほど、地形はより押し出されます。補間式を使用すると、ズームレベル全体で動的に使用することもできます。

map.setTerrain({'source': 'mapbox-dem',
    'exaggeration': [
        'interpolate', ['exponential', 0.5],
        ['zoom'], 0, 0.2, 7, 1
    ]
});

ハイパフォーマンスDEM（数値標高モデル）

新しいMapbox Raster Data APIサービスは、地形の標高と陰影のレンダリングを強化するための高性能DEMタイルを提供します。地形タイルのサイズは、従来のterrain-rgbデータと比較して平均50％削減され、陰影レイヤーのレンダリングが35％向上しています。

Sky API

Camera API が地図のピッチを上げて地平線を露出させると、Sky API は地理的な場所と時刻に基づいて太陽の位置をシミュレートします。空は、大気のデフォルトを使用して手続き的に生成され、グラデーション式を使用してカスタマイズできます。

スカイレイヤーは、太陽の方向と空の色を設定するための低レベルアクセスを提供します。グラデーションの空はカメラの真上に配置され、空が地平線に向かって薄くなるようにカラーストップが設定されています。グラデーションスカイレイヤーは、空の中心から0の距離で始まり、空の最も遠い範囲で1になるカラーランプを使用します。ここでは、可視範囲内でランプを調整するために、フェードが0.8から1の間に設定されています。

プログレッシブマップレンダリング

‍ 新しいGL JSでは、地図のプログレッシブレンダリングが導入され、地図の読み込み時間が大幅に改善されました。地図コンテンツのプログレッシブな読み込みにより、初期ロード時とズーム、パン、アニメーション中に、土地や水などのレイヤーをより早くレンダリングできます。これにより、地図のインタラクション（ズームとパン）とアニメーションのエクスペリエンスが向上します。地図が技術的に高速にレンダリングおよびロードされるだけでなく、プログレッシブレンダリングによりページの体感速度が向上し、ユーザーは地図が完全にロードされる前に操作できます。

リソースのロードとタスクの分散の優先順位付けを改善することで、GL JSでの初期ロード時間が大幅に短縮されます。また、地図のロードはブラウザのメインJavaScriptスレッドでの時間をあまり消費しなくなるため、Webアプリケーションの残りの部分をロードするためのリソースが増えます。ロード時間は、すべての地図コンテンツをレンダリングしてアイドル状態になるまでの時間として測定される初期ロード時間と、地図の一部が最初に表示される平均時間を測定するSpeed Indexの2つの方法で測定します。

価格と提供状況‍

他のすべてのMapbox APIおよびSDKと同様に、GL JSは従量課金制で開発者が利用できます。契約は不要です。GL JSの使用量はマップロードによって課金され、これはページロードのメトリクスと相関します。v2では、Webページで`Map`オブジェクトが初期化されるたびにマップロードが発生します。各マップロードには、マップセッションの期間中、無制限のベクタータイル、ラスタタイル、および地形タイルが含まれます。マップロードの料金には、開始に十分な無料枠が含まれています。v2へのアップデートは、Mapboxのお客様の99％に価格への影響はありません。価格はすべてのサービスについて公開されています。これには、使用量の増加に応じて自動的にトリガーされるボリュームディスカウントが含まれます。新しいGL JSの使用は、Mapboxサービス規約（https://www.mapbox.com/legal/tos/）に準拠します。開発者はMapboxアカウントとアクセストークンが必要です。 

コードとコラボレーション‍

v2はv1と同様に利用できます。プロジェクトのソースコードは、コミュニティとのオープンなコラボレーションのためにhttps://github.com/mapbox/mapbox-gl-jsのGithubで入手できます。すべての新機能と改善はv2でのみ利用可能になります。SDKバンドルとソースコードは、開発者がjavascriptビルドシステムにライブラリを含め、ツールチェーンと統合しやすい方法で配布されます。古いバージョンのGL JSは、NPMおよび当社のCDNエンドポイントを介して公開されたままになります。v1リリースへのアップデートは、限られた期間、重大なブラウザ互換性またはセキュリティの問題に対してのみ行われます。

コミュニティ‍

開発者は、法律違反や人権侵害の禁止を含むMapbox 利用規約の条件下で行う限り、公開されているMapbox GL JS リポジトリをフォークし、コードに修正を加えることができます。

GL JSを始めましょう

‍サンプルに直接アクセスして、今すぐ構築を開始してください。皆様が構築するものを見るのが楽しみです。