初めに
MapLibre GL JSの簡単な歴史の変遷を調査することにした。
なお、MapLibre GL JSはMapbox GL JSのオープンソース版であるv1.13をフォークして誕生し、現在11,000以上のスターと1,000名を超える貢献者に支えられるオープンソースプロジェクトである。
公式ドキュメントより引用
MapLibre GL JSは、TypeScriptを基盤とし、ブラウザ上でWebGLを用いてベクタータイルおよびMapLibre Style Specificationに準拠したインタラクティブな地図を60fpsという極めて高いパフォーマンスで描画するエンジンである。
環境
- WebGL2対応ブラウザ
- MapLibre GL JS 1.0 〜 6.0
バージョン別アーキテクチャと機能
| バージョン | テーマ | 主な機能とアーキテクチャの変更点 |
|---|---|---|
| v1.x | 基盤構築 | Mapboxトラッキングコードの排除。raster-demの安定化、line-gradientの描画精度向上。 |
| v2.x | 型安全性と3D | TypeScriptへの全面移行。平坦な地図を隆起させる「3D地形（Terrain 3D）」機能の実装。 |
| v3.x | 限界突破 | WebGL2本格採用。Deck.glとのインターリーブ描画（Zバッファ共有）。スタイル遅延ロードと並列パース。D50色空間基準。リアクティブ連携用のtransformCameraUpdateフック。 |
| v4.x | API近代化 | コールバック地獄を解消するPromiseベース（Async Actor）へ移行。UI分離（@maplibre/components）の検討。404/204エラーハンドリングの厳格化。 |
| v5.x | 地球儀とクラウド | EPSG:3857の面積歪みを解消するGlobe Projection（グローブビュー）。HTTP GET Rangeリクエストを活用するCOG（Cloud Optimized GeoTIFF）ネイティブサポート。 |
| v6.x | 次世代規格 | ESM単一配布（Workerのblob:起因のCSP制約解消）。WebGL1廃止。次世代ベクタータイル「MLT」対応。イベントオブジェクトの厳密な型定義化（MapBoxZoomEvent等）。fill-layer-opacityによる重畳時のアーティファクト解消。球面座標系ベースの光源補間。 |
各バージョンで提供される機能やパラメータは、プロジェクトの用途に合わせて指定すること。
※事前にクラウドストレージ等でデータホスティングを行い、COGやMLTのURLを取得しておく必要がある。
※v6環境では古いWebGL1向けの処理が完全に削除されているため、WebGL2環境で実行する必要がある。
v6.0よりUMDバンドル（maplibre-gl.js）が廃止され、ESM（ECMAScript Modules）へ完全一本化されたため、従来の<script>タグを用いたレガシーな読み込み方法は現在使えない。
代替手段として、type="module"の指定や名前空間インポート（import * as maplibregl...）を使用するESMビルド（.mjs）がある。
終わりに
このライブラリを使用しバージョンごとの進化を追うことで、単なる地図表示から「高度にプログラマブルな地理空間レンダリングエンジン」へと環境を移行することができた。3D建築物とライティングの連動などを手動でWebGLを書くよりもはるかに工数が減らせるので、非常に有用なライブラリだと思う。
MapLibreのエコシステムには他にも、中国語・日本語・RTL（右から左へ記述する言語）スクリプトを動的配置する多言語タイポグラフィ対応や、Wasm技術を用いてCAD図面（DWG）をブラウザ上で直接パースし指数補間式でWGS84へマッピングする機能、Deck.glやThree.js/Babylon.jsとの直接統合など非常に有用な機能が多くある。今後もさまざまなAPIやフレームワークを組み合わせて使ってみたいと思う。
#デジタルツインやサーバーレスGISが構築できそう(ペタバイト級の衛星画像をS3にCOG/PMTilesとして配置→ブラウザで直接ストリーミング描画→分析などで使用)
使用にあたってはオープンソースライセンスの範囲内でお使いください。詳細は公式ドキュメントを読んでお使いください。