Question

J'ai une liste de valeurs chacune avec la latitude et la longitude. Je cherche à créer une image heatmap translucide à superposer sur Google Maps. Je sais qu'il existe des solutions à base de côté serveur et flash déjà, mais je veux construire ce en javascript en utilisant la balise canvas.

Cependant, je ne peux pas sembler trouver une description concise de l'algorithme utilisé pour transformer les coordonnées et les valeurs dans un heatmap. Quelqu'un peut-il fournir ou lien vers un?

Merci.

Pas de solution correcte

Autres conseils

L'idée de base serait de créer une grille et chaque projet lat, lng coord à cette grille. J'utiliser un tableau 2D de ints.

Le psuedo code serait:

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

Alors, l'idée est que plus la valeur int, le plus chaud cette cellule est. increment_adjacent_cells doit incrémenter les valeurs dans l'ensemble des 8 cellules adjacentes.

J'ai essayé de résoudre ce en javascript en utilisant l'élément de toile, voici mon résultat courant:

http://gist.github.com/346165

Je dois fixer le filtre gaussienne et la mise en correspondance des couleurs, car il ne donne pas de bons résultats.

Regardez ce projet si vous cherchez quelque chose qui ressemble plus à « cartes météo tv »:

https://github.com/optimisme/javascript-temperatureMap

Une manière plus rapide de construire une heatmap pourrait être d'utiliser une file d'attente:

pseudocode:

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)
}

Cela permet d'économiser des tonnes d'itérations!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top