このページでは、ユーティリティで使用できるヒートマップ ユーティリティについて説明します。 のライブラリ Maps SDK for iOS ヒートマップは データポイントの密度を表します。
この動画では、マップ上に多数のデータポイントが必要なデータの場合に、マーカーの代わりとしてヒートマップを使用する方法を説明します。
ヒートマップを使うと、視聴者の分布と相対的な データポイントの強度を表します。それぞれの位置にマーカーを配置するのではなく、 ヒートマップでは、データの分布を色で表現します。
以下の例では、赤は警察が密集している地域を表しています。 オーストラリアのビクトリアにあるステーションです。
<ph type="x-smartling-placeholder">![警察署の場所を示すヒートマップが表示されているマップ](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/ios-sdk/images/heatmap-ios.png?authuser=7&hl=ja)
ライブラリをまだセットアップしていない場合は、セットアップ手順 ガイドをお読みのうえ、 このページをご覧ください。
単純なヒートマップの追加
マップにヒートマップを追加するには、
座標を指定します。まず、
GMUHeatmapTileLayer
インスタンスを作成し、map
プロパティを GMSMapView
に設定します。
これをアプリの viewDidLoad()
関数で行い、基本地図が
読み込み済みの状態を表します。次に、Terraform の
GMUWeightedLatLng
オブジェクトを GMUHeatmapTileLayer
インスタンスに追加します。
このユーティリティには GMUHeatmapTileLayer
クラスが用意されています。このクラスは、
GMUWeightedLatLng
オブジェクトのコレクション。ユーザーのタイル画像を作成し、
半径、グラデーション、不透明度のオプションに基づく、さまざまなズームレベル
提供します。
次に、各ステップの詳細を示します。
GMUHeatmapTileLayer
インスタンスを作成し、map
プロパティをGMSMapView
(アプリのviewDidLoad()
関数で行います)。GMUWeightedLatLng
オブジェクトのコレクションをGMUHeatmapTileLayer
インスタンス。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
インスタンスを作成するか、
オプションに新しい値を設定します。
以下のオプションを使用できます。
半径: ヒートマップに適用されるガウスぼかしのサイズ。 ピクセル単位です。デフォルト値は 20 です。10 から 50 の間である必要があります。使用
GMUHeatmapTileLayer.radius
: 半径を設定します。グラデーション: ヒートマップの色の生成に使用する色の範囲 最も強度の低いものから最大まで、非常に高い強度で対応しています。
GMUGradient
は、 色を含む整数配列と、色を示す float 配列が 各色の開始点。最大輝度に対するパーセンテージで表されます。 0 ~ 1 の分数で表します。1 つの色のみを指定する必要があります。 単色のグラデーションか、マルチカラーのグラデーションでは 2 色以上 できます。カラーマップは、これらの色間の補間を使用して生成されます。 デフォルトのグラデーションでは 2 色が使用されます。colorMapSize
パラメータは、 勾配のステップ数を決定します数値が大きいほど、より滑らかに 数値が小さいほど、 等高線グラフです。GMUHeatmapTileLayer.gradient
を使用してグラデーションを設定します。不透明度: ヒートマップ レイヤ全体の不透明度です。 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;
既存のオプションを更新する
すでに設定されているオプションを更新する方法は次のとおりです。
- オプションを目的の値に更新します。
GMUHeatmapTileLayer.clearTileCache()
までお電話ください。
データセットの変更
ヒートマップを作成するデータセットを変更するには:
- データ収集を更新してください。
GMUHeatmapTileLayer.weightedData
を使用して、次を渡します。GMUWeightedLatLng
の配列。 GMUHeatmapTileLayer.clearTileCache()
までお電話ください。
ヒートマップの削除
ヒートマップを削除するには、GMUHeatmapTileLayer.map
を呼び出して nil
を渡します。
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
デモアプリを見る
ヒートマップ実装の別の例については、
ユーティリティ ライブラリに付属のデモアプリの HeatmapViewController
。
設定ガイドでは、
デモアプリを実行します。