Rambler Maps APIのクラスター化

Rambler-Cart APIについて詳しく知りましょう。今回は、ラベルのクラスタリングについて説明します。


マップの1つのセクションに集中しているマークが多すぎる場合、それらは互いに重なり合い、マップの重要な部分を覆います。 それらの中から適切なものを見つけて選択することは困難です。 そして一般的に、それはあまりきれいに見えません。



makeClusterメソッドを使用してこの問題に対処できます。makeClusterメソッドは、ラベルをクラスターに結合し、接続されたポイントの数を示すクラスターラベルのみをマップ上に残します。

たとえば、クラスタリング前とクラスタリング後の地図上のモスクワの薬局のラベルを検討します。

多くのタグを作成するには、検索用語「薬局」で検索ジオコーディング方法を使用します。 見つかった結果から取得した座標に基づいて、ラベルを作成します（「前後」の例を示すためだけにラベルを作成します-一般的に、座標の配列でクラスターを作成するのに十分です。これは後で説明します）。

var pharmacies = map.search("", function(err, data, transport){ //   var coordArray = []; //   var markerArray = []; //    var items = data.res[0].matches //  for ( var i=0, item; item=items[i]; i++){ //     coordArray[i] = { lon: item.x, lat: item.y }; //  markerArray[i] = map.geometry.create("marker", { coord: coordArray[i] }) } 

今では小さなものです。 見つかった薬局のラベルの配列はクラスターに分割されます。

  //   (       markerArray,      ) var cl = map.makeCluster(coordArray, { area: "cell", //        //  CSS,      ,    clusterMarker: { "class": "", offsets: {x: -.5, y: -.5}, html: '<div style= "background:#9B2D30; border:1px solid #FFF; color:#FFF; padding:5px; ">${quantity}</div>' } }); console.log(cl); }); 

完了

サンプルのソースコードは、 maps.rambler.ru / api / examples / TutorialClusterize.htmlで入手できます。

PS

クラスタリングアルゴリズムについて少し説明します。 Quadtreeを使用します：最小縮尺（ズームレベル= 1）のマップは4つの正方形に分割され、それぞれに0、1、2、3の番号が割り当てられます。次のズームレベルで、これらの正方形はそれぞれ4つの正方形に再び分割されます。 16個の新しい正方形は、large：00、01、02、03、10、11、...、44に属することに応じて番号が付けられます。正方形を4つの小さな正方形に分割する操作は、特定のスケールレベルnまで繰り返されます。 n個の正方形。それぞれに固有のn桁の番号があります。
正方形の数がわかれば、マップ上のどこに、どの縮尺であるかを判断できます。 このような正方形の1つに表示されるラベルは、クラスターを形成します。
メソッド引数でmaxZoomパラメーターを渡すと、クラスターへのラベルのマージを停止し、個別に（つまり、それぞれ独自の場所で）ラベルを表示する必要があるスケールを示します。 実際、maxZoomは上記の番号nです。