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 do 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 usada para representar a intensidade dos dados em pontos geográficos. Quando essa camada está ativada, uma sobreposição colorida é exibida sobre o mapa. Por padrão, as áreas de maior intensidade serão coloridas em vermelho, e as áreas de menor intensidade aparecerão verdes.

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 visualização são uma biblioteca independente, separada do código principal da API Maps JavaScript. Para usar a funcionalidade desta biblioteca, primeiro você precisa carregá-la usando o parâmetro libraries no URL de inicialização da API Maps JavaScript:

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

Adicionar uma camada de mapa de calor

Para adicionar uma camada do mapa de calor, crie primeiro um novo objeto HeatmapLayer e forneça a ele alguns dados geográficos na forma de uma matriz ou de um objeto MVCArray[]. Os dados podem ser um objeto LatLng ou WeightedLocation. Depois de instanciar o objeto HeatmapLayer, adicione-o 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 um peso para esse ponto de dados. Aplicar um peso a um ponto de dados fará com que o WeightedLocation seja renderizado com uma intensidade maior que um objeto LatLng simples. O peso é uma escala linear, em que cada objeto LatLng tem um peso implícito de 1. Adicionar um único WeightedLocation de {location: new google.maps.LatLng(37.782, -122.441), weight: 3} terá o mesmo efeito que adicionar 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 no lugar de LatLng pode ser útil quando:

  • Adicionar grandes quantidades de dados em uma única localização. A renderização de um único objeto WeightedLocation com um peso de 1.000 será mais rápida do que a renderização de 1.000 objetos LatLng.
  • Enfatizar dados com base em valores arbitrários. Por exemplo, é possível usar objetos LatLng ao criar dados de terremotos, mas recomendamos usar um WeightedLocation para medir a magnitude de cada terremoto na escala mais avançada.
/* 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

Você pode personalizar como o mapa de calor será renderizado com as seguintes opções. Consulte a documentação de HeatmapLayerOptions para mais informações.

  • dissipating: especifica se os mapas de calor dissipam no zoom. Quando dissipada é falsa, o raio de influência aumenta com o nível de zoom para garantir que a intensidade da cor seja preservada em qualquer localização geográfica. O padrão é "true".
  • gradient: o gradiente de cor do mapa de calor, especificado como uma matriz de strings de cor CSS. Todas as cores CSS3, incluindo RGBA, são compatíveis, exceto as cores nomeadas estendidas e os valores HSL(A).
  • maxIntensity: a intensidade máxima do mapa de calor. Por padrão, as cores do mapa de calor são ajustadas dinamicamente de acordo com a maior concentração de pontos em qualquer pixel específico no mapa. Essa propriedade permite especificar um máximo fixo. Definir a intensidade máxima pode ser útil quando o conjunto de dados contém alguns outliers com uma intensidade excepcionalmente alta.
  • radius: o raio de 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.

Ver exemplo