ZDC.Heatmap

ヒートマップを作成します。
※)heatmap.jsが必要です。

実装例

コンストラクタ

ZDC.Heatmap(dataset, options)

引数 プロパティ タイプ デフォルト 説明
dataset min number 0 dataオブジェクトのvalueで扱う下限値
max number 1 dataオブジェクトのvalueで扱う上限値
data array(object) - dataオブジェクトの配列
options scaleRadius boolean false trueの場合、縮尺レベルに応じて半径をスケーリングします
falseの場合、縮尺レベルを問わずradiusの半径で描画します
radius number 2 データポイントの半径
scaleRadiusがtrueの場合、地図の縮尺番号を元に半径を算出します
radius * 2の縮尺番号 乗(px)
scaleRadiusがfalseの場合、ピクセル単位で指定します
※ 描画できるサイズはキャンバスの最大寸法に依存します
例)scaleRadius = true かつ radius = 2 (デフォルト値)の場合、
縮尺番号13以上は描画できません
maxOpacity number 1 不透明度の最大値
0より大きい値から1の範囲で指定
gradient object ※ 1 グラデーションを表すオブジェクト
を確認してください
useLocalExtrema boolean false falseの場合、全てのデータポイントの最大値と最小値を使用します
trueの場合、現在表示されている地図領域の最大値と最小値を使用し、
常にgradientの最大値に指定した色(デフォルトの場合赤)のスポットが
表示されます
blur number 0.85 すべてのデータポイントに適用されるぼかし係数
0から1を指定
ぼかし係数が高いほど、グラデーションは滑らかになります

dataオブジェクト

プロパティ タイプ 説明
latlon ZDC.LatLon 緯度経度
value number minからmaxの範囲外の値はmin/maxに丸められます

gradient デフォルト

構文:数値文字列(0から1):色文字列

 gradient: {
   "0.25": "rgb(0,0,255)",
   "0.55": "rgb(0,255,0)",
   "0.85": "yellow",
   "1.0" : "rgb(255,0,0)"
 }

gradient 例)

 gradient: {
   "0.5" : "blue",
   "0.8" : "red"',
   "0.95": "white"
 }

メソッド

void setData(dataset)

ヒートマップインスタンスから既存のすべてのデータポイントを削除し、引数に指定したdatasetで再描画します。
ただし、このメソッドを実行する前にZDC.MapクラスのaddWidgetを実行してください。

引数 タイプ 説明
dataset object コンストラクタのdataset参照

void addData(data)

ヒートマップインスタンスに単一または複数のデータポイントを追加します。
ただし、このメソッドを実行する前にZDC.MapクラスのaddWidgetを実行してください。

引数 タイプ 説明
data array(object) dataオブジェクトの配列

void visible()

ヒートマップを表示します。


void hidden()

ヒートマップを非表示にします。


関連事項

キャンバスの最大寸法について

HTML: <canvas>: グラフィックキャンバス要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas#Maximum_canvas_size

ライセンス

本機能には、以下のソフトウェアが含まれています。

名称 バージョン ライセンス
heatmap.js 2.0 MIT License