Mapas de calor

Esta página descreve o utilitário mapa de calor disponível na biblioteca de utilitários do SDK do Maps para iOS. Os mapas de calor são úteis para representar a distribuição e a densidade de pontos de dados em um mapa.

Este vídeo fala sobre o uso de mapas de calor como uma alternativa aos marcadores quando os dados exigem um grande número de pontos de dados no mapa.

Os mapas de calor facilitam a compreensão da distribuição e da intensidade relativa de pontos de dados em um mapa. Em vez de colocar um marcador em cada local, os mapas de calor usam cores para representar a distribuição dos dados.

No exemplo abaixo, o vermelho representa as áreas de alta concentração de delegacias de polícia em Victoria, Austrália.

Se você ainda não configurou a biblioteca, siga o guia de configuração antes de ler o restante desta página.

Como adicionar um mapa de calor simples

Para adicionar um mapa de calor ao mapa, você precisará de um conjunto de dados com as coordenadas de cada local de interesse. Primeiro, crie uma instância GMUHeatmapTileLayer, definindo a propriedade map como GMSMapView. Faça isso na função viewDidLoad() do app para garantir que o mapa básico seja carregado antes de trabalhar com o mapa de calor. Em seguida, transmita uma coleção de objetos GMUWeightedLatLng para a instância GMUHeatmapTileLayer.

O utilitário fornece a classe GMUHeatmapTileLayer, que aceita uma coleção de objetos GMUWeightedLatLng. Ele cria as imagens de blocos para vários níveis de zoom, com base nas opções de raio, gradiente e opacidade fornecidas.

Mais detalhes das etapas:

1. Crie uma instância GMUHeatmapTileLayer, definindo a propriedade map como uma GMSMapView. Faça isso na função viewDidLoad() do app.
2. Transmita uma coleção de objetos GMUWeightedLatLng para a instância GMUHeatmapTileLayer.
3. Chame GMUHeatmapTileLayer.map, transmitindo a visualização de mapa.

   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
         

Neste exemplo, os dados são armazenados em um arquivo JSON, police_stations.json. Este é um trecho do arquivo:

[
{"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 }
]

Como personalizar o mapa de calor

O mapa de calor tem várias propriedades personalizáveis. É possível definir as opções ao criar inicialmente a instância GMUHeatmapTileLayer ou a qualquer momento definindo um novo valor para a opção.

As seguintes opções estão disponíveis:

1. Raio:o tamanho do desfoque gaussiano aplicado ao mapa de calor, expresso em pixels. O padrão é 20. O valor precisa estar entre 10 e 50. Use GMUHeatmapTileLayer.radius para definir o raio.

2. Gradiente: um intervalo de cores que o mapa de calor usa para gerar o mapa de cores, variando da menor para a maior intensidade. Uma GMUGradient é criada usando uma matriz de números inteiros contendo as cores, e uma matriz flutuante indicando o ponto de partida para cada cor, considerado como uma porcentagem da intensidade máxima e expressa como uma fração de 0 a 1. Você precisa especificar apenas uma cor para um gradiente de uma cor ou um mínimo de duas cores para um gradiente multicolorido. O mapa de cores é gerado usando interpolação entre essas cores. O gradiente padrão tem duas cores. O parâmetro colorMapSize define o número de etapas no gradiente. Números maiores resultarão em um gradiente mais suave, enquanto números menores proporcionarão transições mais nítidas, semelhantes a um gráfico de contorno. Use GMUHeatmapTileLayer.gradient para definir o gradiente.

3. Opacidade:é a opacidade de toda a camada do mapa de calor, variando de 0 a 1. O padrão é 0,7. Use GMUHeatmapTileLayer.opacity para definir o valor de opacidade.

Por exemplo, crie um Gradient:

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

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

Para alterar a opacidade de um mapa de calor existente:

heatmapLayer.opacity = 0.7
      

_heatmapLayer.opacity = 0.7;
      

Atualizar uma opção existente

Para atualizar uma opção que já foi definida, siga estas etapas:

1. Atualize a opção para o valor desejado.
2. Chame GMUHeatmapTileLayer.clearTileCache().

Como alterar o conjunto de dados

Para alterar o conjunto de dados no qual um mapa de calor é criado:

1. Atualize sua coleta de dados. Use GMUHeatmapTileLayer.weightedData, transmitindo uma matriz de GMUWeightedLatLng.
2. Chame GMUHeatmapTileLayer.clearTileCache().

Como remover um mapa de calor

Para remover um mapa de calor, chame GMUHeatmapTileLayer.map, transmitindo nil.

heatmapLayer.map = nil
      

_heatmapLayer.map = nil;
      

Conferir o app de demonstração

Para ver outro exemplo de implementação de um mapa de calor, consulte o HeatmapViewController no app de demonstração que acompanha a biblioteca de utilitários. O guia de configuração mostra como executar o aplicativo de demonstração.