ヒートマップ

プラットフォームを選択: Android iOS JavaScript

このページでは、ユーティリティで使用できるヒートマップ ユーティリティについて説明します。 のライブラリ Maps SDK for iOS ヒートマップは データポイントの密度を表します。

この動画では、マップ上に多数のデータポイントが必要なデータの場合に、マーカーの代わりとしてヒートマップを使用する方法を説明します。

ヒートマップを使うと、視聴者の分布と相対的な データポイントの強度を表します。それぞれの位置にマーカーを配置するのではなく、 ヒートマップでは、データの分布を色で表現します。

以下の例では、赤は警察が密集している地域を表しています。 オーストラリアのビクトリアにあるステーションです。

<ph type="x-smartling-placeholder">
</ph> 警察署の場所を示すヒートマップが表示されているマップ
マップ上のヒートマップ

ライブラリをまだセットアップしていない場合は、セットアップ手順 ガイドをお読みのうえ、 このページをご覧ください。

単純なヒートマップの追加

マップにヒートマップを追加するには、 座標を指定します。まず、 GMUHeatmapTileLayer インスタンスを作成し、map プロパティを GMSMapView に設定します。 これをアプリの viewDidLoad() 関数で行い、基本地図が 読み込み済みの状態を表します。次に、Terraform の GMUWeightedLatLng オブジェクトを GMUHeatmapTileLayer インスタンスに追加します。

このユーティリティには GMUHeatmapTileLayer クラスが用意されています。このクラスは、 GMUWeightedLatLng オブジェクトのコレクション。ユーザーのタイル画像を作成し、 半径、グラデーション、不透明度のオプションに基づく、さまざまなズームレベル 提供します。

次に、各ステップの詳細を示します。

  1. GMUHeatmapTileLayer インスタンスを作成し、map プロパティを GMSMapView(アプリの viewDidLoad() 関数で行います)。
  2. GMUWeightedLatLng オブジェクトのコレクションを GMUHeatmapTileLayer インスタンス。
  3. GMUHeatmapTileLayer.map を呼び出して、マップビューを渡します。

    Swift

    class Heatmap: UIViewController {
    
      private var mapView: GMSMapView!
      private var heatmapLayer: GMUHeatmapTileLayer!
    
      override func viewDidLoad() {
        super.viewDidLoad()
        heatmapLayer = GMUHeatmapTileLayer()
        heatmapLayer.map = mapView
      }
    
      // ...
    
      func addHeatmap() {
    
        // Get the data: latitude/longitude positions of police stations.
        guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else {
          return
        }
        guard let data = try? Data(contentsOf: path) else {
          return
        }
        guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else {
          return
        }
        guard let object = json as? [[String: Any]] else {
          print("Could not read the JSON.")
          return
        }
    
        var list = [GMUWeightedLatLng]()
        for item in object {
          let lat = item["lat"] as! CLLocationDegrees
          let lng = item["lng"] as! CLLocationDegrees
          let coords = GMUWeightedLatLng(
            coordinate: CLLocationCoordinate2DMake(lat, lng),
            intensity: 1.0
          )
          list.append(coords)
        }
    
        // Add the latlngs to the heatmap layer.
        heatmapLayer.weightedData = list
      }
    }
          

    Objective-C

    @implementation Heatmap {
      GMSMapView *_mapView;
      GMUHeatmapTileLayer *_heatmapLayer;
    }
    
    - (void)viewDidLoad {
      [super viewDidLoad];
      _heatmapLayer = [[GMUHeatmapTileLayer alloc] init];
      _heatmapLayer.map = _mapView;
    }
    
    // ...
    
    - (void) addHeatmap {
    
      // Get the data: latitude/longitude positions of police stations.
      NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"];
      NSData *data = [NSData dataWithContentsOfURL:path];
      NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
    
      NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init];
      [json enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        NSDictionary *item = (NSDictionary *)obj;
        CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue];
        CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue];
        GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng)
                                                                        intensity:1.0];
        [list addObject:coords];
      }];
    
    
      // Add the latlngs to the heatmap layer.
      _heatmapLayer.weightedData = list;
    }
    @end
          

この例では、データは JSON ファイル police_stations.json に保存されています。 ファイルの抜粋を以下に示します。

[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]

ヒートマップのカスタマイズ

ヒートマップにはカスタマイズ可能なプロパティがいくつかあります。このオプションは GMUHeatmapTileLayer インスタンスを作成するか、 オプションに新しい値を設定します。

以下のオプションを使用できます。

  1. 半径: ヒートマップに適用されるガウスぼかしのサイズ。 ピクセル単位です。デフォルト値は 20 です。10 から 50 の間である必要があります。使用 GMUHeatmapTileLayer.radius: 半径を設定します。

  2. グラデーション: ヒートマップの色の生成に使用する色の範囲 最も強度の低いものから最大まで、非常に高い強度で対応しています。GMUGradient は、 色を含む整数配列と、色を示す float 配列が 各色の開始点。最大輝度に対するパーセンテージで表されます。 0 ~ 1 の分数で表します。1 つの色のみを指定する必要があります。 単色のグラデーションか、マルチカラーのグラデーションでは 2 色以上 できます。カラーマップは、これらの色間の補間を使用して生成されます。 デフォルトのグラデーションでは 2 色が使用されます。colorMapSize パラメータは、 勾配のステップ数を決定します数値が大きいほど、より滑らかに 数値が小さいほど、 等高線グラフです。GMUHeatmapTileLayer.gradient を使用してグラデーションを設定します。

  3. 不透明度: ヒートマップ レイヤ全体の不透明度です。 0 ~ 1 の範囲で設定できますデフォルトは 0.7 です。GMUHeatmapTileLayer.opacity を使用して、 不透明度の値を指定します。

たとえば、Gradient を作成します。

Swift

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

Objective-C

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];
      

既存のヒートマップの不透明度を変更するには、次のようにします。

Swift

heatmapLayer.opacity = 0.7
      

Objective-C

_heatmapLayer.opacity = 0.7;
      

既存のオプションを更新する

すでに設定されているオプションを更新する方法は次のとおりです。

  1. オプションを目的の値に更新します。
  2. GMUHeatmapTileLayer.clearTileCache()までお電話ください。

データセットの変更

ヒートマップを作成するデータセットを変更するには:

  1. データ収集を更新してください。GMUHeatmapTileLayer.weightedData を使用して、次を渡します。 GMUWeightedLatLng の配列。
  2. GMUHeatmapTileLayer.clearTileCache()までお電話ください。
で確認できます。

ヒートマップの削除

ヒートマップを削除するには、GMUHeatmapTileLayer.map を呼び出して nil を渡します。

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

デモアプリを見る

ヒートマップ実装の別の例については、 ユーティリティ ライブラリに付属のデモアプリの HeatmapViewController設定ガイドでは、 デモアプリを実行します。