初めに

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として配置→ブラウザで直接ストリーミング描画→分析などで使用)

使用にあたってはオープンソースライセンスの範囲内でお使いください。詳細は公式ドキュメントを読んでお使いください。

参考サイト

https://maplibre.org/

https://github.com/maplibre/maplibre-gl-js