MarkerCluster

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

Constructor

new ZDC.MarkerCluster(markers, optionsopt)

マーカークラスターを作成します。
zIndex(重なり順)のdefault値はauto。

Parameters

名前 説明
markers
Array.<Marker> 		マーカーのリスト
options(optional)
Object
default 		オプション設定
名前 説明
maxZoom(optional)
number
default 22		 マーカーがクラスタリングされる最大ズームレベルを設定します。
この値を超えるズームレベルの場合はクラスタリングされません。
cluster(optional)
function
default defaultCluster		 クラスターのデザインを変更します。
指定した関数の第一引数でクラスターのメンバー数、第二引数でクラスターを表示する緯度経度、第三引数でテキストスタイルを取得します。
戻り値はUserWidgetオブジェクトを返却するように実装してください。
一般的にメンバー数によって返却するUserWidgetを切り替えます。
textStyle(optional)
string
default null		 クラスター上に表示されるメンバー数のテキストデザイン
例) font-family:arial;color:red;font-size:20px;
method(optional)
string
default distance 		クラスタリングアルゴリズム
以下のクラスタリングアルゴリズムから指定できます。
  • distance
    マーカー間の距離を利用してクラスタリングを行う。
    全てのマーカーをループさせ、各ペア間の距離が半径よりも小さいことを確認して、関連性のある関係に押し込む。
    その後、マーカーの関係をチェックしてクラスターを作成し、完了するまで子レベルの関係を保持する。
  • k-means
    K-meansアルゴリズムを使ったクラスタリングを行う。
    クラスターの数は半径オプションに基づいて決定されるが、この方法は他の2つの方法(distance & box)とは異なり、
    半径が大きければクラスターの数も大きくなる。
    まず、ランダムにクラスターの中心を作り、半径の値に等しい数のクラスターを作成する。
    次に最も近いクラスターにマーカーを追加し、クラスター中心を更新する。
    この作業を、クラスター中心が変更できなくなるまで繰り返す。
  • box
    これは、クラスターを作るためのマーカーの箱の大きさに基づく。
    箱の中心はマーカーの位置で、半径はmiriLat,miriLon(1つの点に含まれる緯度と経度の数を調べて算出したもの)に基づく。
    2つのマーカーの箱が交差すると、同じクラスターに属することになる。
    • radius(optional)
    integer
    default 10    		 クラスタリング時に利用されるマーカー間の距離(単位:ピクセル)
    指定した距離以内のマーカーを一つのクラスターとして表示します。

    clusterに指定する関数例

    function defaultCluster(number, latlng, textStyle) {
  var w = 36;
  var icon = 'clusterermarker1.png';
  var stylefont = 'font-family:arial; color:#FFFFFF; font-size:20px; font-weight: bold;';
  if (number >= 5) {
    w = 40;
    icon = 'clusterermarker2.png';
    stylefont = 'font-family:arial; color:#FFFFFF; font-size:22px; font-weight: bold;';
  }
  if (number >= 10) {
    w = 44;
    icon = 'clusterermarker3.png';
    stylefont = 'font-family:arial; color:#FFFFFF; font-size:22px; font-weight: bold;';
  }
  if (number >= 50) {
    w = 48;
    icon = 'clusterermarker4.png';
    stylefont = 'font-family:arial; color:#FFFFFF; font-size:24px; font-weight: bold;';
  }
  if (number >= 100) {
    w = 58;
    icon = 'clusterermarker5.png';
    stylefont = 'font-family:arial; color:#FFFFFF; font-size:24px ;font-weight: bold;';
  }
  icon = window.ZDC._IMG_PATH + '/css/png/' + icon;
  var labelHTML =
    '<div ' +
    'style="' +
    'width: ' + w + 'px;' +
    'height: ' + w + 'px;' +
    'line-height: ' + w + 'px;' +
    'text-align: center;' +
    (textStyle || 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 widgetOptions = {
    'htmlSource': labelHTML,
    'offset': new ZDC.Point(-w / 2, -w / 2),
    'propagation': true
  };
  return new ZDC.UserWidget(latlng, widgetOptions);
};

    Methods

    getClusterMarker()

    登録されたマーカーを全て取得します。

    Returns
    Type:Array<Marker>
    登録されたマーカーのリストを返却します。
    addMarkers(markers)

    マーカーを追加します。

    Parameters
    markers(Array<Marker>)
    追加するマーカー
    removeMarkers()

    クラスターに登録されている全てのマーカーを地図から削除します。

    show()

    クラスターを表示します。

    hide()

    クラスターを非表示にします。

    getMaxZoom()

    クラスタリングされる最大ズームレベルを取得します。

    Returns
    Type:number
    クラスタリングされる最大ズームレベル
    setMaxZoom(maxZoom)

    クラスタリングされる最大ズームレベルを設定します。
    この値を超えるレベルではクラスタリングされません。

    Parameters
    maxZoom(number)
    クラスタリングされる最大ズームレベル
    setMethod(method)

    クラスタリングアルゴリズムを設定します。

    Parameters
    method(string)
    クラスタリングアルゴリズム。
    constructorのoptionsのmethodと同様です。
    setOptions(options)

    オプションを設定します。

    Parameters
    options(Object)
    オプション設定。constructorのoptionsと同じ。
    setRadius(radius)

    クラスタリング時に利用されるマーカー間の距離(単位: ピクセル)を指定します。
    指定した距離以内のマーカーを一つのクラスターとして表示します。

    Parameters
    radius(number)
    クラスター対象マーカー間距離(単位:ピクセル)
    setZIndex(zIndex)

    重なりの順序を設定します。値が同一のウィジェットとの重なり順は保証されません。

    ウィジェットクラス間でのみ有効です。図形との重なり順序は保証されません。
    図形クラス:Polygon,Polyline,Oval,GroundOverlay,ImageLayer,GLLabel
    ウィジェットクラス:Popup,Marker,UserWidget,MarkerCluster,StataicUserWidget

    Parameters
    zIndex(number)
    重なり順
    大きい数字であれば手前、小さい場合は奥に配置されます。
    Throws
    zIndexが0以下の場合、エラーとなります。
    Example
    // 奥のレイヤー
lowerGroundOverlay.setZIndex(101);
// 手前のレイヤー
upperGroundOverlay.setZIndex(102);
    getId()

    idを取得します。

    Returns
    Type:string
    idを返却します。