La creazione di mappe di calore utilizzando elemento
https://stackoverflow.com/questions/1117048
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ci sono delle librerie JavaScript là fuori che consentono di creare mappe di calore utilizzando nel browser caratteristiche grafiche di rendering, come <canvas> o SVG?
So di HeatMapAPI.com, ma le loro mappe di calore vengono generati sul lato server. Credo che in epoca di elemento <canvas> non abbiamo bisogno di più così!
Se non c'è niente come questo ancora, ci sono volontari per partecipare alla creazione di un tale strumento?
Soluzione
Ho creato una demo tra cui una mappa termica in tempo reale con l'elemento <canvas> e javascript. Ho anche aggiunto il codice documentato vicino al campione heatmap. Il processo di generazione heatmap si basa su una cartina alfa nell'elemento tela che dipende dal movimento del mouse utenti.
Potete dare un'occhiata al mio demo proprio qui:
http://www.patrick-wied.at/static/heatmap/
Altri suggerimenti
Ho creato una mappa colpo con l'aiuto di Google API di visualizzazione [ http: // code.google.com/apis/visualization/documentation/] . Esso utilizza SVG e VML, e browser compatibile anche croce. Spero che ti aiuto.
Ho qualche codice lavoratore js / tela / web qui anche se c'è un sacco di lavoro che potrebbe essere fatto con esso. E 'anche spinto online all'indirizzo http://heatmapthing.heroku.com/ . Il tuo browser deve supportare i lavoratori web per questo.
Si prega di inviare le richieste di pull se migliorarlo. Il livellamento pseudo-gaussiana è slooooooooow come l'inferno in questo momento.
Ho anche dato una prova, ma senza fare la gaussiana lisciare la mia auto, ho lasciato tela farlo per me. Fondamentalmente Disegno un gradiente radiale per ogni punto in scala di grigi e poi colorare questa immagine in scala di grigio (vedi " Creazione di mappe di calore con .NET 2.0 (C #) " per una spiegazione dettagliata, la mia attuazione differisce un bit).
Il risultato è simile al seguente:
Il tempo di rendering non è poi così male su Chrome / Chromium. Penso che la maggior parte del tempo consumando parte è il colorizing, perché sto loop su ogni pixel.
È possibile trovare il codice qui: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
Ho giocato con heatmap a pochi anni fa. Vedere http://www.urbigene.com/treemapphp/ , l'algoritmo è venuto da qui: < a href = "http://www.cs.umd.edu/hcil/treemap-history/" rel = "nofollow noreferrer"> http://www.cs.umd.edu/hcil/treemap-history/
Heatcanvas sembra abbastanza buono. Ha anche un'estensione volantino per eseguire su di OpenStreetMaps https://github.com/sunng87/heatcanvas
Funziona abbastanza bene su alcuni punti (<200) o giù di lì, ma diventa un po 'lento su molte migliaia di punti. Penso che potrebbe anche ricalcolare più spesso di quanto necessario dopo pan e zoom, e ho avuto alcuni problemi con la modifica del heatmap al volo (sostituendo heatmap con un altro utilizzando JavaScript), che ho bisogno di sperimentare un po 'di più con esso, oppure contattare il autore
