リリース

効率的なピッチタイルローディング、正確なCJKラベル、およびJS Promises：Mapbox GL JS v2.1.1

見出し

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

日付
2021年2月10日
執筆者
Ryan Hamley
Mapbox
推定読了時間
0
記事を共有
LinkedInで記事を共有
Xで記事を共有
Facebookで記事を共有
BlueSkyで記事を共有
始めましょう
無料でサインアップ
→
    お問い合わせ    

Mapbox GL JS v2.1.1をリリースしました。これには、効率的なピッチタイルローディング、CJKラベルのレンダリング精度の向上、3Dインタラクションの強化、マップイベントのJS Promises、およびその他のいくつかのバグ修正と改善が含まれています。

ピッチ角をつけたビューでのタイル読み込みの効率化

地平線の位置をわずかにシフトさせることで、ピッチ角をつけたビューのパフォーマンスを向上させました。新しい動作では、視覚的な違いはほとんどありませんが、表示されるタイルの数が最大20％削減されます。これにより、フレームレートが向上し、ロード時間が短縮され、ピッチ角の高いマップのメモリ消費量が削減されます。

地平線の位置を少し変更するだけで、タイルロードを最大20%改善できます

中国語、日本語、韓国語のラベルのレンダリング時の精度向上

CJK（中国語、日本語、韓国語）のラベルが見やすくなるように、いくつかの変更を加えました。

まず、新しいlocalFontFamilyマップオプションを導入しました。これにより、表語文字（デフォルトでローカルにレンダリングされる）だけでなく、すべての文字に対してローカルフォントレンダリングをオンにできます。これにより、CJKグリフが数字などの他の文字と混在している場合の文字の配置の問題が修正され、そのようなラベルの外観が一貫性のあるものになります。

以前
後

さらに、ローカルでレンダリングされるラベルの解像度が2倍になり、特に小さいフォントサイズで、対応するラベルがより鮮明になり、判読しやすくなりました。以下のビデオでは、v2.1.1で日本語のテキストがはるかに鮮明になり、アーティファクトが少なくなっていることがわかります。

3D地形での描画順序の保持

v2で追加された3D地形は、ユーザーインタラクション中に特定の地図のレンダリングに矛盾が生じるという副作用もありました。3D地形をレンダリングする際、GL JSは可能な限り最高のパフォーマンスを実現するために、複数のレイヤーを1つのバッチでレンダリングしようとします。これにより、レンダリング中にレイヤーが並べ替えられる可能性があります。v2.1.1ではこの問題が修正され、ユーザーインタラクションイベントを含め、一貫したレンダリング体験が提供されます。


レイヤーの順序を維持する必要がある場合は、正しい順序を保証するために、新しいマッププロパティoptimizeForTerrain:falseを設定できるようになりました。

以前の動作では、ユーザーインタラクション中に描画順序が保持されませんでした

ユーザーインタラクション中の新しい挙動、描画順の優先度

‍

3D地形による傾斜地図上で、より適切に地図に合わせたラベル

text-pitch-alignment:”map”を使用する場合、3D地形上のラベルの判読性が向上しました。以前の実装では、地図の傾斜を補正するためにテキストの鮮明さを過剰に調整していたため、特に傾斜の大きいビューでぼやけたテキストが目立っていました。

変更前: ラベルがぼやけている点に注意してください。
変更後: ラベルが読みやすくなりました

3Dマップでのfill-extrusionsのクエリ

map.queryRenderedFeatures()が、3D地形のすべてのレイヤータイプのフィーチャのクエリをサポートするようになりました。これにより、2Dマップで期待されるパフォーマンスでインタラクティブな3Dマップを構築できます。

PromisesとAsync/Awaitと地図イベント

特定のイベントが発生したときに一度だけコードを実行できるmap.onceメソッドは、コールバックを提供しない場合、Promiseを返すようになりました。この小さな変更により、最新のasync/await JavaScriptパターンを使用してGL JSをより人間工学的にプログラミングできるようになり、ネストされたコールバックの混乱を解消できます。

以前:

const map = new mapboxgl.Map({ ... });

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

    map.setTerrain({
        source: 'dem',
        exaggeration: 1.5
    });

    map.on('idle', function() {
        map.flyTo(...);
    });
});

変更後:

const map = new mapboxgl.Map({ ... });

await map.once('load');

map.addSource('dem', {
    type: 'raster-dem',
    url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
});

map.setTerrain({
    source: 'dem',
    exaggeration: 1.5
});

await map.once('idle');

map.flyTo(...);

高ズームレベルでのクラスタ化されたポイントの改善

小さなクラスタ半径が与えられた場合、ポイントがより高いズームレベルでクラスタ化されないことがあり、それらが消えてしまうという、ポイントクラスタリングの問題を修正しました。クラスタリングは、clusterMaxZoomで与えられる最大ズームレベルを含む、すべてのズームレベルで発生するように更新されました。

画像式の評価における競合状態の修正

v2.1.1では、image expressionがマップスタイル内で定義されたレイヤーで使用された場合に発生する競合状態のバグが修正されました。以前は、これらの式がスプライトイメージが利用可能になる前に評価され、イメージのレンダリングに一貫性がなくなる可能性がありました。この新しいリリースでは、イメージ式を評価する前にスプライトが利用可能になることが保証されます。

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

Mapbox GL JS v2.1.1 is available on CDN: include the JavaScript and CSS files in the <head> block of your HTML file to upgrade.

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

‍

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

これはレイアウト確認用のダミーテキストです。
著者
ゲスト
Ryan Hamley
ソフトウェアエンジニア
Mapbox
タグ
GL JS
3D
開発者

関連記事