Leafletのレイヤー

 Leafletでレイヤーのコントロール。

 Leafletのサイト参照   

<div id = "map"></div>
<script>

の下

var map = L.map('map').setView([35.30, 138.30] , 5);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',{attribution: "<a href = 'https://maps.gsi.go.jp/' target = '_blank'>国土地理院</a>"})
.addTo(map);
L.control.scale()
.addTo(map);

var gsib = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',{attribution: "国土地理院"});
var osm = L.tileLayer('https://tile.openstreetmap.jp/{z}/{x}/{y}.png',{attribution: 'Map data © OpenStreetMap'});

var map = L.map('map',{
center:[35.30, 138.30],
zoom:5,
layers:[gsib]
});

var baseMaps = {
"国土地理院 白地図":gsib,
"OpenStreetMap":osm
};

L.control.layers(baseMaps,null)
.addTo(map);
L.control.scale()
.addTo(map);

といった具合に改変。

 複数のタイルレイヤーをbaseMapsにまとめる。
 タイルレイヤー L.tileLayerは3つでも4つでも……。

 L.control.layersのnullの部分は、オーバーレイマップ overlayMaps。チェックボタンで(同一)地図上のプロットや線の表示を切り替える。今回は使っていないのでnull。

プロットいっぱいいっぱい -最高気温-   

 地図の右上にレイヤーのアイコンが表示されるので、クリック(タップ)してベースマップを切り替える。

 オーバーレイマップについては次のページも。

 スマートフォンだとなかなか収まり良く表示できないが、CSSで

map{
height: 100%;
}

としておくのが割と無難。

 半径の小さい円は、スマートフォンのタップだと相当拡大しないとポップアップしない。

タイルレイヤー

 タイルレイヤーが使えるオンライン地図は、

  •  国土地理院
     地形図、空中写真、色別標高図(レリーフ)、
  •  オープンストリートマップ OpenStreetMap
     余程ヘビーな使い方をしない限りフリー。
     領土問題のある地域の扱いが難点。
  •  OpenTopoMap
     日本のみならず世界中の地形図を見れる。
  •  Thunderforest
     同じく世界中の地形図が見れるが、APIキーが必要。
  •  
  •  

 GoogleMapをタイルレイヤーとして使う場合、

L.tileLayer(
'https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
{maxzoom:20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: 'Map data © GoogleMap'})

 衛星画像は

'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',

'https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',

 後者は地名入り。
 地形(レリーフ)は

'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',

 結構面白いので、緯度 ±○○.○○、経度 ±○○○.○○の値を渡して(はみ出た値の処理はしていない)

 www.mitsumatado.com/Memo/map.html?ido=+51.51&kdo=-000.09

 といった具合に色々表示を試せるようにした。

 map.htmlをmapG.htmlにするとGoogleMapへ緯度、経度の値が渡る。
 追)途中から使えなくなった。

MAP
スポンサーリンク
ふシゼン
タイトルとURLをコピーしました