晴歩雨描

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

Leaflet地図:国土地理院「色別標高図」「陰影起伏図」オーバーレイ。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、地図のオーバーレイを試した。

国土地理院の「地理院タイル」を使った。

国土地理院 の「色別標高図」「陰影起伏図」を使った。

var Overlay_Map = new Array();
Overlay_Map[ 0 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png', {
	opacity: 0.2, maxNativeZoom: 15,
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
});
Overlay_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', {
	opacity: 0.3, maxNativeZoom: 16,
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
});
Overlay_Map[ 2 ] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	opacity: 0.2,
	attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var overlay = {
	'国土地理院 色別標高図': Overlay_Map[ 0 ],
	'国土地理院 陰影起伏図': Overlay_Map[ 1 ],
	'Esri 衛星画像': Overlay_Map[ 2 ]
};
L.control.layers(baseMap, overlay).addTo(map);

サンプル→→ 現在地表示&地点検索

サンプル→→ 日本三百名山マップ

f:id:art2nd:20210614220701j:plain

f:id:art2nd:20210614220704j:plain