Leaflet 学習ラボ VOL.1 を作成しました

はじめに

LeafletでWebGISの基礎を学ぶための静的Web教材として、Leaflet 学習ラボ VOL.1 を作成しました。

こちらの弊社のサブドメインで公開しています。

この学習ラボは、Webブラウザ上で地図を表示し、背景図、マーカー、GeoJSON、ポップアップ、凡例、レイヤ制御などを段階的に確認するための教材です。

OpenLayersと同様に地理院タイル、GeoJSON、ポップアップ、凡例、作図、QGIS・Python連携など、実務のWebGISデモにつながる内容を、順番に確認できる構成としています。

作成したもの

Astroで作成した静的なLeaflet学習サイトです。

主な内容は以下です。

• Leafletのチュートリアル Lab 01〜12
• ブラウザ上で確認できる地図演習ページ
• 地理院タイルを使った背景図表示
• GeoJSONサンプルデータ
• コード例
• 用語集
• 参考リンク集
• 防災GIS風のサンプルデモ

Leafletは軽量で扱いやすいため、まずWebGISを学ぶ入口として使いやすいライブラリです。

学習Labの内容

VOL.1では、以下の内容を扱います。

Lab	内容
Lab 01	はじめての地図表示
Lab 02	表示位置・ズーム・座標
Lab 03	タイルレイヤーと背景図
Lab 04	マーカー・ポップアップ・ツールチップ
Lab 05	GeoJSONの読み込みとスタイル
Lab 06	レイヤー制御と凡例
Lab 07	クリックイベントと属性表示
Lab 08	クリック入力・作図・簡易計測
Lab 09	XYZ・TMS・WMSの考え方
Lab 10	QGIS・Python出力GeoJSON連携
Lab 11	パフォーマンスと描画最適化
Lab 12	防災GISデモへの展開

単に地図を表示するだけでなく、GISデータを読み込み、属性値で色分けし、クリックで情報を確認するところまでを対象にしています。

VOL.1で重視したこと

今回のVOL.1では、次の点を重視しました。

• L.map、L.tileLayer、setViewの関係を最初に整理する
• Leafletで使う緯度経度の指定方法を確認する
• 地理院タイルやOpenStreetMapなどの背景図を切り替える
• マーカー、ポップアップ、ツールチップを使って地点情報を表示する
• GeoJSONを読み込み、属性値に応じてスタイルを変える
• レイヤー制御、凡例、クリックイベントを組み合わせる
• QGISやPythonで作成したGeoJSONをWeb地図へつなげる
• 防災GIS風の簡易デモ画面へ展開する

Leafletはシンプルに書ける一方で、座標の順番、GeoJSONの扱い、表示負荷、タイル利用条件などは意識する必要があります。

そのため、VOL.1ではプラグインに頼りすぎず、Leaflet本体の基本機能を中心に整理しました。

VOL.2で扱う予定のテーマ

VOL.1では扱わない発展テーマは、VOL.2で学ぶ想定です。

• Leafletプラグインの活用
• MarkerClusterによる大量点データ表示
• Leaflet.drawなどによる作図機能
• WMTSや高度なタイル配信
• ベクトルタイル
• GeoServerやAPIとの連携
• 公開運用、キャッシュ、パフォーマンス対策
• 防災・水理水文解析結果のWebGIS配信

まずVOL.1では、静的ファイルとブラウザだけで理解できるLeafletの基本を固める位置づけです。

OpenLayers版との使い分け

今回のLeaflet版は、先に作成したOpenLayers版と同じWebGIS学習ラボですが、位置づけは少し異なります。

項目	Leaflet	OpenLayers
学びやすさ	シンプルで入門しやすい	機能が多く本格的
基本用途	軽量な地図表示、簡易WebGIS	複雑なWebGIS、配信サービス連携
コード量	少なめ	やや多め
向いている用途	教材、簡易デモ、確認画面	実務寄りの高度な地図画面

最初にLeafletでWebGISの基本を学び、その後OpenLayersでより高度な構成に進む、という学習順序も良いと考えています。

実行方法

ローカル(wsl環境)で確認する場合は、以下の流れです。
今後gitに公開する予定です。少々お待ちください。

npm install
npm run dev

静的ファイルとして出力する場合は、以下です。

npm run build

dist/ に静的ファイルが出力されます。

Windows環境では、同梱している以下のバッチファイルも利用できます。

setup_install.bat
run_dev.bat
build_static.bat

技術構成

主な構成は以下です。

区分	内容
フロントエンド	Astro
地図ライブラリ	Leaflet
表示形式	静的HTML
背景図	地理院タイル、OpenStreetMapなど
GISデータ	GeoJSON
主な機能	地図表示、マーカー、ポップアップ、レイヤ制御、凡例、作図入口

静的サイトとして構成しているため、サーバーサイド処理を用意しなくても、教材や簡易デモとして公開しやすい形になっています。

注意事項

この学習ラボは、Leafletの基礎を学ぶための教材・プロトタイプです。

実務システムとして利用する場合は、地図タイルの利用規約、データ容量、描画負荷、座標系、属性情報の取り扱い、セキュリティ、公開運用方法などを別途確認する必要があります。

特に防災GISや行政向けの公開デモでは、凡例、注記、出典、更新日、利用条件を分かりやすく表示することが重要です。

まとめ

今回は、LeafletでWebGISを学ぶための 学習ラボ VOL.1 を作成しました。

公開先はこちらです。

VOL.1では、地図表示、座標、背景図、マーカー、GeoJSON、ポップアップ、レイヤ制御、作図入口、QGIS・Python連携、防災GIS風デモまでを整理しました。

今後はVOL.2として、Leafletプラグイン、クラスタリング、作図、WMTS、ベクトルタイル、GeoServer連携など、より実践的なWebGIS構成へ拡張していく予定です。

OpenLayers版の学習ラボも公開しています。