ZDC.MarkerCluster

マーカクラスタは、複数のマーカをひとつのクラスタとして表示する機能を持ちます。
大量のマーカを表示するような場合に、画面を見やすくできます。

クラスタをクリックすると、そのクラスタに属するマーカ、クラスタが全て表示されます。

基準となるマーカからの距離がradiusの値以下のマーカ群をひとつのクラスタとして表示します。
基準となるマーカは、markersに設定したマーカの先頭から順に決定されます。
クラスタに含まれたマーカは、その後基準となることはありません。

※）userwidget.jsが必要です。
※）別途、プラグインをインクルードする必要があります。こちらから取得して下さい。
※）サポート対象のOS／ブラウザは、Internet Explorer 9.0 以上、Firefox 最新版、Google Chrome 最新版、Safari 5.0 以上、 Android OS 4.0 以上、iOS 5 以上です。

実装例

コンストラクタ

ZDC.MarkerCluster(map, options)

クラスタ表示例

clusterプロパティ指定例

function(number, latlon) {
    var w = 35;
    var stylefont = 'font-family:arial; color:#FFFFFF; font-size:20px; font-weight: bold;';
    
    var icon = ''; /* 任意の画像を指定 */
    if (number < 10) {
        icon = 'img1.png';
    } else {
        icon = 'img2.png';
    }   

    var labelHTML =
        '<div ' +
        'style="' +
        'width: ' + w + 'px;' +
        'height: ' + w + 'px;' +
        'line-height: ' + w + 'px;' +
        'text-align: center;' +
        stylefont + /* クラスタ上に表示するメンバ数のデザイン */
        'background: url(' + icon + ') no-repeat center;' +
        'cursor: pointer;' +
        'user-select: none; -webkit-user-select: none; ' +
        ' -moz-user-select: none; -ms-user-select: none;' +
        '">' +
        number + /* クラスタ上に表示するメンバ数 */
        '</div>';
        
    var widgetlabel = {
        'html': labelHTML,
        'size': new ZDC.WH(w, w),
        'offset': ZDC.Pixel(-w / 2, -w / 2)
    };
    var widget = new ZDC.UserWidget(latlon, widgetlabel);
    return widget;
};

メソッド

void addMarkers(markers)

マーカを追加します。

---

array(Cluster) getClusterMarker()

表示中の縮尺レベルで作成されたクラスタをクラスタオブジェクトの配列で取得できます。

クラスタオブジェクト

例)

[
   {
       owner: ZDC.UserWidgetオブジェクト,
       markers: [
           ZDC.Markerオブジェクト,
           ZDC.Markerオブジェクト,
           ZDC.Markerオブジェクト
       ]
   },
   {
       owner: ZDC.UserWidgetオブジェクト,
       markers: [
           ZDC.Markerオブジェクト,
           ZDC.Markerオブジェクト
       ]
   }
]

---

void setRadius(radius)

クラスタリング時に利用されるマーカ間の距離を指定します。

---

void removeMarker()

マーカを削除します。

---

void redraw()

クラスタを再計算し地図上に表示します。

---

void setMaxZoom(maxZoom)

クラスタリングされる最大の縮尺レベルを指定します。

---

Number getMaxZoom()

maxZoomに設定されている縮尺レベルを取得します。

---