Leaflet.jsでオーバーレイを追加する

はじめに

路線バスのShapefile(zip圧縮)を読み込んで表示する動画　なおGeoJSONエクスポート機能も実装済み　保存機能も実装はしているもののまだまだ完成は遠い　それなりに大きいデータでもそこそこの速度で動作しているのがうれしい #GIS #Leaflet pic.twitter.com/iWx9flmY7f

— Kanahiro@Labo288 (@kigchi999) 2019年6月9日

これは現在作成しているウェブ上で動作するGISのサンプル動画です。
空間データ（現在GeoJSONとShapefile（zip化されたもの）に対応）をドラッグドロップする事でLeaflet上に図形を描画する機能を実装しています。
過去の記事でShapefileをGeoJSONに変換してGeoJSONをLeafletに追加する方法を紹介しました。本記事ではそれを「オーバーレイ」として追加する方法を紹介します。

オーバーレイとベースマップ

Leafletではoverlayとそれ以外（basemap）を別物として扱います。オーバーレイはオンオフ出来るレイヤーで（複数表示可）、ベースマップはいくつかあるうち必ずひとつを選択して表示するレイヤーです。したがって、OpenStreetMapなどのような「地図」をベースマップとして、ユーザーが追加するような空間データはオーバーレイで扱うべきです。

レイヤーコントロール

レイヤーコントロールとは、上記の動画でいうと右上にあるレイヤー一覧の事です。以下のとおり定義します。

//レイヤーコントロールを追加：引数1ベースマップ、引数2オーバーレイレイヤー
var layerControl = L.control.layers(baseMap,overlayLayer,{"collapsed":false,});
layerControl.addTo(map);

ここで引数としてベースマップとオーバーレイが明らかに区別されます。
したがって

//ベースマップを定義
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
var kokudoLayer = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',{
    attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
var baseMap = {
	"OpenStreetMap":osmLayer,
	"国土地理院オルソ":kokudoLayer,
};
//オーバーレイレイヤーを定義
var kokudoContourLayer = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/slopemap/{z}/{x}/{y}.png',{
	attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
});
kokudoContourLayer.setOpacity(0.65);
var overlayLayer = {
	"傾斜量図":kokudoContourLayer,
}

このように区別して定義しておく必要があります。
レイヤーコントロールは強力で、これだけ書けばレイヤー選択のGUIが完成します。
後からレイヤーを追加する場合は以下のとおりです。

//GeoJSONレイヤーをオーバーレイレイヤーに追加
layerControl.addOverlay(geojsonLayer,geojsonLayer.name);
map.addLayer(geojsonLayer);  //追加と同時に表示したい場合に記述