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

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

基準となるマーカからの距離が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)

引数 プロパティ タイプ デフォルト 説明
map - ZDC.Map - クラスタを表示する地図
options makers array(ZDC.Marker) - クラスタリングされるZDC.Markerを配列で指定
プラグイン内でmapにaddWidgetします
maxZoom number mapの最大の縮尺レベル クラスタリングされる最大の縮尺レベル
この値を超える縮尺レベルではクラスタリングされません
cluster functoin クラスタ表示例 クラスタのデザインを変更できます。
第一引数でクラスタのメンバ数、第二引数でクラスタを表示する緯度経度を取得できます。
関数の戻り値はZDC.UserWidgetとする。
メンバ数によって任意のZDC.UserWidgetオブジェクトを返却するよう実装する。

clusterプロパティ指定例
textStyle string クラスタ表示例 クラスタ上に表示されるメンバ数のテキストデザイン
例) font-family:arial;color:red;font-size:20px;
radius number 10 クラスタリング時に利用されるマーカ間の距離(単位:ピクセル)
指定した距離以内のマーカを一つのクラスタとして表示します

クラスタ表示例

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/widget/cluster_img.html

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)

マーカを追加します。

引数 タイプ 説明
markers array(ZDC.Marker) 追加するZDC.Markerの配列
コンストラクタのmarkersプロパティを参照

array(Cluster) getClusterMarker()

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

クラスタオブジェクト

プロパティ タイプ 説明
owner ZDC.UserWidget クラスタ
markers array(ZDC.Marker) ownerに含まれるZDC.Markerの配列

例)

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



void setRadius(radius)

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

引数 タイプ 説明
radius number コンストラクタのradiusプロパティを参照

void removeMarker()

マーカを削除します。


void redraw()

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


void setMaxZoom(maxZoom)

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

引数 タイプ 説明
maxZoom number コンストラクタのmaxZoomを参照

Number getMaxZoom()

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

タイプ 説明
number コンストラクタのmaxZoomを参照