地図閲覧ライブラリ Leaflet の紹介 （運用事例も紹介）
ビジュアルエンジニアリング事業部のササキです。
今回は、Web上の地図閲覧ライブラリである Leaflet を紹介します。
1 Leafletとは
Leafletは、Webブラウザ上で動作する地図閲覧ライブラリです。オープンソースのJavascriptライブラリとなります。
地図閲覧ライブラリは、GIS（地理情報システム）の技術の一部です。
GISは、位置に関するデータを加工し、管理し、地図を作成し、分析をするためのシステム技術の総称です。
私見も含めて、Leafletには以下の特徴があります。
● Leafletの特徴
1. ライブラリが軽量
2. 一定の条件のもと無償で商用利用可能（BSD-2-Clauseライセンス）
3. ライブラリに地図タイル画像は含まれない
4. 2Dレンダリングのみに対応（3Dレンダリングはしない）
5. 必ず北が画面上辺になる（基本機能では回転がサポートされない）
6. 習得が容易
7. カスタマイズも容易
8. プラグイン(有償・無償)が充実
9. クライアントキーが不要
※（Google Map API / Yahoo! Open Local Platformではキーが必須）
10. 他ライブラリに比べて、マーカーを表示しすぎると極端に重くなる
地図閲覧ライブラリには、Leaflet（パッケージ名leaflet）以外にも、Mapbox（mapbox-gl）※1、MapLibre（maplibre-gl）、OpenLayers（ol）があります。
Leafletは、2011年に初版がリリースされたライブラリで、MapboxやMapLibreのベースのプロジェクトでもあります。
npmのライブラリダウンロード数を見ると、Leafletのダウンロード数はMapboxと拮抗していて、利用者の多いライブラリと言えるでしょう。
北が上の2D地図をWeb上に表示したい場合、ストレスなく実装が可能な Leaflet がおすすめです。
2 データセット
Leaflet（あるいは地図閲覧ライブラリ全般）には、データは含まれません。別に用意したデータを利用します。
2.1 地図タイル画像・ラスター情報
タイル画像は、浴室の壁面に貼るタイルのように格子状に配置する画像のことです。一般にタイル画像の1つのタイルは正方形で扱います。（この節の最後にタイル画像の例があります。）
タイル画像は、他の画像同様に、画像を小さな点（ピクセル）の集まりとして、1点1点の色味を記述するラスターとして表されます。
一般にラスターの編集は、処理の負荷が大きいため、サーバーにストアされた画像をそのまま使います。
Leafletでは、縦256pixels×横256pixelsの画像を、ズームレベルごとに一定のルールで命名した地図の画像ファイルとして用意します。※2
地球の表面をどのように正方形のタイル画像にするのか、あるいは閲覧時のズームレベルはどのように設定するのか等については、Leafletのチュートリアルが詳しいので、こちらをご覧ください。
一定の条件のもと、無償で利用できる地図タイル画像として、以下のサービスがあります。（タイル画像の種別によっては、商用だと有償となることがあります。利用の際にはライセンス条項や規約をお確かめください。）
● OpenStreetMap
→LeafletからOpenStreetMapを利用したサンプル
● 国土地理院地図
→Leafletから国土地理院地図を利用したサンプル
国土地理院地図の標準タイル画像の例を図1、図2に示します。
x:56 y:25 zoom:6 https://cyberjapandata.gsi.go.jp/xyz/std/6/56/25.png
左上x:112 y:50 zoom:7 https://cyberjapandata.gsi.go.jp/xyz/std/7/112/50.png
右上x:113 y:50 zoom:7 https://cyberjapandata.gsi.go.jp/xyz/std/7/113/50.png
左下x:112 y:51 zoom:7 https://cyberjapandata.gsi.go.jp/xyz/std/7/112/51.png
右下x:113 y:51 zoom:7 https://cyberjapandata.gsi.go.jp/xyz/std/7/113/51.png
ズームレベルが6（図1）とズームレベル7（図2）を比べると、同じ地球上の範囲を示すために4倍の画素（ピクセル）が必要であることがわかります。
また、図2 上部中央の「長野」が左右に分かれているように、1枚の画像をあらかじめ書き込みタイル状に分割しています。
2.2 GeoJSON・ベクター情報
Leafletでは、緯度や経度の座標（位置）とそれに付帯する情報を地図上に表現することができます。前述のラスターに対して、座標情報はベクター形式の情報といいます。
ベクター形式は、閲覧ライブラリでリアルタイムに加工して、画像に変換することができます。
横浜・富士山・伊豆大島を結ぶポリゴンを、緯度・経度で指定して描画した例を図3に示します。このポリゴンは、Javascript上で図4に示すコードを呼ぶだけで表現でき、ズームレベルを変えても整合性を保ったまま描画されます。
const polygon = L.polygon([
[35.450, 139.634],
[35.360, 138.732],
[34.751, 139.355]
]).addTo(map);
図4 Leafletにおけるポリゴン指定の例
この座標情報は、GeoJSONというフォーマットで扱うことができます。
システム内では別の形式で持つことも多いのですが、GeoJSONで保存してあると、GISを扱う他のシステムでも容易に扱うことができます。
{
"type" : "polygon",
"coordinates" : [
[
[35.450, 139.634],
[35.365, 138.732],
[34.751, 139.354]
]
]
}
図5 GeoJSONの例
3 運用事例
3.1 ちょっと変わった運用事例
それでは、私が普段の業務でLeafletをどのように使っているかをご紹介します。実は、地球上の地理情報を表現するためにLeafletを使っているわけではありません。
とある工場に導入された検査装置が撮影した検査画像を閲覧する目的で使っています。360度の方向から検査対象を撮影し、一度繋ぎ合わせ、タイル画像に分割して保存しておきます。閲覧時には、このタイル画像を用いて俯瞰して見たり、微細に見たりすることができるシステムとなるわけです。
具体例をお見せすることは難しいのですが、Leafletでは検査対象を地球に見立てて表現することになります。
3.2 その他の事例
Leafletでは、地球上の緯度や経度の座標以外にも、直交座標系、つまり単純なx軸/y軸の座標系で閲覧できるモードがあります。
平面で撮影した検査画像については、直交座標系でLeafletを扱っています。
4 おわりに
いかがでしょうか。
思ったよりも簡単にWeb上に地図閲覧する機能を構築できるLeaflet。地図はもちろん、運用事例にあるように、地図以外の分野でも導入可能なライブラリです。機会がありましたら触ってみてください。
また、業務とは関係はないのですが、前述の国土地理院のWebサイトには大変興味深いものが含まれています。最新の地図の他、川の氾濫や崖崩れなどの自然災害発生位置の情報、過去の航空写真などが閲覧できます。ぜひ訪れてみてください。
※1 Mapboxはv2からはライブラリというよりは、同名の企業が提供する有償サービス
※2 256pixelsはデフォルトの値であり、2の累乗pixelsであれば256pixelsでなくても設定変更は可能
最後に、エム・ソフトは一緒に働くメンバーを募集しています！
もしこの記事を見て、エム・ソフトに少しでも興味を持っていただけましたら、以下の採用サイトをご覧ください！
新卒向けのエントリーや、会社説明会などの情報はマイナビサイトをご覧ください！
最後までお読みいただきありがとうございました。