スタートページJavascriptLeaflet

Leaflet による国土地理院地図の二次加工


地図作成環境

ここでは、国土地理院の地図タイルを、地図加工のフリーソフトである Leaflet およびそのアドオンソフト群を用いて、GoogleMap のような二次加工処理を行います。

国土地理院地図

国土地理院が日本の国土の地形図、写真、標高、地形分類、災害情報などを総合的に提供する公開ライブラリです。

地理院タイル
地図のことです。基本的なタイルに「標準地図」「淡色地図」「航空写真」があり、その他、標高地図、土地利用地図、火山・活断層・治水などの防災地図など多様なタイルを提供しています。→参照:地理院タイル一覧
これらは、出典を明示するだけで、自由に二次加工をすることができます。
地図作成サービス
地理院地図のWebサイトで、これらの地図を多様な機能で閲覧・加工することができます。マーカーや吹き出しの操作などをGUI環境で行えますし、作成した地図の保存や共有もできます。→参照: 初期画面地理院地図操作マニュアル
実務的に便利なサイトですが、ほとんどがGUI操作であり、本シリーズの「JavaScript」の範疇ではないので割愛します。下記のURLを参照してください。
地理院地図Vector(仮称)
利用者が地理院タイルを二次加工して、独自の地図を作成するために、地図情報をベクトルタイル化して、Web上で加工できる地理院地図Vector(仮称)を試験公開しています。 →参照:地理院地図 Vector操作マニュアル

Leaflet

Goole Mapsが自身の地図タイル(地図情報)を持っているのに対して、Leafletは地図タイルは持たず、Goole Mapsや国土地理院が公開している地図タイルを利用して、地図加工を行うソフトウェアです。オープンソースのJavaScriptライブラリで、アプリケーションを構築するためのAPIを提供します。
Leafletは膨大な機能があり、プラグインも多くあります。ここでは、Leafletの「超初歩的」な使い方の説明をします。

Leafletを利用するには、head部に
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
と記述するだけです(@1.7.1はバージョンで逐次改訂されています)。
 さらに、地図を全画面表示/元の画面表示に切り替えるには下のプラグインを用います。
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet'>
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
Goole Maps API と異なりアカウントを取得する必要もありませんし、無料での利用制限もありません。


基本的な機能のサンプル

上記の「参考URL」を参考にして、Leafletの基本的機能のプログラムを自作しました。解説書というよりも、むしろ私個人用のメモです。
次の機能は独立しています。Aの処理結果はBに引き継がれません。

Head部に次のCDNがあります。
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <link rel="stylesheet"href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css">
    <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
Body部に次の表示場所が定義されています。
    <div id="地図表示場所" style="width:400px;height:400px"></div>
    <div id="結果表示場所" style="color: red;"></div>  // 必要なときだけ

地図表示。
クリック場所の座標取得:地図下に赤字で表示されます。
標準アイコンでのマーカー表示。
アイコンの位置:アイコンのどこがマーカー位置に一致するか。(説明図)
標準アイコンの色を変える。出所:pointhi/leaflet-color-markers
アイコン作成:標準以外のアイコンをマーカーにします。
連続画像アイコン:画像名称が連続の場合です。
マーカーの操作:マウス合わせ、クリック時のポップアップなど。
図形表示:線、円、多角形(文字や画像はアイコンとして表示)。