内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet ズームでマーカー表示・非表示を切り替え
leaflet:layer
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[:programming_start]] ====== Leaflet ズームでマーカー表示・非表示を切り替え ====== ズームレベルによって地図上のマーカーを表示と非表示を切り替えます。 注意:「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== ズームを変えるとマーカーが変化します。初期状態ではアイコンマーカーを表示し、広域ではアイコンを消して警告マーカーが表示されます。 <html> <style> .divicon2{background:#ff0; color:red; text-align: center; font-size: 16px;vertical-align: middle;} </style> <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.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); //レイヤーを2つ準備 iconMarkers = L.featureGroup(); stopMarkers = L.featureGroup(); //アイコンマーカーをiconレイヤーに登録 iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") ); iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") ); iconMarkers.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県(icon)") ); //広域用のdivIconをセット var divIcon4 = L.divIcon({ html: 'この倍率では<br>マーカー表示できません', className: 'divicon2',iconSize: [200,50],iconAnchor: [100,25] }); //警告マーカーを(仮座標)で登録 var msgMarker = L.marker( [0,0],{ icon:divIcon4, zIndexOffset:1000, interactive:false }); stopMarkers.addLayer( msgMarker ); //ズームイベント mymap.on('zoomend', function() { if (mymap.getZoom() >8){ //8越えならアイコン表示 mymap.removeLayer(stopMarkers); mymap.addLayer(iconMarkers); } else { //8以上ならメッセージ表示 mymap.removeLayer(iconMarkers); mymap.addLayer(stopMarkers); } }); mymap.setView([35.6896, 139.6918], 9); msgMarker.setLatLng(mymap.getCenter()); //ムーブイベントでセンタークロスを移動 mymap.on('move', function(e) { msgMarker.setLatLng(mymap.getCenter()); }); }); </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> <!-- 警告表示用のスタイル設定 --> <style> .divicon2{background:#ff0; color:red; text-align: center; font-size: 16px;vertical-align: middle;} </style> <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'); mymap = L.map('mapid'); L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, ' }).addTo(mymap); //グループを2つ準備 iconMarkers = L.featureGroup(); stopMarkers = L.featureGroup(); //アイコンマーカーをiconグループに登録 iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") ); iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") ); iconMarkers.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県(icon)") ); //広域用のdivIconをセット var divIcon4 = L.divIcon({ html: 'この倍率では<br>マーカー表示できません', className: 'divicon2',iconSize: [200,50],iconAnchor: [100,25] }); //警告マーカーを(仮座標)で登録 var msgMarker = L.marker( [0,0],{ icon:divIcon4, zIndexOffset:1000, interactive:false }); //警告マーカーをグループに登録 stopMarkers.addLayer( msgMarker ); //ズームイベント mymap.on('zoomend', function() { if (mymap.getZoom() >8){ //8越え(詳細)ならアイコン表示 mymap.removeLayer(stopMarkers); mymap.addLayer(iconMarkers); } else { //9以下(広域)ならメッセージ表示 mymap.removeLayer(iconMarkers); mymap.addLayer(stopMarkers); } }); mymap.setView([35.6896, 139.6918], 9); //setView後に警告マーカーを中心に移動 msgMarker.setLatLng(mymap.getCenter()); //ムーブイベントでセンタークロスを移動 mymap.on('move', function(e) { msgMarker.setLatLng(mymap.getCenter()); }); }); </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.featureGroupでマーカーをグループ化する変数を準備します。 <code javascript> iconMarkers = L.featureGroup(); //通常マーカー用 stopMarkers = L.featureGroup(); //警告マーカー用 </code> 通常のアイコンマーカーを ''addLayer'' でiconMarkersグル―プに登録します。アイコンマーカーについては[[marker]]をご覧ください。 <code javascript> iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") ); iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") ); iconMarkers.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県(icon)") ); </code> 警告用マーカーを ''addLayer'' でstopMarkersグル―プに登録します。警告用マーカーのが常に中心に表示される動作は[[cross]]を参考にして下さい。 <code html> /* スタイルシート */ .divicon2{background:#ff0; color:red; text-align: center; font-size: 16px;vertical-align: middle;} </code> <code javascript> //広域用のdivIconをセット var divIcon4 = L.divIcon({ html: 'この倍率では<br>マーカー表示できません', className: 'divicon2',iconSize: [200,50],iconAnchor: [100,25] }); //警告マーカーを(仮座標)で登録 var msgMarker = L.marker( [0,0],{ icon:divIcon4, zIndexOffset:1000, interactive:false }); stopMarkers.addLayer( msgMarker ); </code> 警告用マーカーをマップ中心に表示するための処理をserViewの後に挿入 <code javascript> //setView後に警告マーカーを中心に移動 msgMarker.setLatLng(mymap.getCenter()); //ムーブイベントでセンタークロスを移動 mymap.on('move', function(e) { msgMarker.setLatLng(mymap.getCenter()); }); </code> ズーム変更時のイベントで表示するグループを切り替え。 ''removeLayer()''でグル―プを非表示にして、''addLayer()''でグル―プを表示します。 <code javascript> mymap.on('zoomend', function() { if (mymap.getZoom() >8){ //倍率が8を越える(詳細)ならアイコン表示 mymap.removeLayer(stopMarkers); mymap.addLayer(iconMarkers); } else { //8以下(広域)ならメッセージ表示 mymap.removeLayer(iconMarkers); mymap.addLayer(stopMarkers); } }); </code>
leaflet/layer.txt
· 最終更新: 2018/09/13 14:39 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ