點環域查詢熱區圖
API使用範例：點環域查詢熱區圖
情境假設：
使用者可透過點環域查詢熱區圖功能，可設定環域範圍大小外，也可點擊地圖上任一地點來移動環域範圍之位置，觀察環域範圍內的熱區分布狀況。呈現的分布藉由坐標距離繪製與換算成螢幕坐標，其結果是以視覺效果呈現分布的狀況，故顯示的位置並無學理根據。
TGOS MAP API建置方式：
1. 初始化地圖：
首先宣告一個TGOnlineMap( )物件，在網頁上建立一個地圖，並選擇座標系統、建立滑鼠監聽事件與初始化熱區圖層。
function onload() {
mapDiv = document.getElementById("mapDiv");
var mapOptions = {
disableDefaultUI: true //關閉所有地圖介面控制項
};
pMap = new TGOS.TGOnlineMap(mapDiv, coordSys , mapOptions); //建立地圖物件
clickEven(); //建立圖台點擊事件
//建立熱區圖圖層
heatmap = new TGOS.TGHeatmapLayer({
//data: createData(), //指定繪製熱區圖之資料
dissipating: false,
map: pMap //指定要繪製熱區圖的地圖物件
});
//建立環域查詢點位
createData();
}
function clickEven()
{
TGOS.TGEvent.addListener(pMap, "click",function(tEvent) { //建立滑鼠地圖點擊事件監聽器
ClickPT=tEvent.point;
setData();
});
}
2. 繪製熱區圖
//TGOS.TGPointBuffer() 為非同步查詢 故設定熱區圖資料要在此設定
Query.identify(TGOS.TGMapServiceId.SHELTERS, TGOS.TGMapId.SHELTERS, queryRequst, TGOS.TGCoordSys.EPSG3826, function(result, status){
//使用方法identify進行點環域查詢, 輸入參數包含欲查詢的服務、欲查詢的圖層、點環域參數、坐標系統及查詢後的函式, result及status分別代表查詢結果及查詢狀態
if (status == TGOS.TGBufferStatus.ZERO_RESULTS) { //判斷查詢結果是否為查無結果
alert('此範圍查無結果');
return;
} else { //若查詢產生結果, 則執行以下函式
var attris = result.fieldAttr; //取得圖徵屬性
var pts = result.position; //取得圖徵點位
for (var i = 0; i < pts.length; i++) {
data.push( pts[i]); //將標記點加入到markers陣列
}
//設定heatmap data
heatmap.setOptions({
data: data
});
}
});
3. 環域功能設定
3.1 繪製環域圖形
繪製環域圖形，將圖形放置於圖台上並指定縮放層級，以確保環域範圍完整顯示在畫面中。
var createData = function () { //本範例將隨機生成資料
var data = [];
if (BufferArea) //假設地圖上已存在環域圖形(TGFill), 則先行移除
BufferArea.setMap(null);
//判斷點擊座標
if(!ClickPT)
{
//尚未點擊則顯示預設值位置
ClickPT = new TGOS.TGPoint(168840,2544238);
}
var radius = parseFloat(document.getElementById("BufferDist").value); //取得使用者輸入的環域半徑
var pt =ClickPT; //取得滑鼠點擊位置的坐標點位,為TGPoint物件形式
var circle = new TGOS.TGCircle(); //建立一個圓形物件(TGCircle)
circle.setCenter(pt); //以滑鼠點擊位置為圓心
circle.setRadius(radius); //設定半徑
var pgnOption = { //設定圖形樣式
fillColor: "#0099FF",
fillOpacity : 0.1,
strokeWeight : 2,
strokeColor : "#ff00ff"
};
BufferArea = new TGOS.TGFill(pMap, circle, pgnOption); //使用TGFill物件將圓形繪製出來
pMap.fitBounds(BufferArea.getBounds());
pMap.setZoom(pMap.getZoom()-1); //取得環域圖形的邊界後, 調整地圖顯示的範圍
3.2 環域查詢部分
var queryRequst = { //設定點環域查詢條件, 包含圓心(pt)及半徑(radius)
position: pt,
distance: radius
};
4. 環域熱區範圍顯示設定
使用者可透過顯示設定功能，調整環域範圍之半徑、熱區最大強度、熱區透明度等設定。
var setData = function () { //設定熱區資料
createData();
}
var changeMaxIntensity = function () { //設定熱區最大強度
heatmap.setOptions({
maxIntensity: heatmap.maxIntensity ? null : 2
});
}
var changeRadius = function () { //設定環域範圍半徑
heatmap.setOptions({
radius: heatmap.radius ? null : 20
});
}
var changeOpacity = function () { //設定熱區透明度
heatmap.setOptions({
opacity: heatmap.opacity ? null : 0.2
});
}
