リリース

Mapbox GL JS v2.3.0

見出し

これはレイアウト確認用のダミーテキストです。

距離フォグ、標高クエリ、地形パフォーマンスの改善

距離フォグ、標高クエリ、地形パフォーマンスの改善
日付
2021年6月3日
執筆者
Karim Naaji
Ricky Reusser
Mapbox
推定読了時間
0
記事を共有
LinkedInで記事を共有
Xで記事を共有
Facebookで記事を共有
BlueSkyで記事を共有
始めましょう
無料でサインアップ
→
    お問い合わせ    

新しい3D機能、いくつかのパフォーマンス改善、および拡張されたデータ駆動型スタイリングの可能性を備えたMapbox GL JS v2.3をリリースしました。フォグは地図に奥行きを与え、デザイナーは新しいデータ駆動型スタイリングプロパティでスタイルを簡素化でき、開発者は標高データをクエリして地形標高プロファイルを生成できます。

霧

今回のリリースでは、地図の視覚効果を向上させる微妙なレンダリング効果であるフォグを導入します。距離に応じてオブジェクトをフェードさせることは、距離を認識するために使用する重要な視覚的な手がかりです。

霧を使用すると、地図デザイナーはスタイルに大幅な奥行きを追加したり、デザインで特定のムードに合わせたりする方法を新たに得ることができます。開発者は、このエフェクトが遠距離でロードされるタイルの数を減らすエレガントな方法であるため、霧を活用して地図を最適化することもできます。

Fogのスタートガイド

地図にフォグを追加するのは非常に簡単です。これはルートスタイルプロパティであり、map.setFog(..)で直接アクセスできます。フォグの色、フォグが有効になり消散する視覚的な距離を調整する範囲、および地平線でのブレンドを制御するホライズンブレンドという3つの異なるコントロールが付属しています。

map.setFog({
    range: [2, 12],
    color: "white",
    "horizon-blend": 0.1
});

詳細なドキュメントについては、Style Specificationを参照してください。または、サンプルをチェックして開始してください。

クライアント側の標高クエリ

Digital Elevation Model（DEM）タイルを使用して、クライアント側の標高クエリを容易にする新しいAPIを追加しました。この新しいAPIは、サーバー側のリクエストを発生させることなく、地形レンダリングにすでに利用可能なDEMデータを直接使用するため、リクエストが非常に高速になります。

単一の標高クエリはmap.queryTerrainElevation(lnglat)で使用でき、追加のネットワークリソースやサービスを使用せずに標高プロファイルを生成できます。

詳細なドキュメントについては、APIリファレンスを参照してください。または、サンプルをチェックして開始してください。

パフォーマンス

地形によるGPUメモリフットプリントの削減

Mapboxは、地図ビューポートのすべての表示タイルで共有レンダーバッファーを使用することにより、地形のGPUメモリフットプリントを削減しました。この最適化により、クライアントアプリケーションで最大200MBのメモリを節約でき、アップグレード後、開発者は変更なしで利用できます。

地形に合わせて最適化されたタイルカバー

地形が有効になっている場合のタイルカバーを改善しました。高ズームおよび高ピッチ角のビューでは、DEMタイルリクエストの数を約35％削減することで、メモリと速度を最適化しました。これは、ビューアーが地面に近く、カメラがドライバーの視点に合わせて高い角度に傾けられている運転状況で特に影響を与える可能性があります。

負荷の高いDOM操作のフレーム単位でのバッチ処理

多くのDOM操作を扱うアプリケーションでは、パフォーマンスの問題が発生する可能性があります。DOMレンダリングキューを使用することで、このリリースでは、更新を統合し、フレームごとに1回適用することで、潜在的なリフローを削減します。マーカー、ポップアップ、その他のDOMベースのマップ要素は、更新パフォーマンスが5〜10倍向上する可能性があります。

line-dasharrayとline-capのデータドリブンなスタイリング

新しいリリースでは、line-dasharrayプロパティとline-capプロパティで、データ駆動型スタイリングを利用できるようになりました。たとえば、ダッシュスタイリングを使用して閉鎖された道路を表し、交通情報と同じレイヤーに情報を保持できます。以前に6つのレイヤーが必要だった可能性のある国境または道路レイヤーは、わずか2つのレイヤーでスタイル設定できるようになりました。この削減により、レイヤーの構成と管理に費やす時間を節約できます。

"line-dasharray": [
    "match",
    ["get", "route_status"],
    ["closed"], ["literal", [2, 2]],
    ["literal", [1]]
]

v2.3.0へのアップグレード

Mapbox GL JS v2.3.0 is available on CDN and NPM. To update, include the following code in the <head> block of your HTML file:

<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css" rel="stylesheet" />

GL JS v2.3.0が統合され、現在Mapbox Studioで利用可能です。3Dプロパティで機能を有効にすると、スタイルでフォグの使用を開始できます。

変更点の詳細は、v2.3.0のリリースノートをご覧ください。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。
著者
ゲスト
Karim Naaji
シニアグラフィックスエンジニア
ゲスト
Ricky Reusser
Mapbox
タグ
GL JS
3D
地図

関連記事