Mapas de calor

Selecione a plataforma: Android iOS JavaScript

Esta página descreve o utilitário de mapa de calor disponível no utilitário para a SDK do Maps para iOS. Os mapas de calor são úteis para representar a distribuição e 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 permitem que os visualizadores compreendam com mais facilidade a distribuição e as taxas intensidade dos pontos de dados em um mapa. Em vez de colocar um marcador em cada 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 polícia em Victoria, Austrália.

Um mapa com mapa de calor mostrando a localização de delegacias de polícia
Mapa de calor em um mapa

Se você ainda não configurou a biblioteca, siga as instruções de configuração guia antes de ler o restante nesta página.

Adicionar um mapa de calor simples

Para adicionar um mapa de calor ao mapa, você precisará de um conjunto de dados que consista nas seguintes informações: coordenadas para cada local de interesse. Primeiro, crie um Instância do GMUHeatmapTileLayer, definindo a propriedade map como GMSMapView. Faça isso na função viewDidLoad() do seu app para garantir que o mapa de base seja carregado antes de trabalhar com o mapa de calor. Em seguida, passe 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 bloco para vários níveis de zoom, com base nas opções de raio, gradiente e opacidade fornecidos.

Mais detalhes das etapas:

  1. Crie uma instância GMUHeatmapTileLayer, definindo a propriedade map como um GMSMapView. Faça isso na função viewDidLoad() do app.
  2. Transmita uma coleção de objetos GMUWeightedLatLng para o 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 inicialmente criando 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. Usar GMUHeatmapTileLayer.radius para definir o raio.

  2. Gradiente:um intervalo de cores usado pelo mapa de calor para gerar cor. mapa, variando da menor para a maior intensidade. Um GMUGradient é criado usando uma matriz de números inteiros contendo as cores e uma matriz flutuante indicando as ponto de partida para cada cor, fornecido como uma porcentagem da intensidade máxima, expresso 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 gradiente. 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 resultam em um resultado gradiente, enquanto números menores geram transições mais nítidas, de contorno. Use GMUHeatmapTileLayer.gradient para definir o gradiente.

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

Por exemplo, crie um 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];

Para alterar a opacidade de um mapa de calor existente:

Swift

heatmapLayer.opacity = 0.7

Objective-C

_heatmapLayer.opacity = 0.7;

Atualizar uma opção existente

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

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

Como alterar o conjunto de dados

Para alterar o conjunto de dados em que um mapa de calor é criado:

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

Como remover um mapa de calor

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

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Conferir o app de demonstração

Para ver outro exemplo de implementação de um mapa de calor, dê uma olhada na HeatmapViewController no app de demonstração que acompanha a biblioteca de utilitários. O guia de configuração mostra como execute o app de demonstração.