Подтвердить что ты не робот

Создание тепловых карт с использованием элемента <canvas>?

Есть ли там библиотеки JavaScript, которые позволяют создавать карты тепла, используя графические функции визуализации в браузере, такие как <canvas> или SVG?

Я знаю о HeatMapAPI.com, но их карты тепла создаются на стороне сервера. Я думаю, что в эпоху элемента <canvas> нам это больше не нужно!

Если ничего подобного нет, есть ли волонтеры для участия в создании такого инструмента?

4b9b3361

Ответ 1

Я создал демоверсию, включающую в себя карту тепла в реальном времени с элементом <canvas> и javascript. Я также добавил документированный код рядом с образцом тепловой карты. Процесс генерации тепловой карты основан на альфа-карте в элементе холста, которая зависит от движения мыши пользователя. Вы можете посмотреть мою демо прямо здесь: http://www.patrick-wied.at/static/heatmap/

Ответ 2

Я создал карту удалений с помощью API визуализации Google [http://code.google.com/apis/visualization/documentation/]. Он использует SVG и VML, а также совместим с браузером. Надеюсь, это поможет.

Ответ 3

У меня есть код js/canvas/web worker здесь, хотя есть много работы, которую можно было бы сделать с ним. Он также нажал онлайн на http://heatmapthing.heroku.com/. Ваш браузер должен поддерживать веб-работников для этого.

Пожалуйста, присылайте запросы на получение, если вы его улучшите. Псевдогаузское сглаживание сейчас как slooooooooow.

Ответ 4

Я также попробовал, но без гауссовского сглаживания себя, я позволил холсту сделать это для меня. В основном я рисую радиальный градиент для каждой точки в серой шкале, а затем раскрашиваю это изображение с серой шкалой (см. "Создание карт тепла с .NET 2.0 (С#)" для подробного объяснения, моя реализация немного отличается).

Результат выглядит следующим образом:

Heat Map with JavaScript and Canvas

Время рендеринга в Chrome/Chromium не так уж плохо. Я думаю, что самая трудоемкая часть - это раскрашивание, потому что я перебираю каждый пиксель.

Код можно найти здесь: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Ответ 6

Heatcanvas выглядит неплохо. Он также имеет расширение рекламного листка для запуска поверх openstreetmaps https://github.com/sunng87/heatcanvas

Он работает довольно хорошо в нескольких точках (< 200) или около того, но на многих тысячах точек немного медленнее. Я думаю, что он мог бы также пересчитать чаще, чем необходимо после панорамирования и масштабирования, и у меня были некоторые проблемы с изменением тепловой карты на лету (замена тепловой карты на другую с помощью javascript), думаю, мне нужно немного поэкспериментировать с ней или связаться с ней автор