この度Mapbox GL JS v2.3がリリースされ、3Dにおける新機能やいくつかのパフォーマンス向上、データ値を反映したスタイリング機能の拡張などが実装されました。新しく追加された霧の表現で3Dマップの奥行き感を向上させたり、拡張されたスタイリングプロパティでスタイルを簡素化したり、標高データのクエリから地形の標高プロファイルを生成したりすることが可能になります。
1. 霧の表現が可能に
今回のリリースでは、マップのビジュアルをより美しくするため、レンダリング効果である霧の表現を導入しています。3Dマップに霧を追加することで、距離に応じてオブジェクトが消えていく表現が可能になり、マップを見る人が距離を認識する際に重要な視覚的手がかりとなります。
また霧の表現を使うことで、スタイルに深みを加えたり、デザインをお好みの雰囲気に調整したりすることができるほか、距離に応じて読み込まれるタイルの数を減らすことができ、地図描画パフォーマンスの最適化を可能にします。
マップに霧を追加する
マップに霧を追加するのは非常に簡単です。霧（=fog）はルートレベルのスタイルプロパティなので、map.setFog(...)と追加することで直接アクセスできます。このプロパティには色（color）、範囲（range：霧が適用される視覚的距離を調整）、水平線ブレンド（horizon-blend：水平線での空とのブレンド方法を調整）の3つのコントロールがあります。
霧の表現に関するさらに詳しい情報については、ドキュメンテーションを参照するか、サンプルコードをチェックしてみてください。
2. クライアントサイドでの標高クエリ
DEM（Digital Elevation Model）タイルを使って、クライアントサイドで標高をクエリするための新しいAPIが追加されました。この新しいAPIは、サーバーサイドへのリクエストを行わず、地形のレンダリングにすでに利用されているDEMデータを直接利用するため、リクエストが非常に高速になります。
標高クエリはmap.queryTerrainElevation(lnglat) で利用でき、追加のネットワークリソースやサービスを使用せずに標高プロファイルを生成できます。
標高クエリに関するさらに詳しい情報については、ドキュメンテーションを参照するか、サンプルコードをチェックしてみてください。
3. パフォーマンスの向上
地形によるGPUメモリ使用量の削減
マップのビューポート内におけるすべての可視タイルで共通のレンダーバッファを使用することで、地形のGPUメモリ使用量を削減しました。この最適化により、v2.3にアップグレードするだけでクライアントアプリケーションにおけるメモリ使用量を最大200MB節約することができます。
地形に対するタイルカバーの最適化
地形が有効な場合のタイルカバーを改善しました。高倍率のビューや高度なピッチビューにおいて、DEMタイルのリクエスト数を最大35％削減することで、メモリとスピードを最適化しました。これは、車のドライバー目線に合わせてカメラが地面に近く高ピッチ角に設定される場合に、特に効果的です。
重いDOM操作のフレーム単位でのバッチ処理
大量のDOM操作を扱うアプリケーションでは、パフォーマンスに問題が生じることがあります。本リリースでは、DOMレンダリングキューを使用することで、更新処理を集約し、フレームごとに一度だけ適用することで、潜在的なリフローを軽減させています。マーカーやポップアップ、その他のDOMベースのマップ要素において、更新のパフォーマンスが5～10倍に向上しています。
4. データ値を反映したline-dasharrayとline-capのスタイリング
今回のリリースでは、line-dasharrayおよび line-capプロパティに、データ値を反映したスタイリングを利用できるようになりました。例えば、破線スタイルを使って閉鎖された道路を表現し、またその情報を交通情報として同じレイヤーに保持することができます。加えて、これまで6つのレイヤーを必要としていた国の境界線や道路のレイヤーも、わずか2つのレイヤーでスタイリングできるようになりました。これにより、レイヤーの設定や管理にかかる時間を短縮することができます。
v2.3.0へのアップグレード
Mapbox GL JS v2.3.0は、CDNおよびnpmで提供されています。v2.3.0へアップデートするには、HTMLファイルの<head>ブロックに以下のコードを記述してください。
また、今回リリースされたGL JS v2.3.0の新機能や改善はMapbox Studioでもご利用いただけます。3Dプロパティからfogを有効にし、霧の表現を試してみてください！（以下動画はfogの追加方法）
その他、変更点の詳細については、v2.3.0のリリースノートをご覧ください。
＊本記事はMapbox Inc. Blogの翻訳記事です。
