差分

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

--- leaflet:layer [2018/09/12 09:26] – 管理者
+++ leaflet:layer [2018/09/13 14:39] (現在) – [説明] 管理者
@@ 行 1: / 行 1: @@
+[[: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 &copy; <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 &copy; <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>