日々学んだことを残しておこう。きっと未来の自分が探しにくる。 (ただ忘れっぽいだけです…)

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-------- : スポンサー広告 :
Pagetop

leaflet.js ポイントマーカー グルーピング マーカークラスタ


leafletでたくさんのポイントマーカーが重なると見えにくい場合にグルーピングする際のプラグイン

こちらのプラグインを使用すると、近いポイントをまとめて、個数を表示してくれる。
拡大すると、各ポイントを表示して縮小表示の時にグルーピングになる。

(参考サイト)
https://github.com/Leaflet/Leaflet.markercluster

使い方は、
leaflet.markercluster.js
MarkerCluster.css
MarkerCluster.Default.css
をセット。


var markers = L.markerClusterGroup({spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false});

markers.addLayers(L.marker([35.7271338,139.6910164]));
markers.addLayers(L.marker([35.7265943,139.6844866]));




map.addLayer(markers);

これでOK。
プラグインが充実していて良いですねー。

グルーピングをクリックするとポイントに分割するには、クラスタクリックイベント追加すれば良い。
markers.on('clusterclick', function (a) {
a.layer.zoomToBounds();
});






関連記事

2017-05-01 : GIS : コメント : 0 : トラックバック : 0
Pagetop
コメントの投稿
非公開コメント

Pagetop
« next  ホーム  prev »

広告

読みたいと思っている書籍

Amazon Web Services クラウドネイティブ・アプリケーション開発技法 一番大切な知識と技術が身につく Amazon Web Services 定番業務システム12パターン 設計ガイド イラストで学ぶ 機械学習 最小二乗法による識別モデル学習を中心に (KS情報科学専門書) イラストで学ぶ ディープラーニング (KS情報科学専門書)

カウンタ

メールフォーム

名前:
メール:
件名:
本文:

GoogleTranslate

管理人のつぶやき

人気記事ランキング

カテゴリ

openclose

ブログ内検索

全記事表示リンク

全ての記事を表示する

ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。