GeoJSON資料解譯與樣式設計
API使用範例：GeoJSON資料解譯與樣式設計
情境假設：
GeoJSON是一種JSON標準格式，可用來代表點、線、多邊形等幾何結構，或是特徵，是被廣泛使用的地理資訊資料交換格式，目前多數的政府機關開放資料都已提供GeoJSON格式供民眾下載使用。本範例透過使用TGOS MAP API中的TGData方法來建立與設定資料所呈現的方式，從載入GeoJSON格式的資料，到利用資料中的屬性來給予不同的呈現樣式設定。
TGOS MAP API建置方式：
1.以TGOS.TGOnlineMap建立初始化地圖圖台。
function onload() {
mapDiv = document.getElementById("mapDiv");
pMap = new TGOS.TGOnlineMap(mapDiv, TGOS.TGCoordSys.EPSG3826);
};
2.本範例透過網頁上的物件來做為設定GeoJSON格式資料樣式的操作方式，以HTML的網頁元素建構出使用者介面，再分別指派各元素的ID值來作為是樣式調整功能中所參照的關連，例如"ddl_json"代表使用者所選到的資料為哪一筆，並萃取出預先寫好的資料位置URL讓loadGeoJson方法載入資料。
<select id="ddl_json">
<option value="https://api.tgos.tw/TGOS_API/json/hw1.json">範例1</option>
<option value="https://api.tgos.tw/TGOS_API/json/hw2.json">範例2</option>
<option value="https://api.tgos.tw/TGOS_API/json/hw3.json">範例3</option>
</select>
//選擇想載入的資料
<select id="lineweight">
<option value=0.5>0.5</option>
<option value=1>1</option>
<option value=1.5>1.5</option>
<option value=2 >2</option>
<option value=2.5>2.5</option>
<option value=3>3</option>
<option value=3.5>3.5</option>
<option value=4>4</option>
<option value=4.5>4.5</option>
<option value=5 selected>5</option>
</select>
//選擇線資料的粗細程度
不超過40的顏色：<input type="text" style="width:80px" id="RColor" value="#DD0000" />｜
40到69的顏色：<input type="text" style="width:80px" id="YColor" value="#FFAA00" />｜
70到100的顏色：<input type="text" style="width:80px" id="GColor" value="#007700" />｜
//設定線資料的顏色
3.建立讀取及設定樣式的方法，首先透過TGOS.TGData方法建構出一個物件，再使用loadGeoJson方法來載入使用這所選擇的GeoJSON資料，在本範例中是去讀取HTML元素中的值來作為是讀取，並設定資料載入時參數讀取所參照的HTML元素的ID值以取得設定參數。
function send()
{
if(pData != null)
{
pData.clearAll();
}
var url = "";
var e = document.getElementById("ddl_json");
url = e.options[e.selectedIndex].value;
var pt = Number(document.getElementById("lineweight").value);
var rc = document.getElementById("RColor").value;
var yc = document.getElementById("YColor").value;
var gc = document.getElementById("GColor").value;
pData = new TGOS.TGData({map: pMap}); //建立幾何圖層物件
pData.loadGeoJson(url,{idPropertyName:"GEOJSON"},function(graphic)//指定資料來源
{
var style1 = {
strokeColor: rc,
strokeWeight: pt
}
var style2 = {
strokeColor: yc,
strokeWeight: pt
}
var style3 = {
strokeColor: gc,
strokeWeight: pt
}
var style4 = {
strokeColor: "gray",
strokeWeight: pt
}
for(var i = 0; i < graphic.length; i++)
{
//判斷geojson的speed屬性，來選擇要放什麼style
if(graphic[i].properties.speed >= 0 && graphic[i].properties.speed <= 39)
{
pData.overrideStyle(graphic[i], style1);
}
else if(graphic[i].properties.speed >= 40 && graphic[i].properties.speed <= 69)
{
pData.overrideStyle(graphic[i], style2);
}
else if(graphic[i].properties.speed >= 70 && graphic[i].properties.speed <= 100)
{
pData.overrideStyle(graphic[i], style3);
}
else
{
pData.overrideStyle(graphic[i], style4);
}
}
pData.setMap(pMap); //設定呈現幾何圖層物件的地圖物件
});
}
