晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet地図:「国土地理院」と「Esri World Topo Map」に切り替え。サンプルソース。

先ほど、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試した。

この地図を、「OpenStreetMap」から「国土地理院地図」と「Esri World Topo Map」に切り替えできるようにしてみた。以下のサイトを参考にした。

JavaScriptに以下のコードを追加。

var Basic_Map = new Array();
Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	continuousWorld: false
});
Basic_Map[ 1 ] = 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>"
});
Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
	attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
Basic_Map[ 3 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles © <a href="http://www.esrij.com/"> Esri Japan </a>'
});
var baseMap = {
	"OpenStreetMap": Basic_Map[ 0 ],
	"国土地理院 標準地図": Basic_Map[ 1 ],
	"国土地理院 写真": Basic_Map[ 2 ],
	"Esri World Topo Map": Basic_Map[ 3 ]
};
L.control.layers(baseMap).addTo(map);

f:id:art2nd:20210428164346j:plain

国土地理院 標準地図

f:id:art2nd:20210428164400j:plain

国土地理院 写真

f:id:art2nd:20210428164416j:plain

Esri World Topo Map

サンプル >>> https://ok2nd.sakura.ne.jp/leaflet/tokyo-03.html

Leafletで「Google マップ」も使える。(↓)