ホ−ム » クラスリファレンス » ZDC.Heatmap

ZDC.Heatmap

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

実装例

コンストラクタ

ZDC.Heatmap(dataset, options)

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

dataオブジェクト

プロパティタイプ説明
latlonZDC.LatLon緯度経度
valuenumberminから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を実行してください。

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

void addData(data)

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

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

void visible()

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


void hidden()

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


関連事項

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

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

ライセンス

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

名称バージョンライセンス
heatmap.js2.0MIT License