Adicionar uma camada de mapa de calor a um mapa

Os mapas de calor, também conhecidos como mapas de densidade de pontos, são um tipo de visualização de dados. Eles são usados para representar a densidade de dados usando um intervalo de cores e mostrar os "pontos quentes" de dados em um mapa. Os mapas de calor são uma ótima maneira de renderizar conjuntos de dados com um grande número de pontos.

Renderizar dezenas de milhares de pontos como símbolos pode cobrir a maior parte da área do mapa. Este caso provavelmente resulta na sobreposição de muitos símbolos. Dificultando uma melhor compreensão dos dados. No entanto, visualizar esse mesmo conjunto de dados como um mapa de calor facilita a visualização da densidade e da densidade relativa de cada ponto de dados.

Você pode usar mapas de calor em muitos cenários diferentes, incluindo:

• Dados de temperatura: fornece aproximações para qual é a temperatura entre dois pontos de dados.
• Dados para sensores de ruído: Mostra não só a intensidade do ruído onde o sensor está, mas também pode fornecer informações sobre a dissipação à distância. O nível de ruído em qualquer local pode não ser alto. Se a área de cobertura de ruído de vários sensores se sobrepuser, é possível que essa área sobreposta tenha níveis de ruído mais altos. Como tal, a área sobreposta seria visível no mapa de calor.
• Rastreamento GPS: Inclui a velocidade como um mapa de altura ponderada, onde a intensidade de cada ponto de dados é baseada na velocidade. Por exemplo, esta funcionalidade fornece uma forma de ver onde um veículo estava em excesso de velocidade.

Gorjeta

Por padrão, as camadas de mapa de calor renderizam as coordenadas de todas as geometrias em uma fonte de dados. Para limitar a camada de modo que ela processe apenas recursos de geometria de ponto, defina a filter propriedade da camada como ['==', ['geometry-type'], 'Point']. Se você quiser incluir recursos do MultiPoint também, defina a filter propriedade da camada como ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']].

Adicionar uma camada de mapa térmico

Para renderizar uma fonte de dados de pontos como um mapa de calor, passe sua fonte de dados para uma instância da HeatMapLayer classe e adicione-a ao mapa.

No código a seguir, cada ponto de calor tem um raio de 10 pixels em todos os níveis de zoom. Para garantir uma melhor experiência do usuário, o mapa de calor está abaixo da camada de etiqueta. Os rótulos permanecem claramente visíveis. Os dados nesta amostra são do Programa de Riscos de Terremoto do USGS. É para terremotos significativos que ocorreram nos últimos 30 dias.

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Load a dataset of points, in this case earthquake data from the USGS.
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');

//Create a heat map and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
  radius: 10,
  opacity: 0.8
}), 'labels');

O exemplo Simple Heat Map Layer demonstra como criar um mapa de calor simples a partir de um conjunto de dados de recursos pontuais. Para obter o código-fonte deste exemplo, consulte Código fonte da camada de mapa de calor simples.

Personalizar a camada de mapa de calor

O exemplo anterior personalizou o mapa de calor definindo as opções de raio e opacidade. A camada de mapa de calor fornece várias opções de personalização, incluindo:

• radius: Define um raio de pixel no qual renderizar cada ponto de dados. Você pode definir o raio como um número fixo ou como uma expressão. Usando uma expressão, você pode dimensionar o raio com base no nível de zoom e representar uma área espacial consistente no mapa (por exemplo, um raio de 5 milhas).

• color: Especifica como o mapa de calor é colorido. Um gradiente de cores é uma característica comum dos mapas de calor. Você pode obter o efeito com uma interpolate expressão. Você também pode usar uma step expressão para colorir o mapa de calor, dividindo a densidade visualmente em intervalos que se assemelham a um mapa de contorno ou estilo de radar. Essas paletas de cores definem as cores do valor de densidade mínima para máxima.

  Você especifica valores de cor para mapas de calor como uma expressão no heatmap-density valor. A cor da área onde não há dados é definida no índice 0 da expressão "Interpolação" ou a cor padrão de uma expressão "Escalonada". Você pode usar esse valor para definir uma cor de plano de fundo. Muitas vezes, esse valor é definido como transparente ou um preto semitransparente.

  Aqui estão exemplos de expressões de cores:

  Expressão de cores de interpolação	Expressão de cor escalonada
  [     «interpolar»,     ['linear'],     ['densidade do mapa de calor'],     0, «transparente»,     0,01, «roxo»,     0.5, «#fb00fb»,     1, «#00c3ff» ]	[     «passo»,     ['densidade do mapa de calor'],     «transparente»,     0.01, «marinha»,     0,25, «verde»,     0,50, «amarelo»,     0,75, 'vermelho' ]

• opacity: Especifica o quão opaca ou transparente é a camada do mapa de calor.

• intensity: Aplica um multiplicador ao peso de cada ponto de dados para aumentar a intensidade geral do mapa de calor. Isso causa uma diferença no peso dos pontos de dados, facilitando a visualização.

• weight: Por padrão, todos os pontos de dados têm um peso de 1 e são ponderados igualmente. A opção de peso atua como um multiplicador e você pode defini-la como um número ou uma expressão. Se um número é definido como o peso, é a equivalência de colocar cada ponto de dados no mapa duas vezes. Por exemplo, se o peso é 2, então a densidade dobra. Definir a opção de peso para um número renderiza o mapa de calor de forma semelhante ao uso da opção de intensidade.

  No entanto, se você usar uma expressão, o peso de cada ponto de dados pode ser baseado nas propriedades de cada ponto de dados. Por exemplo, suponha que cada ponto de dados representa um terremoto. O valor da magnitude tem sido uma métrica importante para cada ponto de dados do terremoto. Os terremotos acontecem o tempo todo, mas a maioria tem uma baixa magnitude e não é notada. Use o valor de magnitude em uma expressão para atribuir o peso a cada ponto de dados. Usando o valor de magnitude para atribuir o peso, você obtém uma melhor representação do significado dos terremotos dentro do mapa de calor.

• source e source-layer: Permitir que você atualize a fonte de dados.

O exemplo de Opções da camada de mapa de calor mostra como as diferentes opções da camada de mapa de calor afetam a renderização. Para obter o código-fonte deste exemplo, consulte Heat Map Layer Options sourcecode.

Mapa de calor com zoom consistente

Por padrão, os raios dos pontos de dados renderizados na camada de mapa de calor têm um raio de pixel fixo para todos os níveis de zoom. À medida que você amplia o mapa, os dados se agregam e a camada do mapa de calor parece diferente.

Use uma zoom expressão para dimensionar o raio para cada nível de zoom, de modo que cada ponto de dados cubra a mesma área física do mapa. Essa expressão faz com que a camada de mapa de calor pareça mais estática e consistente. Cada nível de zoom do mapa tem o dobro de pixels vertical e horizontalmente do que o nível de zoom anterior.

Dimensionar o raio para que ele duplique a cada nível de zoom cria um mapa de calor que parece consistente em todos os níveis de zoom. Para aplicar esse dimensionamento, use zoom com uma expressão de base 2 exponential interpolation , com o raio de pixel definido para o nível mínimo de zoom e um raio dimensionado para o nível de zoom máximo calculado conforme 2 * Math.pow(2, minZoom - maxZoom) mostrado no exemplo a seguir. Amplie o mapa para ver como o mapa de calor é dimensionado com o nível de zoom.

O exemplo de Mapa de Calor com zoom consistente mostra como criar um mapa de calor em que o raio de cada ponto de dados cobre a mesma área física no solo, criando uma experiência de usuário mais consistente ao ampliar o mapa. O mapa de calor nesta amostra escala consistentemente entre os níveis de zoom 10 e 22. Cada nível de zoom do mapa tem o dobro de pixels vertical e horizontalmente do que o nível de zoom anterior. Dobrar o raio com cada nível de zoom cria um mapa de calor que parece consistente em todos os níveis de zoom. Para obter o código-fonte deste exemplo, consulte Código-fonte consistente do Mapa de Calor com zoom.

A zoom expressão só pode ser usada em step e interpolate expressões. A expressão a seguir pode ser usada para aproximar um raio em metros. Esta expressão usa um espaço reservado radiusMeters, que você deve substituir pelo raio desejado. Esta expressão calcula o raio aproximado de pixels para um nível de zoom no equador para os níveis de zoom 0 e 24 e usa uma exponential interpolation expressão para dimensionar entre esses valores da mesma forma que o sistema de mosaico no mapa funciona.

[
    'interpolate',
    ['exponential', 2],
    ['zoom'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, ['*', radiusMeters, 214.34637593279402]
]

Gorjeta

Quando você habilita o clustering na fonte de dados, os pontos próximos uns dos outros são agrupados como um ponto clusterizado. Você pode usar a contagem de pontos de cada cluster como a expressão de peso para o mapa de calor. Isso pode reduzir significativamente o número de pontos a serem renderizados. A contagem de pontos de um cluster é armazenada em uma point_count propriedade do recurso de ponto:

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['get', 'point_count']
});

Se o raio de agrupamento for de apenas alguns pixels, haveria uma pequena diferença visual na renderização. Um raio maior agrupa mais pontos em cada cluster e melhora o desempenho do mapa de calor.

Próximos passos

Saiba mais sobre as classes e métodos usados neste artigo:

HeatMapLayer

HeatMapLayerOptions

Para obter mais exemplos de código para adicionar aos seus mapas, consulte os seguintes artigos:

Criar uma fonte de dados

Usar expressões de estilo orientadas por dados