Leafletのオーバーレイ

Leaflet
2023.08.15

　国立研究開発法人産業技術総合研究所地質調査総合センター（GSJ）が提供するシームレス地質図や、国土交通省国土地理院が提供するハザードマップをLeafletの背景地図にオーバーレイ表示します。

使い方

１．オーバーレイレイヤーを作成

var _aist = L.tileLayer('https://gbank.gsj.jp/seamless/v2/api/1.2.1/tiles/{z}/{y}/{x}.png?layer=glfs', {
    opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://www.gsj.jp/license/index.html" target="_blank">GSJ, AIST</a>'
  });

２．地図選択コントローラーの作成

var Overlays = {
  'シームレス地質図': _aist,
  '洪水浸水想定区域（想定最大規模）': _overlay1,
  '浸水継続時間（想定最大規模）': _overlay2,
  '高潮浸水想定区域': _overlay3,
  '津波浸水想定': _overlay4,
  '土砂災害警戒区域（土石流）': _overlay5,
  '土砂災害警戒区域（急傾斜地の崩壊）': _overlay6,
   '土砂災害警戒区域（地すべり）': _overlay7,
  '土石流危険渓流': _overlay8,
  '急傾斜地崩壊危険箇所': _overlay9,
  '地すべり危険箇所': _overlay10,
  '雪崩危険箇所': _overlay11
};

　デフォルト表示は下記の通りです。css等で表示スタイルを変更することも可能です。

３．Mapへ設定

L.control.layers(Layers, Overlays, { collapsed: true }).addTo(_map);

全体コード

<html lang="ja">
<head>
 <title>Leafletの地図のオーバーレイ</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>

<div id="map" style="width:100%;height:100%"></div>
<script>
  //表示位置を設定
  var _map = L.map('map');
  //初期表示時に中心座標とズームレベルを設定
  _map.setView([35.6895, 139.69172], 10);
  //初期表示時の表示地図を設定
  var _gsi_std = 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>"
    }).addTo(_map);

  //シームレス地質図を設定
  var _aist = L.tileLayer('https://gbank.gsj.jp/seamless/v2/api/1.2.1/tiles/{z}/{y}/{x}.png?layer=glfs', {
    opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://www.gsj.jp/license/index.html" target="_blank">GSJ, AIST</a>'
    });
  //洪水浸水想定区域（想定最大規模）を設定
  var _overlay1 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/01_flood_l2_shinsuishin_data/{z}/{x}/{y}.png', {
    opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //浸水継続時間（想定最大規模）を設定
  var _overlay2 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/01_flood_l2_keizoku_data/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //高潮浸水想定区域を設定
  var _overlay3 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/03_hightide_l2_shinsuishin_data/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //津波浸水想定を設定
  var _overlay4 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/04_tsunami_newlegend_data/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //土砂災害警戒区域（土石流）を設定
  var _overlay5 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_dosekiryukeikaikuiki/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //土砂災害警戒区域（急傾斜地の崩壊）を設定
  var _overlay6 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_kyukeishakeikaikuiki/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //土砂災害警戒区域（地すべり）を設定
  var _overlay7 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_jisuberikeikaikuiki/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //土石流危険渓流を設定
  var _overlay8 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_dosekiryukikenkeiryu/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //急傾斜地崩壊危険箇所を設定
  var _overlay9 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_kyukeisyachihoukai/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //地すべり危険箇所を設定
  var _overlay10 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_jisuberikikenkasyo/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
  //雪崩危険箇所を設定
  var _overlay11 = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_nadarekikenkasyo/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
    attribution: '<a href="https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html" target="_blank">ハザードマップポータルサイト</a>'
    });
    
  var Layers = {
    '国土地理院(標準地図)': _gsi_std
  };

  var Overlays = {
    'シームレス地質図': _aist,
    '洪水浸水想定区域（想定最大規模）': _overlay1,
    '浸水継続時間（想定最大規模）': _overlay2,
    '高潮浸水想定区域': _overlay3,
    '津波浸水想定': _overlay4,
    '土砂災害警戒区域（土石流）': _overlay5,
    '土砂災害警戒区域（急傾斜地の崩壊）': _overlay6,
    '土砂災害警戒区域（地すべり）': _overlay7,
    '土石流危険渓流': _overlay8,
    '急傾斜地崩壊危険箇所': _overlay9,
    '地すべり危険箇所': _overlay10,
    '雪崩危険箇所': _overlay11
  };
  
  L.control.layers(Layers, Overlays, { collapsed: true }).addTo(_map);
</script>

</body>
</html>

サンプルを別画面で実行

スポンサーリンク

コメント

タイトルとURLをコピーしました