ソースファイルを表示
sample/sample_image.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Leaflet 画像の重ね合わせ表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
<style type="text/css">
#map_container {
position:absolute;
top:0; left:0; right:0; bottom:0;
cursor: default;
}
#btn_container {
position:absolute;
left:12px; bottom:12px;
z-index: 1000;
display: flex;
}
</style>
<script type="text/javascript" charset="UTF-8">
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;
let btn = document.getElementById('btn_container');
btn.appendChild(input);
}
function chgOpacity() {
layer.setOpacity(input.value / 100.0); // 透過度変更
}
</script>
</head>
<body onload="init()">
<div id="map_container"></div>
<div id="btn_container">
<input type="button" onclick="map.fitBounds(bound)" value="全体表示" />
</div>
</body>
</html>