La creación de mapas de calor utilizando el elemento
https://stackoverflow.com/questions/1117048
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Hay bibliotecas de JavaScript por ahí que le permiten crear mapas de calor utilizando en el navegador funciones de procesamiento de gráficos, como <canvas> o SVG?
Yo sé de HeatMapAPI.com, pero sus mapas de calor se generan en el lado del servidor. Creo que en la era del elemento <canvas> que no es necesario que se preocupen!
Si no hay nada como esto todavía, ¿hay voluntarios para participar en la creación de una herramienta de este tipo?
Solución
He creado una demo que incluye un mapa de calor en tiempo real con el elemento <canvas> y javascript. También he añadido el código documentado junto a la muestra mapa de calor. El proceso de generación de mapa de calor se basa en un mapa alpha en el elemento de tela que depende del movimiento de los usuarios del ratón.
Puede echar un vistazo a mi demo aquí:
http://www.patrick-wied.at/static/heatmap/
Otros consejos
He creado un mapa éxito con la ayuda de API de visualización de Google [ http: // code.google.com/apis/visualization/documentation/] . Utiliza SVG y VML, y compatible navegador también cruz. Espero que va a ayudar.
Tengo algo de código trabajador js / tela / red aquí aunque hay un montón de trabajo que podría ser hacer con ella. También es empujado en línea en http://heatmapthing.heroku.com/ . Su navegador debe ser compatible con los trabajadores de esta web.
Por favor, enviar solicitudes de extracción si mejorarlo. La suavización de pseudo-gaussiano es slooooooooow como el infierno en este momento.
También lo probé, pero sin hacer el gaussiana suavizado mi yo, dejo que la lona que hacen por mí. Básicamente dibujo un gradiente radial para cada punto en la escala de grises y luego colorear esta imagen en escala de grises (ver " Crear mapas de calor con .NET 2.0 (C #) " para una explicación detallada, mi aplicación difiere un poco).
El resultado es el siguiente:
El tiempo de presentación no es tan malo en Chrome / Chromium. Creo que la parte más lenta es la colorizing, porque estoy bucle sobre cada píxel.
Puede encontrar el código aquí: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
He jugado con mapa de calor hace unos años. Ver http://www.urbigene.com/treemapphp/ , el algoritmo de vino de aquí: < a href = "http://www.cs.umd.edu/hcil/treemap-history/" rel = "nofollow noreferrer"> http://www.cs.umd.edu/hcil/treemap-history/
Heatcanvas se ve bastante bien. También tiene una extensión folleto para funcionar en la parte superior de OpenStreetMap https://github.com/sunng87/heatcanvas
Se ejecuta bastante bien en algunos puntos (<200) o menos, pero se hace un poco lento en muchos miles de puntos. Creo que también podría volver a calcular con más frecuencia de lo necesario después de panorámica y zoom, y tuve algunos problemas con el cambio del mapa de calor sobre la marcha (en sustitución de mapa de calor con otro usando javascript), supongo que tengo que experimentar un poco más con ella, o en contacto con el autor
