使用XY坐標點位資料

使用XY坐標點位資料

在本範例中，我們使用資料服務平台資料庫之XY坐標點位資料，搭配統計地圖的分級符號圖以
及統計圖表的柱狀圖功能進行繪製，並搭配客製化的指定縣市範圍、分級符號圖設定、柱狀圖設
定等參數來建立功能選單介面，您可以直接將本範例複製至您的網站伺服器，再修改使用的統計
資料項目或統計地圖/圖表類型即可快速建立一個頁面。

版型設定部分：

所有進階範例的版型皆以CSS文件(sample.css)進行設定，其詳細說明可參考進階範例「自應用
資料庫繪製地圖及圖表」中的「使用資料服務平台統計資料」。使用者可透過修改此檔案來更改
範例版型中各個區塊的樣式設定。

網頁設計部分：

除了最上方的標題區塊之外，本範例左側提供三個選單區塊作為網頁使用者的主要操作區域，可
分別進行統計資料選擇、統計參數設定、執行按鈕的點擊等等，右側則是結果展示區域，繪製完
成的統計地圖、統計圖表及其他相關輸出內容都會在這個區塊呈現。所有可供網頁使用者進行操
作的選單，都以下拉選單或多選清單的方式呈現，如指定縣市範圍選擇下拉選單，您可自行選擇
欲繪製之縣市項目，僅須確認選項的value值必須填入正確的統計資料表代碼即可。

<td>

</select>

</td>

由於統計地圖-分級符號圖僅可設定單一欄位進行繪製，因此在這個選單就使用單一選單方式來取
得資料項目，須確認所有加入的統計欄位都屬於上一步驟設定的統計產品，並將選項的value值
填入正確的欄位代碼即可。

<td class="items_content" valign="top">使用統計欄位：</td>

<td>

<option value="NA_STU_CNT" selected>高中職原住民學生數</option>

</select>

</td>

</tr>

<tr>

<td class="items_content" valign="top">指定縣市範圍：</td>

<td>

</select>

</td>

程式設計部分：

當網頁使用者點擊「繪製統計地圖」按鈕時，程式端即進入function drawStatMap( )內進行一
系列的動作，包含從網頁介面取得各種資料設定、繪圖參數設定等等，再將所有設定套入統計地
圖物件設定內容後進行統計地圖繪製作業，最後將互動式介面輸出至網頁的展示區域內，並寫出
所需的統計資訊。

function drawStatMap() { //統計地圖繪製

document.getElementById("mapView").style.display ="";

document.getElementById("chartView").style.display ="none";

setStatData(myMap.getStatData()); //設定統計資料

myMap.getStatData().select.districtCode = [document.getElementById("sCounty").value];

var mapOpts = myMap.getMapOptions(); //取得統計地圖參數設定

mapOpts.pSymbol.classifyMethod = document.getElementById("pClassify").value;
//重新設定分級方式

mapOpts.pSymbol.classes = parseInt(document.getElementById("pClassesCount").value);
//重新設定分級數

if (document.getElementById("pClassify").value == ClassifyMethod.USER_DEFINED){

if(document.getElementById("pClassesCount_Self").value == "") {

alert("自訂區間必須填入值");

return;

} else {

mapOpts.pSymbol.userLevels = document.getElementById("pClassesCount_Self").value.split(",");

}

mapOpts.pSymbol.symbolStyle = document.getElementById("symbolType").value;

mapOpts.pSymbol.fillColor = document.getElementById("fillColor").value;

mapOpts.pSymbol.outlineColor = document.getElementById("lineColor").value;

mapOpts.pSymbol.outlineWidth = document.getElementById("lineWidth").value;

mapOpts.pSymbol.maxSize = document.getElementById("maxSize").value;

mapOpts.pSymbol.minSize = document.getElementById("minSize").value;

//重新設定分級符號之樣式、顏色、外框及其大小

myMap.drawMap(function (result) {

if (result.status === ServiceStatus.OK)
putInfomation(result); //寫出統計資訊及圖例資訊

});

}

當網頁使用者點擊「繪製統計圖表」按鈕時，同樣程式即進入function drawStatChart( )內執行
統計圖表繪製作業，取得所有設定參數後，套用設定參數並將成果輸出至展示區域內。

function drawStatChart() { //統計圖表繪製

document.getElementById("mapView").style.display ="none";

document.getElementById("chartView").style.display ="";

setStatData(myChart.getStatData()); //設定統計資料

myChart.getStatData().select.districtCode = [document.getElementById("sCounty").value];

//統計圖表參數設定

var chartOpts = myChart.getChartOptions(); //取得統計圖表參數設定

//重設柱狀圖最大柱高

chartOpts.pBar.maxHeight = parseInt(document.getElementById("chartMaxHeight ").value);

//重設柱狀圖柱寬

chartOpts.pBar.barWidth = parseInt(document.getElementById("chartBarWidth ").value);

if (document.getElementById("pieColorList").value !="")

chartOpts.pBar.color = document.getElementById("pieColorList").value.split(",");

myChart.drawChart(function (result) { //繪製統計圖表

if (result.status === ServiceStatus.OK)
putInfomation(result); //寫出統計資訊及圖例資訊

});

}