内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet 地図タイル切り替え
leaflet:layers
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[: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 © <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 © <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]]
leaflet/layers.txt
· 最終更新: 2018/12/10 08:21 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ