markerclustergroupで複数のマーカをクラスターとして統合する

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
markerclustergroupで複数のマーカをクラスターとして統合する [2021/11/18 02:29] – 133.11.144.12markerclustergroupで複数のマーカをクラスターとして統合する [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
行 1: 行 1:
-====== markerClusterGroupを使用して、Leafletのマーカーをクラスター化する ====== 
- 
-markerClusterGroupを使用することで、Leafletの地図上にプロットしたマーカーのクラスタリングを行うことができる。 
- 
-===== markerClusterGroupの読み込み ===== 
- 
-    #Leafletの読み込み 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> 
-    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" ></script> 
-     
-    #MarkerClusterGroupの読み込み 
-    <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script> 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" /> 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" /> 
- 
-===== 地図の描画 ===== 
- 
-    //地図を描画するDOM要素を選択し、デフォルトの緯度経度、縮尺を設定。 
-    var map = L.map("map").setView([35.7,139.7],11); 
- 
-    //地図データの取得元とZoom範囲を設定する。 
-    var tile = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{minZoom:2,maxZoom:18}).addTo(map); 
- 
-===== マーカーの描画とクラスターグループの作成 ===== 
- 
-''markerClusterGroup''オブジェクトを作成する。 
- 
-    var markers = L.markerClusterGroup(); 
- 
- 
-データの緯度経度の情報を元にマーカーを描画し、markerClusterGroupオブジェクトのレイヤーに追加する。 
- 
-    dataset.forEach(data => { 
-        var marker = L.marker([data.latitude, data.longitude]); 
-        markers.addLayer(marker); 
-    }); 
- 
-''markerClusterGroup''オブジェクトを''map''オブジェクトのレイヤーに追加する。 
- 
-    map.addLayer(markers); 
- 
-===== 表示結果 ===== 
- 
-複数のクラスタを統合して、マーカの個数を表示してくれる。 
- 
-{{:pasted:20211118-112733.png}} 
- 
-Zoomしていくとクラスタが分割され、マーカが表示される。 
- 
-{{:pasted:20211118-112816.png}} 
- 
-同じ緯度経度のマーカーはこのように表示される。 
- 
-{{:pasted:20211118-112855.png}} 
  
  • markerclustergroupで複数のマーカをクラスターとして統合する.1637202554.txt.gz
  • 最終更新: 2021/11/18 02:29
  • by 133.11.144.12