iOS 開発者ガイド for SDK

マーカークラスタリング

マーカーのクラスタリングを使用すると、地図に一度に表示されているマーカーの数が多すぎることによって生じる視覚的な過負荷を軽減できます。 この機能では、近接するマーカーが自動的に番号付きのクラスタマーカーに置き換えられ、複数のマップマーカーが表示されていることが示されます。 ユーザー体験を向上させるために、置き換えアルゴリズムはデバイスのピクセル密度に依存します。 そのため、異なるデバイスでさまざまな動作を確認できます。

図 1. クラスタマーカー

クラスタマーカーを表示しています

を使用 NMAClusterLayer してマップマーカーを追加することで、マップでクラスタマーカーを有効にできます。 レイヤー上のすべてのマーカーは、マップズーム レベルに依存するグリッドベースのクラスタリングアルゴリズムに基づいて自動的にクラスタ化されます。

NMAClusterLayer 次の手順では、クラスの使用方法を示します。

  1. 通常どおりマップマーカーを作成します。
    NMAMapMarker *mm =
      [NMAMapMarker
        mapMarkerWithGeoCoordinates:[NMAGeoCoordinates geoCoordinatesWithLatitude:54.54
          longitude:13.23]
        image:[UIImage imageNamed:@"marker@1x.png"]];
    
  2. ClusterLayer オブジェクトを作成します。
    NMAClusterLayer *cl = [[NMAClusterLayer alloc] init];
  3. 地図ではなく、クラスターレイヤーにマーカーを直接追加します。
    [cl addMarker:mm];
    addMarkers: メソッドを使用して、単一のマーカーを追加する代わりに、 NMAMapMarkerNSArray を追加することもできます。
  4. クラスタレイヤーをマップに追加します。
    [activeMapView addClusterLayer:cl];
    注 : この 2 つのステップの順序は重要ではありません。 クラスターレイヤーをまずマップに追加し、後でクラスターレイヤーにマーカーを追加することもできます。
  5. マーカー、コレクション、またはマーカーをクラスタレイヤーから再度削除するには、次のコマンドを呼び出します。
    [cl removeMarker:mm];

markers のプロパティを使用 NMAClusterLayerして、クラスタレイヤー上のすべてのマーカーを取得することもできます。 removeMarkers: これは、メソッドを使用してすべてのマーカーを削除する場合に役立ちます。

テーマ

NMAClusterTheme にオブジェクトを割り当てることで、クラスタをカスタマイズ NMAClusterLayerできます。 すべてのテーマは複数のスタイルで構成されています。このスタイルでは、クラスタースタイルによって、特定の密度でのマーカークラスターオブジェクトの外観が定義されます。 クラスタ密度は、クラスタが表すマーカーの数を示します。

図 2. 密度が 7 のクラスタ

で使用できるクラスタスタイルに NMAClusterThemeは、次の 3 つがあります。

  • デフォルトのクラスタスタイル - 事前定義されたマーカーの動作。 これは、テーマを設定していない場合に使用される既定のスタイルです。 独自のテーマでカバーされていない範囲にも使用されます。
  • NMABasicClusterStyle - 既定のスタイルと似ていますが、マーカーの塗りつぶしの色、テキストの色、および線の色を変更できます。
  • NMAImageClusterStyle - 独自のビットマップイメージをマーカーとして使用します。

スタイルを設定するには、 NMAClusterThemesetStyle:forDensityRange: メソッドを使用します。 たとえば、密度 10 19 の範囲内のすべてのクラスタで赤、 2030 のクラスタで緑、その他のすべてのケースでデフォルトの青を使用する場合は、次のように NMABasicClusterStyle 使用できます。

  1. 赤い円と緑のスタイルでスタイルを作成します。
    NMABasicClusterStyle *redStyle = [NMABasicClusterStyle style];
    redStyle.fillColor = [UIColor redColor];
    NMABasicClusterStyle *greenStyle = [NMABasicClusterStyle style];
    greenStyle.fillColor = [UIColor greenColor];
    
  2. 新しいテーマを作成し、これらのスタイルをテーマに追加します。また、使用する濃度範囲を定義します。
    NMAClusterTheme *theme = [[NMAClusterTheme alloc] init];
    [theme setStyle:redStyle forDensityRange:NSMakeRange(10, 9)];
    [theme setStyle:greenStyle forDensityRange:NSMakeRange(20, 10)];
    
    注 : 濃度範囲が重複していないことを確認してください。重複している場合は、 setStyle:forDensityRange: 戻り値 NO が返され
  3. 最後に、使用するクラスタレイヤーにこのテーマを追加します。
    cl.theme = theme;

独自のイメージをクラスタアイコンとして使用するには、スタイルをクラスタテーマに設定する前に、 UIImageNMAImageClusterStyle インスタンスに設定します。 例 :

NMAImageClusterStyle *imageStyle =
  [NMAImageClusterStyle
    styleWithUIImage:[UIImage imageNamed:@"cluster-icon.png"]];

NMAClusterTheme *theme = [[NMAClusterTheme alloc] init];
  [theme setStyle:imageStyle forDensityRange:NSMakeRange(2, 8)];
  cl.theme = theme;

レイヤーごとに設定できるテーマは 1 つだけですが、 1 つのテーマで異なる密度のスタイルを混在させることができます。 たとえば、密度の NMABasicClusterStyle10 から 19 へ、密度の NMAImageClusterStyle から 20 からから 30 へ設定できます。 既定のテーマは、カスタムテーマでカバーされていない他のすべての濃度に適用されます。

クラスタマーカーイベント

クラスタマーカーは、マップ上の通常のマーカーと似ています。 通常の地図マーカーと同様に、マップ オブジェクトジェスチャデリゲートを使用することもできます。 例 :

  1. NMAMapView 代理人を設定します。
    self.mapView.delegate = self;
  2. 地図 mapView:didSelectObjects: の Click イベントを取得するには、を実装します。
    - (void)mapView:(NMAMapView *)mapView didSelectObjects:(NSArray *)objects
    {
      for (NMAClusterViewObject *object in objects) {
        if ([object isKindOfClass:[NMAClusterViewObject class]]) {
          NSLog(@"Cluster of %d markers", object.markers.count);
        }
      }
    }

クラスタの操作

HERE SDK には、マーカークラスタと対話するための他の方法もいくつかあります。 を使用 NMAClusterViewObjectして、特定のクラスタ内のすべてのマーカーを取得できます。これは、クラスタを表すプロキシオブジェクトクラスです。 例 :

NMAGeoCoordinates *coordinates =
  [NMAGeoCoordinates geoCoordinatesWithLatitude:0 longitude:0]; // Your coordinates
NSArray *objects =
  [self.mapView objectsAtPoint:[self.mapView pointFromGeoCoordinates:coordinates]];

for (NMAClusterViewObject *object in objects) {
    if ([object isKindOfClass:[NMAClusterViewObject class]]) {
      NSArray *clusterMarkers = object.markers; // Your clustered markers
    }
  }

次のコマンドを呼び出して、クラスタマーカー内のすべてのマーカーの周囲のバウンディング ボックスを取得することもできます。

NMAClusterViewObject *cluster;
NMAGeoBoundingBox *boundingBox = cluster.boundingBox;