Leafletの地図上に、画像を重ね合わせて表示するサンプルプログラムです。
サンプルプログラムでは、Stanford Digital Repositoryで公開されている国土地理院の昭和初期に発行された旧版地図を重ね合わせてみました。
Leafletの地図上に、画像を重ね合わせて表示するサンプルプログラムです。
サンプルプログラムでは、Stanford Digital Repositoryで公開されている国土地理院の昭和初期に発行された旧版地図を重ね合わせてみました。
HTML、CSSのソースは、地図にボタンを表示と同じです。
初期処理で地図を作成後に、ImageOverlayクラスで、画像ファイル名と、画像の右下と左上の緯度経度を指定してオーバーレイレイヤを作成します。
オプションとして、透過度などが指定できます。
作成したオーバーレイレイヤをmapに登録すれば、画像を重ね合わせて表示することができます。
サンプルプログラムで利用している、旧版地図には緯度経度が掲載されています
しかし、この緯度経度は日本測地系の緯度経度ですので、世界測地系に変換して設定しないと地図がずれてしまいます。
サンプルプログラムでは、画像ファイルの透過度を変更するためのスライダも追加しています。
スライダのchangeイベントを取得し、スライダの値によって、opacityの値を変更しています。
この処理を行うため、地図画像レイヤ（layer）と透過度スライダ要素（input）の2つのプロパティをグローバル変数として定義しています。
サンプルプログラムでは、スライダをプログラムで作成していますが、HTMLとして記述しても構いません。HTMLで記述する場合は、ID属性を追加してスライダ要素を取得することで、同等の処理を行うことができます。
var map; // leaflet地図
var bound; // 表示領域（全体表示で表示される範囲）
var layer; // 地図画像レイヤ
var input; // 透過度スライダ要素
function init() {
map = L.map('map_container', { zoomControl: false });
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院標準地図</a>"
}).addTo(map); // 地理院地図を表示
L.control.scale({imperial:false, position: 'bottomright'}).addTo(map); // 目盛表示
L.control.zoom({position: 'bottomright'}).addTo(map); // ズーム制御
bound = [[36.669731, 136.499784], [36.503086, 136.749781]]; // 地図画像の範囲
layer = L.imageOverlay('img/kanazawa_img.jpg', bound, {opacity: '0.7'});
layer.addTo(map); // 画像ファイルの重ね合わせ
map.fitBounds(bound); // 日本本土の範囲を表示
input = document.createElement('input');
input.type = 'range'; // スライダ
input.min = 0; // 最小値:0%
input.max = 100; // 最大値:100%
input.value = layer.options.opacity * 100; // 初期値は100%
input.onchange = chgOpacity; // changeイベントにCB関数を登録
let btn = document.getElementById('btn_container');
btn.appendChild(input);
}
function chgOpacity() {
layer.setOpacity(input.value / 100.0); // 透過度変更
}
ちなみに、この画像オーバーレイレイヤ（ImageOverlay）は、タイルレイヤ(TileLayer)と同等に扱うことがきます。 ですから、複数の地図の切替と透過表示の、オーバーレイマップの定義に追加すれば、Leafletの地図切替コントロールで画像の透過度変更が可能となります。