Algorithmus für Heatmap?

Question

habe ich eine Liste von Werten, die jeweils mit Breite und Länge. Ich suche ein lichtdurchlässiges Heatmap Bild zu erstellen, die auf Google Maps zu überlagern. Ich weiß, dass Server-Seite gibt es und Flash-basierte Lösungen bereits, aber ich möchte dies den Leinwand-Tag in Javascript bauen.

Allerdings kann ich nicht eine kurze Beschreibung des Algorithmus scheint verwendet zu finden Koordinaten und Werte in eine Heatmap zu drehen. Kann jemand zur Verfügung stellen oder einen Link zu einem?

Danke.

Answer 1

Die Grundidee wäre ein Raster zu erstellen und jedes lat, lng coord zu diesem Raster projizieren. Ich würde eine 2D-Array von ints verwenden.

Der psuedo-Code wäre:

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

So ist die Idee, dass je höher der int-Wert, desto heißer die Zelle ist. increment_adjacent_cells sollten die Werte in allen acht benachbarten Zellen erhöhen.

Answer 2

Ich habe versucht, dies in Javascript zu lösen das Canvas-Element verwenden, hier ist mein aktuelles Ergebnis:

http://gist.github.com/346165

Ich habe den Gaußsche Filter und die Farbzuordnung zu reparieren, weil es keine guten Ergebnisse nicht geben zur Zeit.

Answer 3

Schauen Sie sich das Projekt, wenn Sie nach etwas suchen, das sieht eher wie ‚tv Wetterkarten‘:

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

Answer 4

Ein schnellen Weg, um eine Heatmap bauen könnte eine Warteschlange zu verwenden:

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

Das spart Tonnen Iterationen!