摘要說明

統計地圖API範例網站目前已全面將API版本更新為「V4.0」版,服務連結功能依循107年開發項目,原有統計地圖API V3.0版功能不受版本更新之影響仍可正常使用。

【本服務介接限走https協定】

什麼是統計地圖API?

用視覺化的方式呈現統計資訊

相較於傳統文字記錄或表格資料,統計圖表在視覺傳達上的優勢不言而喻。當生硬的統計數據被轉化為圓餅圖、折線圖,
人們能更直觀地感受到數值之間的相對關係,或是資料隨著時間起伏的趨勢等等。統計地圖不僅承接了一般統計圖表將資
料視覺化的優點,更揭露某些傳統圖表無法偵測到的空間議題。

過去,若要繪製統計地圖,使用者須自備資料、GIS(地理資訊系統)軟體,甚至GIS伺服器。除了技術門檻高,資料的更新
與維護上所需要耗費的資源更是可觀。有鑑於此,內政部統計處提供統計地圖API,讓網頁開發者可使用JavaScript語法
輕鬆繪製統計地圖或圖表,並且嵌入html網頁中。

善用國內最完整的社會經濟資料庫

「國土資訊系統社會經濟資料庫資料服務平台」為國內社會經濟資料流通供應的單一窗口。統計處為滿足統計地圖API
於資料規格的嚴格要求,特別將資料重新整理,將資料代碼發布至「API應用資料庫查詢」介面供接者使用。使用者可
以直接使用免申請的資料項目,亦可透過申請取得其他資料進行統計圖表與地圖的繪製。同時,統計地圖API亦提供使用
者上傳自有資料的功能。

如何使用統計地圖API?

此範例網站包含完整的API功能說明,從資料的匯入、篩選、設定到匯出,皆有詳細的範例可供參考,使用者可以依照需
求逐步建構出自己的統計地圖或圖表。若使用者在開發上有較進階的需求,本網站亦提供進階範例供使用者直接參考、修
改參數進行加值運用。

以下範例程式碼為統計地圖API的基本範例,讓使用者以民國102月縣市醫療院所數量資料,繪製統計地圖(面量圖)
透過這個範例,使用者將更能掌握統計地圖API的基本架構。

<html>

    <head>

        <title>統計地圖API基本範例</title>

        <script language="javascript" type="text/javascript" src="https://segisapi.moi.gov.tw/StatAPI/statistics?appid=yourID&apikey=yourkey"></script>

        <script type="text/javascript">

            var dataDB;

            function init() {                                                                                  //初始化統計地圖物件

                var dataSet = new Array();

                var tmp = {tableName: "327FI_A5C1",fieldsId: ["H_CNT"]}; //呼叫社經資料庫資料

                dataSet.push(tmp);

                //設定統計資料之時序及空間範圍

                var timeOpts = {timeSeries: true,time: ["102Y06M"]}

                var dataOption = {dataType:DataType.ADMIN, timeOpts:timeOpts, dataLevel:DataLevel.COUNTY}

                var areaSelect = {areaSelectType:AreaSelectType.DISTRICT, districtType:DistrictType.ALL};

                dataDB = new DataDB(dataSet, dataOption, CoordSystem.EPSG3826, areaSelect); //設定資料物件

                DrawStatMap(dataDB);                                                        //執行統計地圖(面量圖)繪製指令

            }

            function DrawStatMap(data) {                                                        //設定統計地圖(面量圖)繪製參數

                var mColor = {maxColor: "#7c0505", minColor: "#ffb9b9", defaultColor: "#EEEEEE"};                    

                var pChoropleth = {classifyMethod:ClassifyMethod.QUANTILE, classes:5, color:mColor, useInt: true};

                var option = {pChoropleth:pChoropleth};

                var containerObj = document.getElementById("MapView");

                var Map = new StatMap(containerObj, data,MapKind.CHOROPLETH, option);

                       Map.drawMap(function (result){});                             //繪製統計地圖(面量圖)

            }

        </script>

    </head>

    <body onload="init()">

        <font size="4" face="Microsoft JhengHei">1026-行政區縣市醫療院所家數統計</font><br/>

        <div id="MapView" style="width:600px;height:500px;"></div>         <!--建立統計地圖容器-->

        <font size="4" face="Microsoft JhengHei">(資料來源:統計地圖API應用資料庫)</font><br/>

    </body>

</html>

以上程式碼為基本的html架構,在<html>頁籤中包含了<head><body>頁籤。

這個範例在<head>頁籤中嵌入<script type="text/javascript">語法呼叫統計地圖API,並且使用API功能定義了兩個方
法:一個是初始化統計地圖物件,
function init();另一個是設定統計地圖參數的方法,function DrawStatMap(data)

在網址中,必需帶入API參數,請將引用字串https://segisapi.moi.gov.tw/StatAPI/statistics?appid=yourID&apikey=yourkey 
中的yourIDyourkey替換為您申請所取得的API金鑰,包含APPIDAPIKEY,方能順利驗證載入功能。

在初始化地圖物件方法中,本範例使用社會經濟資料庫之資料表tableName: "327FI_A5C1",fieldsId: ["H_CNT"],呼叫資
料庫中醫療院所數量資料,之後再依序設定資料時間與空間範圍,最後使用
執行繪製統計地圖的指令。

在設定統計地圖參數方法中,本範例選擇繪製的統計地圖類型為面量圖(MapKind.CHOROPLETH),並且繪製面量圖所需之
參數,例如:分級數、色階等等。詳細設定方法請參照繪製類型設定-統計地圖段落。

最後在<body>使用onload事件觸發<head>頁籤定義的init()方法,並定義網頁容器頁籤<div id="MapView">,供
後的統計地圖放置用。

回到上方