點位熱區圖

熱區圖可在地圖上呈現一個地區的分布狀況，使用者可藉由坐標距離繪製與換算螢幕的坐標，其結果是以視覺效果呈現分布的狀況，故顯示的位置並無學理根據。

建立TGOS.TGHeatmapLayer()物件，指定資料、地圖物件，即可初步繪製出點位資料的熱區圖。

//建立熱區圖圖層

heatmap = new TGOS.TGHeatmapLayer({

data: createData(), //指定繪製熱區圖之資料

map: map //指定要繪製熱區圖的地圖物件

});

要改變計算熱區的點位資料，可透過setData()功能設定，範例中資料集內容是由自己寫的createData()方法所隨機產生，可以使用自有點位資料放到集合內取代。

var setData = function () { //變更熱區圖資料點位

heatmap.setOptions({

data: createData()

});

}

最大強度是指熱區計算時的最大數值，在這個數值之上，都會使用最大強度的色票呈現。例如設定熱區顯示由黃色到紅色漸層顯示，紅色代表高強度熱區，設定最大強度值為10，則在螢幕範圍中，計算點位數量超過10，一律使用紅色表示。利用maxIntensity這項屬性來表示最大強度值。

var changeMaxIntensity = function () { //變更最大強度

heatmap.setOptions({

maxIntensity: heatmap.maxIntensity ? null : 2

});

}

顏色樣式也可以藉由gradient屬性自行設定。顏色樣式是由多個RGBA的色票陣列所組成，色票的顏色、數量都沒有限制，可自由應用。

var changeGradient1 = function () { //使用樣式1顯示

heatmap.setOptions({

gradient: heatmap.gradient ? null : gradient1

});

}

var gradient1 = [ //自由設定顯示樣式，色票、層級數量皆可自訂

'rgba(0, 255, 255, 0)',

'rgba(0, 255, 255, 1)',

'rgba(0, 191, 255, 1)',

'rgba(0, 127, 255, 1)',

'rgba(0, 63, 255, 1)',

'rgba(0, 0, 255, 1)',

'rgba(0, 0, 223, 1)',

'rgba(0, 0, 191, 1)',

'rgba(0, 0, 159, 1)',

'rgba(0, 0, 127, 1)',

'rgba(63, 0, 91, 1)',

'rgba(127, 0, 63, 1)',

'rgba(191, 0, 31, 1)',

'rgba(255, 0, 0, 1)'

];

熱區計算完畢，要進行繪製時，可以透過radius這項屬性來改變繪製半徑。

var changeRadius = function () { //變更繪製半徑

heatmap.setOptions({

radius: heatmap.radius ? null : 20

});

}

當然，也可以藉由opacity屬性改變熱區圖層的透明度，讓下方的資訊顯示出來。

var changeOpacity = function () { //變更透明度

heatmap.setOptions({

opacity: heatmap.opacity ? null : 0.2

});

}