9月 | 2017 | giscience.jp

先日宮城と岩手で行ったQGISハンズオンで、leaflet.jsベースのウェブマップを簡単に出力できる qgis2web プラグインを紹介しました。その際、背景図をOpenStreetMap以外に変更できないか？という質問がありました。帰りがけだったため、ざざっと「ここのURLを書き換えるだけでOKです」と説明したのみでしたので、再度その内容をここに書いておきます。

index.htmlをテキストエディタで開いて35-40行目付近(地図に載せたレイヤの数により前後します)にあるこの2行を書き換えれば地理院地図の背景図に変換できます。

<変更前：OSM>

var basemap0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',

1 2	var basemap0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',

<変更後：地理院タイル(標準)>




		
		
			after(GSI)
			

			
			var basemap0 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html" target="_blank" rel="noopener noreferrer">国土地理院</a>',
			
				
					
				
					1
2
				
						var basemap0 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html" target="_blank" rel="noopener noreferrer">国土地理院</a>',

なお地理院地図で提供されているタイル地図であれば上記の
‘http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png’
に相当する箇所のURLを変えるだけで背景を変更できます。URLのリストは以下のリンク先を参照ください。

地理院タイル一覧
https://maps.gsi.go.jp/development/ichiran.html

giscience.jp

月別アーカイブ: 2017年9月

qgis2webで出力したwebmapの背景図を変更する