【OpenStreet】無料の地図を使おう。レイヤー表示をしょう　- 10分 –

概要
コードの説明
リンク先

概要

レイヤー表示を使うことで、より便利になります。

例えば、以下の図のように各種表示を切り替えて表示する事が可能です。

〇ベースのレイヤは、１つのみ表示できます。(下の〇のチェック）

〇オーバーレイレイヤは、ベースレイヤの上に重ねて表示するレイヤで同時に何枚でも表示させることができます。

コードの説明

ベースマップと、オーバーレイレイヤーの2のアイテムを指定して、表示するだけです。

こちらも参考になります。https://weba.matrix.jp/leaflet

  <script>

         var map = L.map('mapid',{
          center: [35.6911525833333 , 139.699627638889],
          zoom: 15,
          minZoom: 4,
          maxZoom: 30
         });

          //ベースMap(どれか１つ）
          var gsiattr = "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>";
          var gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: gsiattr });
          var gsipale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: gsiattr });
          var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
                                { attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });

          //オーバーレイ用のレイヤ(重複して表示可能)
          //opacityで透過度を設定、maxNativeZoomを指定すると、それ以上のズームレベルのタイルデータは、指定のズームレベルのタイル画像を拡大して表示される
          var gsirelief = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png', { opacity: 0.7, maxNativeZoom: 15, attribution: gsiattr });
          var gsirehillshademap = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', { opacity: 0.5, maxNativeZoom: 16, attribution: gsiattr });

          var baseMaps = {
              "地理院地図": gsi,
              "淡色地図": gsipale,
              "オープンストリートマップ": osm
          };

          var overlayMaps = {
              "色別標高図": gsirelief,
              "陰影起伏図": gsirehillshademap
          };

          L.control.layers(baseMaps, overlayMaps).addTo(map);
          gsi.addTo(map);
}
</script>

リンク先

レイヤーを使おう