2010-02-26 10 views
11

У меня есть список значений с широтой и долготой. Я ищу, чтобы создать прозрачный образ тепловой карты для наложения на Google Maps. Я знаю, что уже есть серверные и флеш-решения, но я хочу построить это в javascript, используя тег canvas.Алгоритм для тепловой карты?

Однако я не могу найти краткое описание алгоритма, используемого для преобразования координат и значений в тепловую карту. Может ли кто-нибудь предоставить ссылку или ссылку на нее?

Спасибо.

ответ

8

Основная идея заключалась бы в создании сетки и проектировании каждой латы, lng координирующей эту сетку. Я бы использовал 2D-массив из int.

-код псевдо будет:

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 

Таким образом, идея состоит в том, что чем выше значение INT, тем горячее, что клетка. increment_adjacent_cells должны увеличивать значения во всех 8 смежных ячейках.

+1

Это основная идея; но вместо того, чтобы делать несколько проходов для «распространения» тепла, было бы лучше иметь что-то вроде круговой гауссовой маски, которую вы можете просто добавить в сетку в каждой точке данных. Кроме того, этот вопрос может иметь полезные ответы: http://stackoverflow.com/questions/1117048/creating-heatmaps-using-canvas-element – tzaman

2

Я попытался решить эту проблему в JavaScript, используя элемент холста, вот мой текущий результат:

http://gist.github.com/346165

Я должен исправить гауссова фильтра и отображение цвета, так как он не дает хорошие результаты в настоящее время.

+0

Это интересная вещь. Я планировал рисовать карты с объектами DOM (без размытия), но ваше решение могло бы обеспечить некоторые результаты с серверами одинаковыми с точки зрения внешнего вида. Ваша проблема с цветами вызвана переменной 'maximum'. – naugtur

+0

Это выглядит хорошо - быстро и многократно: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html – naugtur

+0

Я сохранил ваш код как [jsFiddle здесь] (http://jsfiddle.net/drewnoakes/aewmJ/) для люди попробовать. Это интересный подход, но, похоже, не дает разумного результата. Я что-то пропустил? Возможно, браузеры изменились с момента создания этого кода. –