2016統計地圖API教學簡報

統計地圖 API 實機操作教育訓練
105 年 8 月 8 、 10 日及 15 、 19 日

簡報大綱
統計地圖 API 介紹
申請統計地圖 API
統計地圖 API 範例網站
API 參考文件
如何建立統計地圖 ?
基礎開發案例

使用統計地圖呈現統計資料
具有地理資訊之統計資
料，都可以用統計地圖
方式呈現
3
行政區統計地圖
統計區統計地圖
機構別統計地圖

4
內政部統計處社會經濟統計地理資訊網
應用案例

為什麼要用 API?
提供介接應用函式的介面，供開發者建置各項網站功
能
無須考量底層原始碼或程式工作機制，降低開發成本
及門檻
無須額外建立各項資料及程式碼儲存空間，減少硬體
花費
透過引用介接方式取得各種功能，便於資源整合與共
享

有過這樣的需求嗎 ?
手上掌握了許多統計資料卻不知道該怎麼呈現？
我將統計資料提供至社會經濟資料庫共通平台，
要怎麼取得並且做簡易的展示？
我想要在自己機關的網站上做一個像是社會經濟
統計地理資訊網的功能性網站，供民詢統計眾查
資料，但掌握的資源及技術能力卻有限。

軟硬體環境建置
( 伺服器、網路環
境、 GIS 軟體
… )
開發統計地圖網站所需成本
統計資料收集
資料庫建置
網站介面設計
其他客製化
功能開發
統計地圖 / 圖
表功能開發

前端使用者
展示統計圖以及
相關資訊供前端
使用者瀏覽
展示統計圖以及
相關資訊供前端
使用者瀏覽
二次開發網站
API 伺服器
回傳統計圖、互動式
介面或相關統計資訊
回傳統計圖、互動式
介面或相關統計資訊
統計 API 運行架構
1. 收集自有統計資料並依指定格
式製作成 XML 案檔
2. 引用統計 API ，建立前台介面
3. 送出統計資料
4. 送出其餘統計參數
1. 收集自有統計資料並依指定格
式製作成 XML 案檔
2. 引用統計 API ，建立前台介面
3. 送出統計資料
4. 送出其餘統計參數
送出詢需求查送出詢需求查

統計地圖 API 核心功能
客製化繪製服務
- 統計地圖 / 圖表
- 配色、分級數及設定分級方式
- 取用社會經濟資料庫共通平台之資料或建立自有統計資料
繪製多種資料層級
- 行政區 ( 縣市、鎮市區、村里鄉 ) 、
- 統計區 ( 二級發布區、一級發布區、最小統計區 )
- 機構別點位資料
支援多種格式輸出
-PNG 圖、互動式介面、檔 KML
- 圖例資訊、分級資訊
呈現時空變化
- 以不同時序或空間 ( 環域、行政區、框選… ) 篩選並繪製統計地圖或圖表

使用統計地圖 API ，你可以 ...
統計 API 功能
面量圖
分級符號圖圓餅圖
柱狀圖

統計圖表繪製類型
圓餅圖
柱狀圖
折線圖
統計 API 功能

13
合併統計地圖
面量圖新增標記（ Label ）功
能
可自動調整標記
文字重疊問題
統計 API 功能

空間篩選設定
指定行政區
空間篩選
環域篩選
統計 API 功能

16
各類輸出資訊
所有統計地圖支援匯出 KML 格式
 支援各式電子地圖圖台進行統計地圖套疊。
 可應用於 2D 或 3D 圖資平台。
面量圖輸出含 Z 之值 KML
 面量圖  圓餅圖  分級符號圖  柱狀圖

圖例配色
統計值
圖例與分級資訊
基本統計資訊
各類輸出資訊

社會經濟資料庫入口網
http://segis.moi.gov.tw/STAT/
進入「社會經濟資料庫共通平
台」

需具有「國土資訊系統 - 社會經濟資料庫」會員帳號
進入「品總目產
」錄

網路服務 > 詢申請查
申請「統計地圖
API 」

填寫訂單資訊
填入申請用途
分為「公務用」、「學術研究用」、
「其他」三種類型
填入未來介接系統名稱，
及介接系統或開發環境之 IP
Address 、 Domain Name

統計資料分為「公開版」及「申請版」
選擇欲申請之申請版統計資料
API 功能不受版本限制
版本可申請對
象
對應的品產
權限
審核者
公開
版
不限申請
對象
公開免申請
產品
統計處
ADMIN
申請
版
不限申請
對象
公開需申請
產品 ( 並同
意納入網路
服務 )
建立詮釋
資料的機
關管理者
帳號

範例網站概覽
統計地圖API範例網站
樹狀階層式架構
目錄便於瀏覽及
擴增
樹狀階層式架構
目錄便於瀏覽及
擴增
說明内容
切換到其它平台

功能說明
功能簡介說明功能簡介說明
功能名稱標
題
功能名稱標
題

檢視範例

功能程式碼範例點選”檢視成果” ，可
實際操作該功能情境
點選”檢視成果” ，可
實際操作該功能情境
提供程式碼範例及說
明
提供程式碼範例及說
明

功能程式碼範例點選”展示雛型”
，可切換成全畫
面
點選”展示雛型”
，可切換成全畫
面

進階使用範例
建置方式之詳細步
驟及說明
建置方式之詳細步
驟及說明
範例之情境描述範例之情境描述
範例標題範例標題

取得欲使用的資料表代碼及欄位代碼等資訊
API 應用資料庫詢查
依照資料中類及小類
取出資料表
http://segisapi.moi.gov.tw/DBQuery/DBQuery.htm

1. 選擇空間單元 2. 選擇主題 3. 點下詢鍵查
4. 顯示符合條件
之主題資訊
5. 點選代碼簡
表

行政區代碼詢查
1. 選擇層級 2. 選擇時間
3. 依序選擇縣市 / 鎮鄉 / 村
里

API 參考文件
統計地圖 API 參考手冊
提供開發人
員指南
提供開發人
員指南
API 列表，
提供快速搜
索
API 列表，
提供快速搜
索

API 介接開發設定驟步
40
統計地圖 API 應用資料庫
自有統計資料
1. 設定資料集
分級法、配色、影像大小
、符號樣式 ...
4. 設定繪製參數
資料類型、坐標系統、
資料時間設定、時序設定
、空間篩選、環域篩選
2. 設定資料參數
統計地圖
統計圖表
3. 設定繪製類型
統計地圖、統計圖
表、 KML 、統計資訊、
使用資料集、圖例資訊、
繪製狀況 ...
5. 取得統計結果

統計地圖 API 應用資料庫
需要指定表格名稱及欄位名稱來取得一筆統計資
料進行繪製。
如 [ 行政區醫療院所統計 ] 表格的 [ 醫療院所家數 ]
欄位，可以用 [327FI_A5C1] 、 [H_CNT] 表示。
在相同時間區間和統計單元的前提下，可進行跨
表跨欄的統計資料取用。

自有統計資料
須依照指定欄位格式，將統計資料整理為特定格式之
Excel 案檔，再用轉換程式轉為 XML 檔。
( 參考範例網站 > 說明文件與開發範例下載檔 >Excel 轉程式說檔
明 )
透過指定 XML 路徑的方式，使檔 API 對統計資料進
行解析並繪製統計圖。

43
自有統計資料
須依照指定欄位格
式，將統計資料整
理為特定格式之
Excel 案檔，再用轉
換程式轉為 XML 檔
。
http://210.65.89.57/STAT_SAMPLE_160615/api/ExcelToXml

共通設定
統計時間：一律以 xxxYxxM 的格式填寫
102Y 、 101Y06M 、 99Y12M 、 104Y1S….
行政區代碼：
65000 、 10002 、 10008010 、 10008020...
統計區代碼：
A1401-02 、 A0501-01-001 、 A1501-0015-00

第一個範例
繪製 102 年 6 月 - 全國各縣市醫療院所家數

<HTML> + Javascript
使用統計地圖 API 應用資料庫 -Sample01

DataDB (dataSet ,DataOption option, CoordSystem coordinate, AreaSelect select)
StatMap (object containerObj, [DataDB/DataOwn] dataobj, string mapKind,
MapOptions mapOpts)
指定資料表格、欄位
資料設定坐標系統資料篩選
來源統計資料
互動式地圖介面
統計資料來源設定統計地圖類型設定
地圖參數設定

指定統計時間、空間統計資料類型
指定空間篩選方式
空間統計資料類型：
•行政區資料為 ADMIN ；
•統計區資料為 CODE ；
•機構別資料 (XY 坐標點 ) 為
LOCATE
空間篩選方式：
•行政區 / 統計區選取： DISTRICT
•空間篩選： SPATIAL
•環域篩選： BUFFER
資料層級類型：
•縣市 (COUNTY) 、鎮市區鄉
(TOWN) 、村里 (VILLAGE)
•二級發布區 (CODE2) 、一級發布
區 (CODE1) 、最小統計區
(CODEBASE )
•機構別 (ORG)

建立資料集
範例：匯入統計地圖API應用資料庫

設定配色及分級方法
• 配色色碼裡找哪 ?
– http://www.color-hex.com/color/8b78
– http://board.ek21.com/colortable.htm
• 分類法
– 等距法： ClassifyMethod.EQUALINTERVAL
– 去除前後 5% 資料： ClassifyMethod.EQUALINTERVAL5
– 等量法： ClassifyMethod.QUANTILE
– 自訂： ClassifyMethod.USERDEFINED

實機練習 1:
開範例啟匯入統計地圖API應用資料庫
指定行政區為
-districtCode: [ '63000', '64000', '65000', '66000', '67000']
修改參數後點選「檢視成果」，確認調整結
嘗試調整統計地圖參數，如配色、分級法、分級數等

使用自有統計資料 -Sample02
DataOwn
Excel 檔 XML 格式
( 說明文件與開發範例下載檔 >Excel轉程式說明檔 )
XML 範例
http://segisapi.moi.gov.tw/StatAPI/Sample/budget_TY.xml
行政區代碼及名稱
欄位資訊（代碼、名稱、統計時間
、統計、統計單位）值

使用自有統計資料 -Sample02
指定來源 XML 統計資料

實機練習 2:
開範例啟匯入API介接者自有資料
設定透明度var option = {
pChoropleth: pChoropleth,
baseLevel: BaseLevel.TOWN,
opacity:0.3 // 設定透明度 0~1
};

柱狀圖
MapKind.BAR
其他統計地圖樣式 -Sample03
var pBar = {
maxHeight: 80, // 設定最大柱高
barWidth: 30, // 設定最大柱寬
chartView: true,// 設定顯示詳細圖表
color: [‘#fefa2c’, ‘#E6CC37’, ‘#8B7819’]
// 設定柱狀圖配色
};
var option = {
pBar: pBar
};
var containerObj = document.getElementById("mapView");// 指定互動式介面的 DIV
ID
var map = new StatMap(containerObj, data, MapKind.BAR, option);
map.drawMap(function (result) { }); // 繪製統計地圖

圓餅圖
MapKind.PIE
var pPie = {
size: 100, // 設定圓餅大小
chartView: true,// 設定顯示詳細圖表
color: [‘#fefa2c’, ‘#E6CC37’, ‘#8B7819’]
// 設定柱狀圖配色
};
var option = {
pPie: pPie,
};
var containerObj = document.getElementById("mapView"); // 指定互動式介面的
DIV ID
var map = new StatMap(containerObj, data, MapKind.PIE, option);
map.drawMap(function (result) { }); // 繪製統計地圖

分級符號
MapKind.SYMBOL

實機練習 3:
開範例啟繪製統計地圖-柱狀圖、繪製統計地圖-圓餅圖、
繪製統計地圖-分級符號圖
設定互動式視窗透明度
調整顏色、分級方法，最大柱高等‧‧‧
var infoOpts={ // 設定互動式視窗參
數
opacity:0.8 // 設定透明度
};
var option={
pBar: pBar,
infoOpts: infoOpts
};

複合式統計地圖 -Sample04
statLayer() // 新增統計地圖圖層
appendLayer // 疊加統計地圖圖層

複合式統計地圖 -Sample04
function init() {
// 建立第一層資料設定
}
function drawStatMap() {
// 繪製第一層統計地圖
}
function appendLayer() { // 建立第二層資料 + 疊加第二層統計地圖
statLayer = new StatLayer(dataDB_Symbol, MapKind.SYMBOL, option2);
// 新增第二層統計地圖圖層
statMap.appendLayer(statLayer, function () { });// 繪製第二層統計地圖圖層
}

實機練習 4:
開範例啟繪製統計地圖-合併輸出
調整顏色、分級方法等‧‧‧

繪製統計圖表 -Sample05
折線圖
ChartKind.LINE
lineStyles: 實線 (solid) 、虛線 (dash) 、點 (dot)
color: [ ] // 系統自動配色

圓餅圖
ChartKind.PIE
color: [ ] // 系統自動配色

柱狀圖
ChartKind.BAR

實機練習 5:
開範例啟繪製統計地圖-折線圖、繪製統計地圖-
圓餅圖、繪製統計地圖 - 柱狀圖
加入圓餅圖圖表 Title
更改互動訊息視窗背景色，在 var Option={} 加入
var Option = {
chartTitle: "101 年 - 中南部各縣市勞動力人口數 ",
pPie: pPie
};
infoOpts: { // 訊息視窗內容設定
infoColor: "#F6D470", // 背景色
opacity: 0.8 // 透明度
}

輸出類型 -Sample06
exportImage:true // 開純影像輸出設定啟
exportKML:true // 開匯出啟 KML 設定檔
result.imageUrl[0] --- 取得 PNG 影像檔連結
result.kmlUrl --- 取得 KML 檔連結
範例純影像圖資、 KML 案檔

含 Z 之值 KML 面量圖
範例 KML 案檔

面量圖加標記（ Label ）
// 行政區 / 統計區 (NAME) 、統計值 (VALUE) 、名稱 + 統計
值 (ALL)
範例純影像圖資

實機練習 6:
開範例純影像圖資，改成分級符號啟 (MapKind.SYMBOL)
將 var pChoropleth= { } 改成
匯出的影像使用行政區底圖
var pSymbol = {
classifyMethod: ClassifyMethod.QUANTILE,
classes: 5,
fillColor: "#ffb9b9",
useInt: true
};
var option = {
…..
useBasemap: true, // 指定影像是否加上行政區底圖
….
pSymbol: pSymbol,
};
var map = new StatMap(null, data, MapKind.SYMBOL, option);

時序設定 -Sample07
使用時序繪圖設定

實機練習 7:
開範例時序繪圖設定啟
將 pLine 的設定改為
xAxis: XAxis.SPATIAL,
data: XAxis.TIME,
按下「檢視成果」

空間篩選 -Sample08
最小統計區面量圖 + 環域篩選
AreaSelectType.BUFFER
- 設定環域中心、環域半徑
統計區統計資料類型：
DataType.CODE
統計區層級設定：
DataLevel.CODE2 二級發布區
DataLevel.CODE1 一級發布區
DataLevel.CODEBASE 最小統計區

實機練習 8:
開範例環域篩選篩選，啟將資料改為最小統計區
dataLevel:DataLevel.CODEBASE
以線作為環域中心，
wkts:['LINESTRING(180799 2520833,186154
2525320)'],

空間篩選 + 匯出分級資訊 -Sample09
匯出面量圖之分級資訊─choroLegend
指定行政區 / 統計區篩選─AreaSelectType.DISTRICT
範例匯出分級資訊

實機練習 9:
開範例匯出分級資訊啟
設定 areaSelect 如下
將 dataOption 內之 dataLevel: DataLevel.TOWN 改為
dataLevel: DataLevel.COUNTY ，再按下「檢視成果」後找出
圖面上的差異
var areaSelect = {
areaSelectType: AreaSelectType.DISTRICT, // 指定使用行政區 / 統計區
districtType: DistrictType.ALL, // 設定指定行政區的類型
districtCode: ['10003', '10004', '10017', '10018', '10005', '63000', '65000']
};

2016統計地圖API教學簡報

More Related Content

Similar to 2016統計地圖API教學簡報 (20)

2016統計地圖API教學簡報

Editor's Notes