Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

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


はじめに

これは現在作成しているウェブ上で動作する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);  //追加と同時に表示したい場合に記述