背景地図を切り替えるコントロール追加します。
L.control.layers(_baseMaps).addTo(_map);使い方
１．背景地図オブジェクトを作成する
背景地図タイルには、国土地理院やオープンストリートマップ、Googleマップ等、様々存在します。
//国土地理院の標準地図
var _gsi_std =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>"
});
２．レイヤーリストオブジェクトを作成
//baseMapsオブジェクトに背景地図レイヤーを設定
var _baseMaps = {
"国土地理院標準地図" : _gsi_std,
"国土地理院淡色地図" : _gsi_pale,
"オープンストリートマップ" : _osm,
"Googleマップ" : _google_std,
"Googleマップ衛星写真" : _google_sate
};３．Layerコントロールへレイヤーリストオブジェクトを設定する
//layersコントロールにbaseMapsオブジェクトを設定
L.control.layers(_baseMaps).addTo(_map);
全体コード
<html lang="ja">
<head>
<title>Leafletの背景地図の切り替え</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script>
//表示位置を設定
var _map = L.map('map');
//初期表示時に中心座標とズームレベルを設定
_map.setView([35.6895, 139.69172], 10);
//国土地理院の標準地図
var _gsi_std =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>"
});
//国土地理院の淡色地図
var _gsi_pale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
});
//オープンストリートマップ
var _osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',{
attribution: "<a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a>"
});
//Googleマップ
var _google_std = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}',{
attribution: "<a href='https://developers.google.com/maps/documentation' target='_blank'>Google Map</a>"
});
//Googleマップ衛星写真
var _google_sate = L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
subdomains: ['mt0','mt1','mt2','mt3'],
attribution: "<a href='https://developers.google.com/maps/documentation' target='_blank'>Google Map</a>"
});
//baseMapsオブジェクトに背景地図レイヤーを設定
var _baseMaps = {
"国土地理院標準地図" : _gsi_std,
"国土地理院淡色地図" : _gsi_pale,
"オープンストリートマップ" : _osm,
"Googleマップ" : _google_std,
"Googleマップ衛星写真" : _google_sate
};
//layersコントロールにbaseMapsオブジェクトを設定
L.control.layers(_baseMaps).addTo(_map);
//初期表示時の地図レイヤーを設定
_gsi_std.addTo(_map);
</script>
</body>
</html>
コメント