이 페이지에서는 iOS용 Maps SDK의 유틸리티 라이브러리에서 사용할 수 있는 히트맵 유틸리티에 대해 설명합니다. 히트맵은 지도에 데이터 지점의 분포와 밀도를 표현하는 데 유용합니다.
이 동영상에서는 지도에서 다수의 데이터 지점이 필요한 데이터의 경우, 마커를 대신하여 히트맵을 사용하는 방법을 설명합니다.
히트맵을 사용하면 사용자가 지도에서 데이터 지점의 분포와 상대적 강도를 쉽게 이해할 수 있습니다. 히트맵은 각 위치에 마커를 배치하는 대신 색상을 사용하여 데이터의 분포를 나타냅니다.
아래 예에서 빨간색은 오스트레일리아 빅토리아에서 경찰서가 집중된 지역을 나타냅니다.
아직 라이브러리를 설정하지 않았다면 이 페이지의 나머지 부분을 읽기 전에 설정 가이드를 따르세요.
간단한 히트맵 추가
지도에 히트맵을 추가하려면 각 관심 위치의 좌표로
구성된 데이터 세트가 필요합니다. 먼저 GMUHeatmapTileLayer
인스턴스를 만들고 map
속성을 GMSMapView
로 설정합니다.
앱의 viewDidLoad()
함수에서 이를 실행하여 히트맵을 사용하기 전에 기본 지도가 로드되도록 합니다. 그런 다음 GMUWeightedLatLng
객체 컬렉션을 GMUHeatmapTileLayer
인스턴스에 전달합니다.
이 유틸리티는 GMUWeightedLatLng
객체 컬렉션을 허용하는 GMUHeatmapTileLayer
클래스를 제공합니다. 제공된 반경, 그라데이션, 불투명도 옵션에 따라 다양한 확대/축소 수준의 타일 이미지를
생성합니다.
세부 단계:
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
인스턴스를 처음 만들 때 또는 언제든지 옵션의 새 값을 설정하여 옵션을 설정할 수 있습니다.
사용할 수 있는 옵션은 다음과 같습니다.
반경: 히트맵에 적용되는 가우시안 블러(Gaussian blur)의 크기이며, 픽셀로 표시됩니다. 기본값은 20입니다. 값은 10~50 사이여야 합니다.
GMUHeatmapTileLayer.radius
를 사용하여 반경을 설정합니다.그라데이션: 히트맵에서 색상 지도를 생성하는 데 사용하는 가장 낮은 강도에서 가장 높은 강도까지의 색상 범위입니다.
GMUGradient
은 색상이 포함된 정수 배열과 각 색상의 시작점을 나타내는 부동 소수점 배열을 사용하여 생성됩니다. 최대 강도의 백분율로 지정되고 0~1 사이의 분수로 표현됩니다. 단색 그라데이션에는 한 가지 색상만 지정하고 다색 그라데이션에는 2개 이상의 색상을 지정해야 합니다. 컬러 지도는 이러한 색상 간에 보간을 사용하여 생성됩니다. 기본 그라데이션은 2개의 색상을 사용합니다.colorMapSize
매개변수는 그라데이션의 단계 수를 정의합니다. 숫자가 클수록 그라데이션이 더 부드러워지며, 숫자가 적을수록 윤곽 그래프와 같이 선명한 전환이 됩니다.GMUHeatmapTileLayer.gradient
를 사용하여 그라데이션을 설정합니다.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;
기존 옵션 업데이트
이미 설정된 옵션을 업데이트하려면 다음 단계를 따르세요.
- 옵션을 원하는 값으로 업데이트합니다.
GMUHeatmapTileLayer.clearTileCache()
를 호출합니다.
데이터 세트 변경
히트맵의 기반이 되는 데이터 세트를 변경하려면 다음 단계를 따르세요.
- 데이터 수집을 업데이트합니다.
GMUHeatmapTileLayer.weightedData
를 사용하여GMUWeightedLatLng
의 배열을 전달합니다. GMUHeatmapTileLayer.clearTileCache()
를 호출합니다.
히트맵 제거
히트맵을 삭제하려면 GMUHeatmapTileLayer.map
를 호출하여 nil
를 전달합니다.
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
데모 앱 보기
히트맵 구현의 다른 예는 유틸리티 라이브러리와
함께 제공되는 데모 앱에서 HeatmapViewController
를 참고하세요.
설정 가이드는 데모 앱을 실행하는 방법을
보여줍니다.