Camada de mapa de calor

Selecione a plataforma: Android iOS JavaScript
  1. Visão geral
  2. Carregar a biblioteca de visualização
  3. Adicionar pontos de dados ponderados
  4. Personalizar uma camada de mapa de calor

A camada de mapa de calor renderiza mapas de calor no lado do cliente.

Visão geral

Um mapa de calor é uma visualização que demonstra a intensidade dos dados em pontos geográficos. Quando a camada de mapa de calor é ativada, uma sobreposição colorida é mostrada sobre o mapa. Por padrão, as áreas de maior intensidade ficam em vermelho e as de menor intensidade em verde.

Carregar a biblioteca de visualização

A camada do mapa de calor faz parte da biblioteca google.maps.visualization e não é carregada por padrão. As classes de Visualization são uma biblioteca independente, separada do código principal da API Maps JavaScript. Carregue essa biblioteca usando o parâmetro libraries no URL de inicialização da API Maps JavaScript para utilizar as funcionalidades dela:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

Adicionar uma camada de mapa de calor

Para adicionar uma camada do mapa de calor, primeiro você precisa criar um objeto HeatmapLayer e fornecer alguns dados geográficos como uma matriz ou um objeto MVCArray[]. Os dados podem ser um objeto LatLng ou WeightedLocation. Faça a instância e adicione o objeto HeatmapLayer ao mapa chamando o método setMap().

O exemplo a seguir adiciona 14 pontos de dados a um mapa de São Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Adicionar pontos de dados ponderados

Um mapa de calor renderiza objetos LatLng ou WeightedLocation ou uma combinação dos dois. Os dois objetos representam um único ponto de dados em um mapa, mas um objeto WeightedLocation permite especificar uma ponderação para o ponto de dados. Use uma ponderação em um ponto de dados para que WeightedLocation seja renderizado com uma intensidade maior que um simples objeto LatLng. A ponderação é uma escala linear, em que cada objeto LatLng tem um peso implícito de 1. Adicione um único WeightedLocation de {location: new google.maps.LatLng(37.782, -122.441), weight: 3} para ter o mesmo efeito que incluir google.maps.LatLng(37.782, -122.441) três vezes. É possível combinar objetos weightedLocation e LatLng em uma única matriz.

Usar um objeto WeightedLocation em vez de LatLng pode ser útil quando você:

  • Adiciona grandes quantidades de dados em um único local. Renderiza um único objeto WeightedLocation com um peso de 1.000, o que é mais rápido do que a renderização de 1.000 objetos LatLng.
  • Enfatiza dados com base em valores arbitrários. Por exemplo, você pode usar objetos LatLng para plotar dados de terremotos, mas convém utilizar um WeightedLocation para medir a magnitude de cada terremoto na escala Richter.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Personalizar uma camada de mapa de calor

É possível personalizar a renderização do mapa de calor com as opções abaixo. Para mais informações, consulte a documentação sobre o HeatmapLayerOptions.

  • dissipating: especifica se mapas de calor se dissipam com o zoom. Se o valor é falso (false), o raio de influência aumenta com o nível de zoom para garantir que a intensidade de cor seja preservada em todas as localizações geográficas. O padrão é verdadeiro (true).
  • gradient: o gradiente de cor do mapa de calor, especificado como uma matriz de strings de cores CSS. Todas as cores CSS3, incluindo RGBA, são aceitas, com exceção das cores nomeadas estendidas (links em inglês) e dos valores HSL(A).
  • maxIntensity: a intensidade máxima do mapa de calor. Por padrão, as cores do mapa de calor são dimensionadas dinamicamente de acordo com a maior concentração de pontos em qualquer pixel específico do mapa. Essa propriedade também permite especificar um máximo fixo. Pode ser útil definir a intensidade máxima quando o conjunto de dados contém algumas exceções com uma intensidade excepcionalmente alta.
  • radius: o raio da influência de cada ponto de dados, em pixels.
  • opacity: a opacidade do mapa de calor, expressa como um número entre 0 e 1.

O exemplo abaixo mostra algumas opções de personalização disponíveis.

Exemplo