MapLibre V2:地図に3D地形を追加する
2022年5月19日発行
MapLibre GL JSの第2世代が登場! TypeScriptで書き直され、地図が3Dで表示できるようになりました。これまでのアプリ、スタイル、カスタムマップはすべて継続して動作し、3Dに対応しました。
MapLibre GL JSとは
MapLibre GL JSは、WebGLを使用してベクトルタイルとMapLibreスタイルからインタラクティブなマップをレンダリングするJavaScriptライブラリです。MapLibre GLエコシステムの一部です。
MapLibreの詳細については、MapLibre: Mapbox GL open-source forkの記事をご覧ください。
MapLibre 2の新機能 - 3D Maps & TypeScript
3Dマップ
既存のレイヤーは自動的に調整され、地形に沿うように配置され、マーカーは地面にクランプされます。
DEM（RGBAタイル）からトラック、ラベル、ポイントの描画を含む地形の標高を可視化することができるようになりました。
3次元地形を描画するために、MapLibreは地表を表す3次元の三角形の集合である三角形メッシュを作成します。このメッシュは、DEMから得られる地形データ（RGBAタイル）から作成されます。
デフォルトでは、マップは2Dですが、3Dでマップを表示する機能が追加されました。3Dオプションを有効にするには、地形の標高（RGBAタイル）を含む「raster-dem」ソースを地図に追加する必要があります。
map.addSource("some id", {
"type": "raster-dem",
"url": "https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=YOUR_API_KEY",
});
そして、データソースを示す地図の3D地形を有効にする必要があります。
map.setTerrain({
source: "some id"
});
地形オプションでは、ソースの他に、誇張、elevationOffsetを指示することができる。
- 誇張：標高を表す乗算器。地形をより「極端に」するために使用します。デフォルトは1.0
以下は、地図に2.5倍の誇張をした地形を追加するコード例です。
map.on('load', () => {
map.addSource("terrain", {
"type": "raster-dem",
"url": "https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=YOUR_API_KEY",
});
map.setTerrain({
source: "terrain",
exaggeration: 2.5
});
});
タイプスクリプト
ライブラリ全体をTypeScriptに書き換えています。
MapLibre GL JS全体のソースコードの品質が改善されました。タイプのおかげで、開発者はいくつかのバグを修正し、テストを改善し、より強固になりました。これにより、コードのメンテナンスが容易になり、新しい開発者が貢献できるようになりました。
開発者にとっての最高のニュースは、すべてがAPIレベルで互換性を保ちながら、非推奨のコードが削除されたことです。MapLibreのJavaScript APIや既存のバインディングを使用している場合、何かを変更する必要はありません。
もしあなたがTypeScriptで大きなアプリケーションを開発し、MapLibreと一緒にコンパイルするならば、外部の@types/maplibre-glの代わりに、ライブラリに直接存在する定義済みの型の恩恵を受けることができます。この場合、あなたのコードをアップグレードする必要があります。このアプローチは、将来的にツリーシェイクによるコード削減のメリットももたらします。
機能・改善点
- 3D地形機能を追加する。
- マップを60°以上傾けることができるようになりました。85°までのアンロックピッチのサポートを追加しました（以前は60°）。60はデフォルトの最大値です。それ以上の値を使いたい場合は
maxPitchプロパティを使用します。例maxPitch: 85. - オプション追加
ビューポートグリフまでテキスト回転位置調整は、ラインストリングに沿ってグリフを配置し、それらをビューポートのX軸に回転させる。 - OpenStreetMap Attribution Guidelinesに準拠するため、コンパクトな帰属表示をデフォルトでオープンにする。
- 追加
再描画関数をマッピングします。 - 保留中の GeoJSON リクエストをキャンセルする場合
GeoJSONSource.setData()を実行します。は、保留中のリクエストが完了するのを待ってから新しいURLのリクエストを発行するのではなく、呼び出されます。
ブレイキングチェンジ
- Typescriptへの移行（Typescriptの型付けが一部変更になりました。）
- に関連するすべてのコードを削除しました。
アクセストークンで始まるMapbox固有のURLとmapbox://.テレメトリーとトラッキングコードを削除しました。 - 削除
baseApiUrlは、Mapbox関連のURLのみに使用されていたため。 - 削除
バージョン公開APIから - 非推奨 Internet Explorer は、本リリースからサポートされなくなりました。
- Chrome 49-65のサポートを終了しました。Chrome 66+が必要です。Chrome 49-65のサポートはバージョン1.15.2を使用してください。
新バージョンのすべての変更点は、CHANGELOGでご確認ください。
MapLibreコミュニティ
これらの変更と改良はすべて、コミュニティの努力と協力のおかげです。3Dマップを作成するオプションを追加してくれた@prozessor13と、貢献してくれた@wipfli、@HarelM、@acalcutt、@vanilla-lake、@rendromに特別な感謝を捧げたいと思います。
コミュニティの分断を避け、開発とメンテナンスの努力を結集するために、MapLibreプロジェクトを設立することを決定しました。MapLibre: Mapbox GLオープンソースフォーク - MapTilerでストーリーと技術的な詳細をお読みください。
MapTilerは、運営委員会の一員として、ウェブサイトへの貢献、ドキュメントの作成、SDKのメンテナンスなど、プロジェクトの初期から携わっています。
詳しくは、コミュニティページをご覧ください。
