【OSS】JavaScript 地図ライブラリまとめ

はじめに

この記事は#30DayMapChallenge2022 30日目の記事です。
テーマはRemixです。
主要なOSSのJavaScriptマップライブラリを主観でまとめてみます。

Leaflet

特徴

軽量ですが、必要な地図機能を網羅しています
デスクトップとモバイルの主要なプラットフォームで動作します。

個人的な印象

地図の作成、マーカーの表示など簡単な表示であればコード量も少なくさくっと実装できます。
初心者向けかなと思います。

地図表示

OpenStreetMapのラスタタイルを表示します。

let map = L.map('map'); // 地図の生成
map.setView([35.7122128, 139.7779244], 15); // 緯度経度、ズームレベルを設定する

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

OpenLayers

特徴

地図タイル、ベクトルデータ、マーカーを表示することができます。
ベクトルタイルも表示できます。
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされています。

個人的な印象

他のライブラリと比べると、少々コードが煩雑になります。
GISの基礎知識が必要になります。
投影法を指定したり、タイルを切り出せたりと、高機能なのでGIS技術者に向けかなと思います。

地図表示

new ol.Map({
    layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
    view: new ol.View({
        center: ol.proj.transform([139.7779244, 35.7122128], 'EPSG:4326', 'EPSG:3857'),
        zoom: 15,
    }),
    target: 'map',
});

MapLibre GL JS

特徴

Mapboxのオープンソースフォーク版です。
WebGLを使用してベクトルタイルとMapLibreスタイルからインタラクティブなマップをレンダリングできます。
3DモデルやMVTの表示も可能です。

個人的な印象

レイヤをスタイルファイルでカスタマイズできるのがよいです。
ベクトルタイルのこのデータだけ欲しい～みたいな時に便利です。Tippecanoeはちょっととっつきづらい。（私もまだ慣れていない）
Leafletよりも少し複雑ですが、OpenLayersほど複雑ではない印象です。
私の推しライブラリです。サンプルコードも見やすい！

地図表示

OpenStreetMapのベクトルタイルを表示します。

var map = new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.7779244, 35.7122128], // 中心座標
    zoom: 15, // ズームレベル
    pitch: 0, // 傾き
});

CesiumJS

特徴

世界クラスの3D地球儀と地図を作成できます。
3Dモデルや3D Tilesの表示も可能です。

個人的な印象

PLATEAUデータを表示するにはCesiumがメジャーな気がしています。
PLATEAU Viewにも採用されてます。
上3つのマップライブラリは書き方が似ていますが、CesiumJSは独特な書き方な感じがします。
3Dに関してはかなり高機能で、サンプルコードを見るとかなりリッチな表現ができそうです。

地球儀表示

// Cesium ionのアクセストークン
Cesium.Ion.defaultAccessToken = 'your_access_token';

// Cesium ViewerをcesiumContainerというIDのHTML要素に初期化
const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
});
// 初期表示時のカメラ位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(139.7779244, 35.7122128, 25000000),
});

参考文献