 |
 |
|
本連載は、「システム開発」をテーマとしたコーナーです。フォーラムエイトのシステム開発の実績にもとづいて、毎回さまざまなトピックを紹介していきます。第24回は、Webアプリ用地図ライブラリの紹介をします。
Webアプリ用地図ライブラリの紹介
はじめに
Webサイトやアプリで日常的に見かける地図を支えているのが地図ライブラリです。道案内だけでなく、避難経路の表示やGPSを用いた現在地の表示など、地図表示は様々な場面で使用される事の多い汎用的な機能です。汎用的である分、地図ライブラリの選定は重要であり、それぞれの特徴を押さえる必要があります。
そこで今回は、主要な4つのWebアプリ用地図ライブラリ（以下：地図ライブラリ）をご紹介します。
地図ライブラリについて
（1）地図ライブラリとは
地図ライブラリとは、数行のコードを追加するだけで様々な地図を表示できる便利な部品のようなものです。また、地図を細分化してタイルのように貼り合わせて表示するレイヤー（タイルレイヤー）や、図形をベクトル形式で描画するレイヤー（ベクトルレイヤー）、該当する地点をアイコン等で表示（マーカー表示）など、様々な機能を有しています。
（2）紹介する地図ライブラリ
本稿では、以下の4つの地図ライブラリについて紹介します。いずれも、タイルレイヤー表示、ベクトルレイヤー表示、マーカー表示などに対応しています。
名称 |
主な表示対象 |
ライセンス |
最新バージョン |
Leaflet |
2次元地図 |
2条項 BSD License |
v1.9.4 |
OpenLayers |
2次元地図 |
2条項 BSD License |
v7.5.1 |
CesiumJS |
2次元地図 |
Apache License, Version 2.0 |
v1.108 |
MapLibre GL JS |
2次元地図 |
3条項 BSD License |
v3.3.1 |
表1 地図ライブラリの比較
地図ライブラリごとの特徴
（1）Leaflet
Leaflet※1は、2011年にリリースされた2次元地図を表示できるライブラリです。ファイル容量が軽量なのが一番の特徴で、JavaScriptファイルの容量は144KBです。Leafletと同様に2次元地図の表示に特化しているOpenLayersは732KBであり、約5分の1以下の容量になっています。Leafletを使用して、地理院タイル※2を地図画像として表示する場合のコード例を以下に示します。
<link href="https://unpkg.com/leaflet@latest/dist/leaflet.css"
rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
<script>
L.map('map', // 地図を表示するhtml要素のidを指定
{
// レイヤーをセット
layers: [
// 表示するタイルレイヤーのURLを指定
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png')
],
// 初期表示時の地図の中心位置とズームレベルを指定
center: [35, 138],
zoom: 5
}
);
</script>
（2）OpenLayers
OpenLayers※3は、2006年にリリースされた2次元地図を表示できるライブラリです。Leafletと異なり、デフォルトで適用される座標系はWebメルカトル座標系であるため、緯度経度で表された座標（地理座標系）を適用する場合は使用例に記述しているように座標系の変換が必要です。OpenLayersを使用して、地理院タイルを地図画像として表示する場合のコード例を以下に示します。
<link href="https://unpkg.com/ol@latest/ol.css"
rel="stylesheet" />
<script src="https://unpkg.com/ol@latest/dist/ol.js"></script>
<script>
new ol.Map({
// 地図を表示するhtml要素のidを指定
target: 'map',
// レイヤーをセット
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
// 表示するタイルレイヤーのURLを指定
url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
})
})
],
// 初期表示時の地図の中心位置とズームレベルを指定
view: new ol.View({
// 座標系を変換
center: ol.proj.transform([138, 35], 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});
</script>
※Webブラウザでの表示についてはLeafletとほぼ同様のため、画像は割愛します。
（3）CesiumJS
CesiumJS※4は2012年にリリースされたライブラリです。2次元地図だけでなく、地球を球体として3次元で表示できるのが特徴です。地形の3次元表示、3DTilesやgltfなどの3次元モデルを容易に表示できます。さらに、時系列データの表現が可能であり、様々な操作パネルをデフォルトで追加できます。また、Cesium ionという有償のサービスを利用することで、デフォルト地形の追加などの様々な機能を使用できます。CesiumJSを使用して、地理院タイルを地図画像として表示する場合のコード例を以下に示します。
<link href="https://unpkg.com/cesium@latest/Build/Cesium/Widgets/widgets.css
rel="stylesheet"/>
<script src="https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js"></script>
<script>
new Cesium.Viewer('map', // 地図を表示するhtml要素のidを指定
{
// レイヤーをセット
imageryProvider: new Cesium.OpenStreetMapImageryProvider({
// 表示するタイルレイヤーのURLを指定
url: 'https://cyberjapandata.gsi.go.jp/xyz/std/',
fileExtension: 'png'
}),
// ionの認証処理が呼ばれないよう2つのプロパティにfalseをセット
baseLayerPicker: false,
geocoder: false
}
).camera.setView({ // 初期表示時のカメラ位置を指定
destination: Cesium.Cartesian3.fromDegrees(138, 35, 3000000)
})
</script>
上記のコードをWebブラウザで表示した場合を以下に示します。Cesiumでは球体に地図が貼り付けられるため、地面が球体であることが確認できます。
（4）MapLibre GL JS
地図ライブラリであるMapBox GL JSがv2から有償になったことに伴い、有償化前のバージョン（v1.13.0）から分岐し、2021年にリリースされたのがMapLibre GL JS※5です。2次元地図のほか、地形の3次元表示が可能です。また、three.js、babylon.jsといったWebGLライブラリを利用して3Dモデルをレイヤーに追加することも可能です。MapLibre GL JSを使用して、地理院タイルを地図画像として表示する場合のコード例を以下に示します。
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
rel="stylesheet"/>
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<script>
new maplibregl.Map({
container: 'map', // 地図を表示するhtml要素のidを指定
style: {
version: 8,
sources: {
std: { // レイヤーを定義
type: 'raster',
// 表示するタイルレイヤーのURLを指定
tiles: [
'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
],
tileSize: 256
}
},
layers: [ // 定義したレイヤーをセット
{
id: 'std',
type: 'raster',
source: 'std'
}
]
},
// 初期表示時の地図の中心位置とズームレベルを指定
center: [138, 35],
zoom: 4
});
</script>
上記のコードをWebブラウザで表示し、視点を変更させた場合は以下の通りです。CesiumJSとは異なり、地面は平面ですが3次元的に視点を変更できています。
おわりに
今回は無償で利用できるWebアプリ向けの地図ライブラリを4つご紹介しました。コード例・表示例では、タイルレイヤーを表示するという最小限の機能に関してご紹介しましたが、マーカー表示や3次元形状の表示、地図表示の操作やイベントハンドリングなど多彩な機能が用意されています。また、用途に応じて複数のライブラリを使い分けることも有用です。2次元地図は軽量であるLeaflet、3次元形状を表示する際はCesiumJSと、それぞれ1つのアプリ内で使用するなどの使い分けが行えます。
注釈
※1 Leaflet https://leafletjs.com/（閲覧日2023/08/31）
※2 地理院タイル https://maps.gsi.go.jp/development/ichiran.html（閲覧日2023/08/31）
※3 OpenLayers https://openlayers.org/（閲覧日2023/08/31）
※4 CESIUM https://cesium.com/platform/cesiumjs/（閲覧日2023/08/31）
※5 MapLibre https://maplibre.org/（閲覧日2023/08/31）
（Up&Coming '23 秋の号掲載）
|
||||||||
 Up&Coming |
