差分

このページの2つのバージョン間の差分を表示します。

--- leaflet:layers [2018/09/30 17:14] – 管理者
+++ leaflet:layers [2018/12/10 08:21] (現在) – [Leaflet 地図タイル切り替え] 管理者
@@ 行 1: / 行 1: @@
+[[:programming_start]]
+====== Leaflet 地図タイル切り替え ======
+複数の地図タイルを切り替えるコントロール追加します。
+（ズームごとタイルを切り替えたい場合は [[layers2]] をご覧ください）
+注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」
+----
+===== デモ =====
+地図右上の菱形アイコンから地図を切り替える事ができます。ここではOpenStreetMapと国土地理院のタイルを選択できます。
+<html>
+<div id="mapid" style="width: 100%; height: 400px;"></div>
+<script src="https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.js"></script>
+<script>
+  function cssLoad(cssFile){
+    if(document.all){
+      document.createStyleSheet(cssFile);
+    }else{
+      var link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = cssFile;
+      link.type = "text/css"
+      document.getElementsByTagName('head')[0].appendChild(link);
+    }
+  }
+  cssLoad("https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.css");
+  function addOnload(evtFunc){
+    if(window.addEventListener) {
+      window.addEventListener('load', evtFunc, false);
+    } else if(window.attachEvent){ //IE用
+      window.attachEvent('onload', evtFunc);
+    } else {
+      //alert('window.onload エラー');
+    }
+  }
+  var mymap;
+  addOnload(function(){
+    mymap = L.map('mapid');
+    L.control.layers({
+      "OpenStreetMap":L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
+      }).addTo(mymap),
+      "地理院 標準地図":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 淡色地図(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
+        minZoom: 2,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 English(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png', {
+        minZoom: 2,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 陰影起伏(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', {
+        minZoom: 2,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 写真(Zoom9～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
+        minZoom: 9,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>( Zoom9～13:Landsat8画像（GSI,TSIC,GEO Grid/AIST）, Landsat8画像（courtesy of the U.S. Geological Survey）, 海底地形（GEBCO）)'
+      }),
+    }).addTo(mymap);
+    mymap.setView([35.6896, 139.6918], 8);
+  });
+</script>
+</html>
+<html>
+<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+<!-- respon_0 -->
+<ins class="adsbygoogle"
+     style="display:block"
+     data-ad-client="ca-pub-9251612436023685"
+     data-ad-slot="1409739163"
+     data-ad-format="auto"></ins>
+<script>
+(adsbygoogle = window.adsbygoogle || []).push({});
+</script>
+</html>
+----
+===== ソースコード =====
+コメント行のある部分が[[map]]から追加された部分です（削除された部分は書いてありません）
+html部分
+<code html>
+<div id="mapid" style="width: 100%; height: 400px;"></div>
+</code>
+JavaScript部分
+<code javascript>
+<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
+<script>
+  function cssLoad(cssFile){
+    if(document.all){
+      document.createStyleSheet(cssFile);
+    }else{
+      var link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = cssFile;
+      link.type = "text/css"
+      document.getElementsByTagName('head')[0].appendChild(link);
+    }
+  }
+  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
+  function addOnload(evtFunc){
+    if(window.addEventListener) {
+      window.addEventListener('load', evtFunc, false);
+    } else if(window.attachEvent){ //IE用
+      window.attachEvent('onload', evtFunc);
+    } else {
+      //alert('window.onload エラー');
+    }
+  }
+  var mymap;
+  addOnload(function(){
+    mymap = L.map('mapid');
+    //タイルサーバーを登録します。
+    //（注意：タイルサーバーはそれぞれ利用制限があります確認して利用して下さい）
+    L.control.layers({
+      "OpenStreetMap":L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
+      }).addTo(mymap),
+      "地理院 標準地図":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 淡色地図(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
+        minZoom: 2,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 English(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png', {
+        minZoom: 2,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 陰影起伏(Zoom2～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', {
+        minZoom: 2,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
+      }),
+      "地理院 写真(Zoom9～)":L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
+        minZoom: 9,
+        maxZoom: 18,
+        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>( Zoom9～13:Landsat8画像（GSI,TSIC,GEO Grid/AIST）, Landsat8画像（courtesy of the U.S. Geological Survey）, 海底地形（GEBCO）)'
+      })
+    }).addTo(mymap);
+    mymap.setView([35.6896, 139.6918], 8);
+  });
+</script>
+</code>
+<html>
+<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+<!-- respon_0 -->
+<ins class="adsbygoogle"
+     style="display:block"
+     data-ad-client="ca-pub-9251612436023685"
+     data-ad-slot="1409739163"
+     data-ad-format="auto"></ins>
+<script>
+(adsbygoogle = window.adsbygoogle || []).push({});
+</script>
+</html>
+----
+===== 説明 =====
+マップの基本的な部分は[[map]]をご覧ください
+L.control.layersにタイルサーバーの情報と著作権表示を列挙します。最初に表示するタイルには最後に.addTo(mymap)を追加します。
+<code javascript>
+L.control.layers({
+  "【表示名】":L.tileLayer('【タイルサーバー指定のアドレス】', {
+    maxZoom: 18,
+    attribution: '【著作権表示】'
+  }).addTo(mymap), //←ページを開いた時に最初に表示されるタイルのみ最後に.addTo()を付けます
+  "【表示名】":L.tileLayer('【タイルサーバー指定のアドレス】', {
+    maxZoom: 18,
+    attribution: '【著作権表示】'
+  }),
+  "【表示名】":L.tileLayer('【タイルサーバー指定のアドレス】', {
+    minZoom: 2,  // ズーム制限がある場合 下限と上限をセット
+    maxZoom: 18,
+    attribution: '【著作権表示】'
+  })
+}).addTo(mymap);
+</code>
+常時アイコンを開いた状態にしたい場合は最後の部分を下記のように書き換えます。
+<code>
+}).addTo(mymap);
+↓
+}, null, {collapsed:false} ).addTo(mymap);
+</code>
+表示位置は通常は右上ですが''topright'', ''bottomleft'', ''bottomright''に変更できます
+<code>
+}).addTo(mymap);
+↓右下に移動
+},null, {position:'bottomright'} ).addTo(mymap);
+※他のオプションと併用する場合は
+},null,{ collapsed:false , position:'bottomright' }).addTo(mymap);
+</code>
+タイルサーバーにはそれぞれ使用条件が定められていますので確認してからご利用下さい。
+  * OpenStreetMap ： [[https://www.openstreetmap.org/copyright]]
+  * 国土地理 ： [[https://maps.gsi.go.jp/development/ichiran.html]]