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つのマーカーの箱が交差すると、同じクラスターに属することになる。
最も処理が軽いメソッドは「k-means」になります。
k-meansは計算内容によっては、地図のズームレベルを最大まで上げてもクラスタリングされたままになる可能性があるため、
ご利用の際に合わせてmaxZoomを設定することを推奨します。
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を返却します。