Pergunta

Eu tenho uma lista de valores, cada um com latitude e longitude.Estou procurando criar uma imagem de mapa de calor translúcida para sobrepor no Google Maps.Eu sei que já existem soluções baseadas em flash e no lado do servidor, mas quero construir isso em javascript usando a tag canvas.

No entanto, não consigo encontrar uma descrição concisa do algoritmo usado para transformar coordenadas e valores em um mapa de calor.Alguém pode fornecer ou criar um link para um?

Obrigado.

Nenhuma solução correta

Outras dicas

A idéia básica seria criar uma grade e projetar todos os coordenados de GNL para essa grade. Eu usaria uma matriz 2D de ints.

O código psuedo seria:

for each coord
  cell = coord projected to grid
  increment cell value
end

for 0 to # of passes
  for each row
   for each col
     if grid[row,col] > 0 then
       grid[row,col] += 1
       increment_adjacent_cells(row, col)
     end
   end
  end
end

Portanto, a idéia é que quanto maior o valor int, mais quente é essa célula. increment_adjacent_cells deve incrementar os valores em todas as 8 células adjacentes.

Tentei resolver isso em javascript usando o elemento canvas, aqui está meu resultado atual:

http://gist.github.com/346165

Tenho que consertar o filtro gaussiano e o mapeamento de cores, pois atualmente não dá bons resultados.

Veja este projeto se estiver procurando algo que se pareça mais com 'mapas meteorológicos da TV':

https://github.com/ottimisme/javascript-temperaturemap

Uma maneira mais rápida de construir um mapa de calor pode ser usar uma fila:

Pseudo-código:

Add an element to queue (first in heatmap(x,y, val))
While (!queue.isEmpty())
{
    elem = queue.pop()
    queue.push(elem.x + 1, elem.y, val-1)
    queue.push(elem.x - 1, elem.y, val-1)
    queue.push(elem.x, elem.y + 1, val-1)
    queue.push(elem.x, elem.y - 1, val-1)
}

Isso salva em toneladas de iterações!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top