히트맵

플랫폼 선택: Android iOS JavaScript

이 페이지에서는 유틸리티에서 사용할 수 있는 히트맵 유틸리티에 대해 라이브러리를 iOS용 Maps SDK를 사용하는 것이 좋습니다. 히트맵은 분포를 나타내는 데 유용하며 데이터 포인트의 밀도를 나타냅니다.

이 동영상에서는 지도에서 다수의 데이터 지점이 필요한 데이터의 경우, 마커를 대신하여 히트맵을 사용하는 방법을 설명합니다.

히트맵을 사용하면 뷰어가 분포와 상대적 분포를 쉽게 이해할 수 있습니다. 데이터 포인트의 강도를 나타냅니다. 각 위치에 마커를 배치하는 대신 히트맵은 색상을 사용하여 데이터의 분포를 나타냅니다.

아래 예에서 빨간색은 경찰이 집중된 지역을 나타냅니다. 호주 빅토리아에 있습니다.

<ph type="x-smartling-placeholder">
</ph> 경찰서 위치를 보여주는 히트맵이 표시된 지도
지도 위의 히트맵

아직 라이브러리를 설정하지 않았다면 설정 방법에 따라 가이드를 읽어본 후에 이 페이지를 방문하세요.

간단한 히트맵 추가

지도에 히트맵을 추가하려면 좌표를 확인할 수 있습니다. 먼저, GMUHeatmapTileLayer 인스턴스에서 map 속성을 GMSMapView로 설정합니다. 앱의 viewDidLoad() 함수에서 이를 실행하여 기본 지도가 로드한 것입니다. 그런 다음 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는 다음을 사용하여 생성됩니다. 색을 포함하는 정수 배열과 최대 강도의 백분율로 주어진 각 색상의 시작점 0에서 1 사이의 분수로 표현됩니다. 여러 개의 광고 소재에 대해 단색 그라데이션 또는 여러 색상의 그라데이션의 경우 최소 2개의 색상 그라데이션합니다. 컬러 지도는 이러한 색상 간에 보간을 사용하여 생성됩니다. 기본 그라데이션은 2개의 색상을 사용합니다. colorMapSize 매개변수는 다음을 정의합니다. 단계 수를 나타냅니다. 숫자가 클수록 더 부드러워집니다. 숫자가 적을수록 그라데이션이 적음 윤곽 그래프. GMUHeatmapTileLayer.gradient를 사용하여 그라데이션을 설정합니다.

  3. Opacity: 전체 히트맵 레이어의 불투명도 및 범위입니다. 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 유틸리티 라이브러리와 함께 제공되는 데모 앱의 경우 설정 가이드에서 다음 작업을 할 수 있습니다. 데모 앱을 실행합니다