質問

Iは、緯度と経度と各値のリストを持っています。私は、Googleマップ上のオーバーレイに半透明のヒートマップイメージを作成していますよ。私はそこに、サーバー側であり、すでにベースのソリューションをフラッシュ知っているが、私は、キャンバスのタグを使用して、JavaScriptでこれを構築したい。

しかし、私はヒートマップに座標と値を回すために使用されるアルゴリズムの簡潔な記述を見つけることができないようです。誰もが1に提供するか、またはリンクすることはできますか?

感謝します。

正しい解決策はありません

他のヒント

基本的な考え方は、グリッドを作成し、そのグリッドにすべての緯度、LNG COORDを投影するだろう。私はint型の2次元配列を使用することになります。

擬似コードは以下のようになります:

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つの隣接セルの値をインクリメントする必要があります。

私はここに私の現在の結果である、canvas要素を使ってJavaScriptでこれを解決しようとしています:

http://gist.github.com/346165する

それは、現在の良好な結果が得られていないので、私は、ガウスフィルタとカラーマッピングを修正する必要があります。

このプロジェクトでは、

ルックあなたが何かそれより「テレビの天気図」のようなルックスを探している場合:

https://github.com/optimisme/javascript-temperatureMapする

ヒートマップを構築するより高速な方法は、キューを使用することができます:

擬似コード:

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)
}

これは繰り返しのトンを節約!

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top