あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール

現在位置: トップページ » 🌏Leaflet(マップAPI) » Leaflet マーカークラスタ
leaflet:cluster

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
leaflet:cluster [2018/09/11 12:40] – 管理者leaflet:cluster [2018/09/11 13:21] (現在) – [leaflet.markerclusterの使い方] 管理者
行 1: 行 1:
 +~~NOCACHE~~
 +[[:programming_start]]
 +====== Leaflet マーカークラスタ ======
 +Leaflet 1系とleaflet.markerclusterプラグイン(v1.4.0)を使用して複数のマーカーをクラスタにまとめます。
 +
 +注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」
 +----
 +===== デモ =====
 +ズームを動かすとマーカーが1つに纏まったり本来の位置に戻ったりします。
 +
 +<html>
 +<div id="mapid" style="width: 100%; height: 400px;"></div>
 +<script src="https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.js"></script>
 +<script src="https://www.achiachi.net/blog/_outside/leaflet_cluster/v1/leaflet.markercluster.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");
 +  cssLoad("https://www.achiachi.net/blog/_outside/leaflet_cluster/v1/MarkerCluster.css");
 +  cssLoad("https://www.achiachi.net/blog/_outside/leaflet_cluster/v1/MarkerCluster.Default.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(){
 +
 +    var clusters = L.markerClusterGroup({
 +      disableClusteringAtZoom:11, //クラスタ化を解除するズーム
 +      maxClusterRadius: 50,  //クラスタ化の半径(初期値80)
 +     animate:false
 +    });
 +
 +    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);
 +
 +  clusters.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都") );
 +  clusters.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県") );
 +  clusters.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県") );
 +  clusters.addLayer( L.marker([34.9769, 138.3830]).bindPopup("静岡県") );
 +  clusters.addLayer( L.marker([35.4478, 139.6426]).bindPopup("神奈川県") );
 +  mymap.addLayer(clusters);
 +  mymap.setView([35.6896, 139.6918], 7);
 +});
 +</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>
 +
 +
 +----
 +===== leaflet.markerclusterのインストール =====
 +自分のサーバーにインストールしなくてもcdnなど外部サーバーから読み込む事ができますが、外部サーバーは停止する事もあるので自分のサーバーにインストールした方が無難です。
 +
 +ダウンロードは GitHub https://github.com/Leaflet/Leaflet.markercluster からできます。
 +
 +必要なファイルは dist フォルダの「leaflet.markercluster.js」「MarkerCluster.css」「MarkerCluster.Default.css」だけです。
 +
 +それらを自分のサーバーにアップロードします。
 +
 +----
 +===== ソースコード =====
 +<code javascript>
 +<div id="mapid" style="width: 100%; height: 400px;"></div>
 +<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script> 
 +
 +
 +//leaflet.markercluster.jsプラグインの読み込み
 +<script src="https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/leaflet.markercluster.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");
 +
 +
 +  //leaflet.markercluster.jsで使用するcssの読み込み
 +  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.css");
 +  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.Default.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://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
 +      maxZoom: 18,
 +      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
 +    }).addTo(mymap);
 +
 +
 +    //markerclusterの設定とオプション設定
 +    var clusters = L.markerClusterGroup({
 +      disableClusteringAtZoom:11, //クラスタ化を解除するズーム
 +      maxClusterRadius: 50  //クラスタ化の半径(初期値80)
 +    });
 +
 +    //クラスタ変数にマーカーを登録
 +    clusters.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都") );
 +    clusters.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県") );
 +    clusters.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県") );
 +    clusters.addLayer( L.marker([34.9769, 138.3830]).bindPopup("静岡県") );
 +    clusters.addLayer( L.marker([35.4478, 139.6426]).bindPopup("神奈川県") );
 +
 +    //クラスタ情報をマップのレイヤーに反映
 +    mymap.addLayer(clusters);
 +
 +
 +    mymap.setView([35.6896, 139.6918], 7);
 +});
 +</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]]をご覧ください。
 +
 +markercluster.jsプラグインのロード。
 +<code javascript>
 +<script src="https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/leaflet.markercluster.js"></script>
 +</code>
 +
 +markercluster.jsで使用するcssの読み込み。通常はヘッダ要素内でロードしますがDokuWIkiでは個別にヘッダを編集できないのでJavaScriptでロードしています。
 +<code javascript>
 +cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.css");
 +cssLoad("https://【自分のサーバーアドレスとパス】/leaflet_cluster/v1/MarkerCluster.Default.css");
 +</code>
 +
 +クラスタ用レイヤー変数の準備とクラスタオプションの設定
 +<code javascript>
 +var clusters = L.markerClusterGroup({
 +  disableClusteringAtZoom:11, //クラスタ化を解除するズーム(11以上は通常表示)
 +  maxClusterRadius: 50  //クラスタ化の半径(初期値80)、大きくすると離れたマーカーも1つにまとめます
 +  //これ以外にも色々オプションがあります。
 +});
 +</code>
 +
 +マーカーをクラスタレイヤーに登録
 +<code javascript>
 +clusters.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都") );
 +</code>
 +
 +クラスタレイア―をマップに反映
 +<code javascript>
 +mymap.addLayer(clusters);
 +</code>
  
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki