Frage
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.
Keine korrekte Lösung
Andere Tipps
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.
Ich habe versucht, dies in Javascript zu lösen das Canvas-Element verwenden, hier ist mein aktuelles Ergebnis:
Ich habe den Gaußsche Filter und die Farbzuordnung zu reparieren, weil es keine guten Ergebnisse nicht geben zur Zeit.
Schauen Sie sich das Projekt, wenn Sie nach etwas suchen, das sieht eher wie ‚tv Wetterkarten‘:
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!