圖資雲平臺教育訓練 - 臺中市政府資訊中心 · 圖資雲平臺功能介紹 1. 鑲嵌式圖台介紹 2. 鑲嵌式圖台API介紹 3. 圖資服務介紹(WMS、WMTS) 4

臺中市政府資訊中心 106年度圖資雲維護擴充及應用推廣計畫案

圖資雲平臺教育訓練

簡報人：林瑞軒

群琁地理資訊顧問(股)公司

中華民國 106 年 12月 12日

資訊系統介接講習訓練議程大綱

2

參加對象系統開發人員(相關局處承辦人及廠商)

時間 106年12月12日下午14:00

場地本府資訊中心電腦教室(文心樓2樓)

議程主講人

14:00-14:05 主辦單位說明

14:05-15:45

圖資雲平臺功能介紹

1. 鑲嵌式圖台介紹

2. 鑲嵌式圖台API介紹

3. 圖資服務介紹(WMS、WMTS)

4. 功能服務介紹(Web API、Web Service)

5. 應用範例

群琁地理資訊公司，林瑞軒

15:45-16:00 問題與討論

大臺中圖資雲平臺架構

3

4

BrowserGeo4O ClientGeo4O Cloud Client

Browser Browser

Load Balance

鑲嵌圖臺功能服務圖資服務

Geo4O Cloud / Server

圖台服務伺服器

鑲嵌圖臺功能服務圖資服務



WMTSWMS

集中式空間資料庫

Oracle

DB伺服器

手機

平板

個人電腦

Geo4O Cloud ClientGeo4O Cloud

Client



系統整體架構

5

圖臺功能架構圖

6

自有圖台應用開發

Geo4Oracle Cloud Server

核心圖資服務

Geo4Oracle Cloud Client

模組化鑲嵌式圖台

OGC服務

Oracle、SQL Server

高整合度客製化API

業務圖資服務

資料庫、軟體與服務關係圖

7

圖資雲平臺服務概述 API項目服務內容服務格式適用對象

鑲嵌式圖臺地圖圖台(圖磚、主題圖)

各定位/查詢類API

圖層控制(圖磚、主題圖、向量圖)

圖面標繪(向量)

檔案套繪(向量)

樣式設定(熱區圖、聚合圖)

JavaScript API • Client端網頁 • 無自有GIS環境/圖台

網路服務元件各定位/查詢類服務

坐標系統轉換圖資空間查詢

Web Service (SOAP XML)

• Server端程式 • 純MIS環境不需要圖台

/或自有圖台

Web APIs 各定位/查詢類服務坐標系統轉換圖資空間查詢 DTM地型數值模型-坡度坡向查詢 (內政部國家高速網路與計算中心-試辦介接)

Web API (JSON, Ajax)

• Client/Server端 • 純MIS環境不需要圖台

/或自有圖台

網路地圖服務(WMS) 網路圖磚服務(WMTS)

標準OGC服務 • Client/Server端 • 自有圖台 • GIS軟體

大臺中圖資雲平臺服務平臺服務管理子系統

8

服務平臺服務管理子系統

9

10

項目用途及內容適用對象

1.0 應用示範各項應用示範案例可幫助各局處及開發者為協助開發者瞭解鑲嵌圖臺之運作及實際執行效果。開發者端

2.0 應用案例應用平台各項服務開發之系統案例。開發者端

3.0 開發專區開發者端

3.1 API說明與測試網頁

3.1.1 鑲嵌圖臺API

線上API說明文件，，開發人員可詳細取得各API之說明，包括API之名稱、參數、範例、回傳結果說明等必要技術性資訊。

3.1.2 網路服務元件

線上網路服務元件說明文件，開發人員可詳細取得各API之說明，包括API之名稱、參數、範例、回傳結果說明等必要技術性資訊。

3.1.3 測試沙箱協助開發者瞭解鑲嵌圖臺之運作及實際執行效果，可以在開發前先行測試API之用法功能及執行效果，加速開發之速度。

3.2 申請文件下載申請者可下載相關服務申請表單，填寫相關資訊後送交審核，並供管理者進行相關設定。

4.0 服務管理控管端

4.1 平臺會員管理管理使用平臺各項服務之人員/機關帳號及其基本資訊。

4.2 API-KEY管理系統一組API-KEY係對應一個引用平臺服務之應用系統，用於管控該應用系統對平臺服務資源之存取控制。

4.3 統計分析

透過API-KEY使用平臺各項服務皆需寫入LOG。

提供查詢及統計功能，可設定查詢時間範圍，並依統計項目(API使用次數/鑲嵌圖臺使用次數/圖層使用次數)及分項別(API-KEY/時/日/IP/系統名稱/瀏覽器)產出統計結果。

應用示範 1 系統網址：http://giscloud.taichung.gov.tw/

12 地標查詢附近有什麼範例

應用示範 2 門牌比對範例

應用案例應用平台各項服務開發之系統案例。

開發專區

14

1

API說明與測試網頁

開發專區

15

2

使用申請文件

大臺中圖資雲平臺鑲嵌式圖臺

16

使用鑲嵌式圖台有什麼好處？網頁伺服器內不用再架設任何地理資訊系統*(ArcGIS、GeoServer、MapGuide…)或建置空間資料庫*(SQL Server、Oracle、PostGIS…)，並不需要專業GIS人員處理圖資，可大幅減少伺服器使用資源與開發成本之負擔。

隨時隨地取得平台最新資源，包含最新的API功能、最新的圖形資料。

輕鬆使用平台內為市府內各局處整彙的圖資(底圖、主題圖)，並按週期定時更新。

府內單位申請核準即可使用，不需支付任何使用授權費用。

17

鑲嵌圖臺服務何謂鑲嵌式圖台？

類似 Google Map API ，僅透過簡單JavaScript連結，並呼叫API*函式，即可將地圖圖台鑲嵌在自己設計的網頁中，並搭配API函式傳入不同參數，可達到不同圖形及效果，並可與圖台進行互動操作。

18

鑲嵌圖臺服務適用於行動設備之瀏覽器。多元工具列類型。

開發各控制項應用所需之行為及事件控制功能。區分為無UI、基本、標準、進階及行動版本。

19

鑲嵌圖臺服務介接臺中市電子地圖、TGOS、國土測繪中心(NLS)、Google Map、Open Street Map等外部來源圖磚服務。

NLSC通用版電子地圖

市府電子地圖

TGOS福衛影像混合地圖

20

鑲嵌圖臺服務內建圖層開關，可切換內建底圖與主題圖；主題圖則包含公開業務圖資(如門牌、地標、地籍圖)及OpenData轉入圖資。

主題圖

OpenData轉入

21

鑲嵌圖臺服務內建快速搜尋功能，可查詢地址、道路、路口、行政區里、地號與XY坐標定位。

22

鑲嵌圖臺服務內建查詢及定位小工具，包含地號查詢定位、批次門牌比對、批次地號比對。

地號查詢

批次門牌

鑲嵌圖臺服務提供嵌入式地圖服務

23

• 符合Open Data潮流。 • 方便機關僅要將地圖嵌入網頁或E-

mail內分享使用。 • 在地圖上標繪、開關圖層、切換底

圖，點選上面「取得地圖嵌入網

址」，再輸入圖層資訊系統即自動產生超連結網址(URL)。

鑲嵌圖臺服務嵌入式地圖服務預覽

24

鑲嵌圖臺服務 <iframe frameborder="no" width="100%" height="100%" src="http://giscloud.taichung.gov.tw/embedmap/index_map.html?news=大臺中圖資雲嵌入式地圖服務&x=214004&y=2672749&scale=5000&label=這裡是台中市政府&wkt=POLYGON((213869 2672914,213975 2672849,214031 2672939,214117 2672894,214059 2672802,214162 2672723,214129 2672654,214015.57951241784 2672722,213967 2672654,213882 2672699,213929 2672771,213818 2672842,213869 2672914))"></iframe>

25 •市府官網鑲入示意圖

鑲嵌式圖台API

26

1 鑲嵌圖臺API

類項編號及名稱使用說明 API名稱

1.圖台初始類

1.1 基本初始圖台輸入相關初始參數後(可參考 3.1初始參數說明)，即可在指定Div將地圖開啟

genMap(object)

1.1.1 鑲嵌類型提供三種方式鑲嵌地圖：嵌入式地圖，無法使用大部分API功能；互動式地圖，可使用全部API功能；靜態圖片，亦可使用靜態圖片顯示於指定DIV中

genMap(object)

1.1.2 工具列類型鑲嵌式圖台工具列類型設定 genMap(object)

1.1.3 初始圖磚初始底圖圖磚指定 genMap(object)

1.1.4 初始主題圖層鑲嵌式圖台初始主題圖層設定 genMap(object)

1.1.5 初始坐標與比例尺設定地圖始初中心點坐標 genMap(object)

1.1.6 初始地圖旋轉初始地圖旋轉角度 genMap(object)

1.1.7 地圖訊息提示地圖右下角訊息提示 genMap(object)

1.1.8 回呼回呼(Callback) genMap(object)

2.定位/查詢

2.1.1 BBOX定位進行特定區域定位(minX, minY, maxX, maxY) locateBBOX(object)

2.1.2 XY坐標+比例尺定位 XY坐標+比例尺定位 locateXYS(object)

2.1.3 XY坐標定位 XY定位，輸入X、Y locateXY(object)

2.1.4 門牌定位輸入門牌(地址)關鍵字查詢，並可設定查詢後是否自動定位及自動開啟門牌圖層。

searchAddress(object

)

2.1.5 地標定位輸入地標關鍵字查詢，並可設定查詢後是否自動定位及自動開啟地標圖層

searchLandmark(obje

ct)

2.1.6 路段查詢及定位路段查詢，並可設定查詢後是否自動定位 searchRoad(object)

2.1.7 路口查詢及定位交叉路口查詢，輸入兩個路口名稱 searchCrossroad(obj

ect)

2.1.8 地籍查詢及定位段地號查詢，輸入段號(4碼)、地號(8碼，母號+子號)，並可設定查詢後是否自動定位及自動開啟地籍圖圖層。

searchLand(object)

28

鑲嵌圖臺API 類項編號及名稱使用說明 API名稱

2.定位/查詢

2.1.9 行政區查詢及定位

行政區查詢，輸入區代碼，並可設定查詢後是否自動定位及自動開啟行政區圖層。

searchCadist(object)

2.1.10 行政里查詢及定位

行政里查詢，輸入里名稱或代碼，並可設定查詢後是否自動定位及自動開啟行政里圖層。

searchCavlge(object)

2.1.11 取得行政區里、地段清單取得行政區里、地段清單 getLandList(object)

2.2.1 取得地圖中心點取得地圖畫面中心點 getCenter()

2.2.2 取得地圖比例尺取得地圖目前比例尺 getScale()

2.2.3 取得邊界坐標取得地圖目前邊界坐標 getExtent()

2.2.4 取得地圖Session 取得地圖Session與map name，可利用該資訊做主題圖層相關後端服務，如取得地圖圖檔。

getSessionId()

3.圖層控制

3.1.1 切換圖磚切換底圖圖磚 changeTile(object)

3.1.2 加入WMS圖層加入WMS圖層，可使用EmbedMap. getAvailableLayerList()API

查看可用WMS圖層清單 addWMSLayer(object)

3.2.1 取得圖層物件取得圖層物件 getLayerById(object)

4.圖面標繪類

4.1.1 標繪點進行圖面標繪點動作，當使用者標完後，回傳標籤文字與坐標資訊

drawPoint(object)

4.1.2 標繪線進行圖面標繪線動作，當使用者標完後，回傳標籤文字與坐標資訊

drawLine(object)

4.1.3 標繪矩形進行圖面標繪矩形動作，當使用者標完後，回傳標籤文字與坐標資訊

drawBox(object)

4.1.4 標繪圓形進行圖面標繪圓形動作，當使用者標完後，回傳標籤文字與坐標資訊

drawCircle(object)

4.1.5 標繪多邊形進行圖面標繪多邊形動作，當使用者標完後，回傳標籤文字與坐標資訊

drawPolygon(object)

2

29

鑲嵌圖臺API 類項編號及名稱使用說明 API名稱

4.圖面標繪類

4.1.6 標繪WKT 以程式方式標繪WKT坐標資訊於圖面上 drawWKT(object)

4.1.7 取得向量圖WKT 取得向量圖WKT坐標與Label資訊 getVectorLayerWKT(object)

4.1.8 清除標繪清除標繪 clearDrawing()

4.1.9 自訂泡泡框自訂泡泡框 setLayerTooltipDynamic(object)

4.1.10 關閉泡泡框關閉泡泡框 ClosePopup(object)

5.檔案套繪類 5.1.1 檔案套繪

透過檔案網址套繪，可讀取SHP,GPX,KML,GeoJSON檔；請先確認檔案是否為於平台讀取之網段，並確認檔案是否為正確網址。

addVector(object)

5.2.1 圖層開關圖層開關 setVisible(object)

5.2.2 圖層選取(向量) 圖層選取(向量) selectable(object)

6.主題圖層控制

6.1.1 加入主題圖層加入主題圖層(或已授權之業管圖層) addLayer(object)

6.1.2 移除主題圖層移除主題圖層(或已授權之業管圖層) removeLayer(object)

6.1.3 開關主題圖層開關主題圖層(或已授權之業管圖層) setLayerVisable(object)

6.1.4 篩選主題圖層篩選主題圖層(或已授權之業管圖層) setLayerFilterDynamic(object)

6.1.5 自訂主題圖泡泡框自訂主題圖泡泡框(或Tip) setLayerTooltipDynamic(object)

6.1.6 主題圖層選取主題圖層選取 getLayerSelection(object)

6.1.7 主題圖層清除選取主題圖層清除選取 clearLayerSelection(object)

7.其他

7.1.1 查詢可用圖層清單

依照各系統APIKEY，查詢回傳不同的可用圖層清單，包含：(主題圖層(業管)、圖磚、WMS、KML圖層清單

getAvailableLayerList()

7.1.2 地圖重整地圖重整 refreshMap()

7.1.3 地圖旋轉地圖旋轉 setRotation()

7.1.4 坐標轉換坐標轉換 transXY()

3

30

鑲嵌圖臺API 3

•時間軸

•面量圖

•熱區圖 •聚合圖

大臺中圖資雲平臺功能服務

31

32

Web Service與Web API 1 服務名稱

WS項目

WebAPI項目 WS網址

WebAPI 網址 WS方法

WebAPI 服務參數

行政區定位查詢服務

8.1.1

9.1.1 /embed/cadist_ws.cfc?wsdl

/embed/webapi.cfm searchCadist

DIST KEYWORD

API_KEY

行政里定位查詢服務

8.1.2

9.1.2 /embed/cavlge_ws.cfc?wsdl

/embed/webapi.cfm searchCavlge

VLGE KEYWORD

API_KEY

地址定位查詢服務

8.1.3

9.1.3 /embed/Address_WS.cfc?wsdl

/embed/webapi.cfm

searchAddress

ADDRESS ADDRESS

API_KEY

searchAddress_item

ADDRESS

ADDRESS

ITEM_LIST

API_KEY

道路定位查詢服務

8.1.4

9.1.4 /embed/Road_WS.cfc?wsdl

/embed/webapi.cfm searchRoad

ROAD ROAD

API_KEY

路口定位查詢服務

8.1.5

9.1.5 /embed/Crossroad_WS.cfc?wsdl

/embed/webapi.cfm searchCrossroad

CROSSROAD

ROAD1

ROAD2

API_KEY

都市計畫土地使用分區查詢服務

8.1.6

9.1.6 /embed/Luz_ws.cfc?wsdl

/embed/webapi.cfm searchLuz

LANDUSE

QUERYITEM

TOWNNAME

PLANNAME

X

Y

API_KEY

33

2 Web Service與Web API 服務名稱

WS項目

WebAPI項目 WS網址

WebAPI 網址 WS方法

WebAPI 服務參數

地籍定位查詢服務

8.1.7

9.1.7 /embed/Land_WS.cfc?wsdl

/embed/webapi.cfm searchLand

LAND

AA48

AA49

DIST

API_KEY 地標定位查詢服務

8.1.8

9.1.8 /embed/Landmark_WS.cfc?wsdl

/embed/webapi.cfm searchLandmark

LANDMARK LANDMARK

API_KEY

定點查詢服務 8.1.9

9.1.9 /embed/XYQuery_WS.cfc?wsdl

/embed/webapi.cfm

searchXYQuery

XYQUERY

X

Y

API_KEY

searchXYQuery_item

XYQUERY

X

Y

ITEM_LIST

API_KEY

坐標轉換服務 8.1.10

9.1.10 /embed/TransXY_WS.cfc?wsdl

/embed/webapi.cfm TransXY

TRANSXY

X

Y

SRS_S

SRS_T

API_KEY

空間查詢服務 8.1.11

9.1.11 /embed/SPQuery_WS.cfc?wsdl

/embed/webapi.cfm SPQUERY

SPQUERY

APIKEY

VERSION

BUFFER

ROWS

LAYER

COLS

ORDER

POINT

CIRCLE

RECT

WKT

SRSIN

SRSOUT

34

2 Web Service與Web API

服務名稱 WebAPI項目 WebAPI 網址 WebAPI 服務參數

DTM地型數值模型-坡度坡向查詢

9.1.12 /embed/webapi.cfm DTM

APIKEY

REQUEST

CONTENT(XY, 地號)

CALLBACK

內政部本年度指定本市為 DTM 試辦單位。

網路圖磚服務(WMTS)

35

網路地圖服務(WMS)


圖磚清單

36 http://giscloud.taichung.gov.tw/embedmap/getLayersDate.cfm

http://giscloud.taichung.gov.tw/embedmap/getLayersDate.cfm





介接範例

37 http://giscloud.taichung.gov.tw/embedmap/index_sample4.html

• QGIS單機軟體

• TGOS MAP API (JavaScript)

http://giscloud.taichung.gov.tw/embedmap/index_sample4.html


圖層清單

38


介接範例 (WMTS+WMS)

39 • ArcGIS JavaScript API地圖網頁 http://giscloud.taichung.gov.tw/embedmap/index_sample4.html

http://giscloud.taichung.gov.tw/embedmap/index_sample4.html


介接範例

40

• QGIS單機軟體

•鑲嵌圖台內圖層開關內可預覽WMS圖層

服務介接使用量項目註冊系統名稱註冊日期服務使用次數圖台使用次數總計

1 臺中空間地圖系統 2016/5/23 32,326,632 32,326,632

2 GIS交通事故地理資訊系統 2016/9/6 978,433 978,433

3 臺中市污水下水道系統 2016/6/14 519,923 6 519,929

4 大數據分析平台 2015/11/24 335,571 356 335,927

5 臺中市道路挖掘資訊網 2016/3/18 132,616 1,441 134,057

6 數位地圖館 2016/5/23 37,396 37,396

7 人民陳情管理系統 2016/5/5 21 17,095 17,116

8 臺中市政府專案管理資訊網 2016/9/8 9 11,686 11,695

9 標案管考系統 2016/12/12 32 3,333 3,365

10 區政管理系統 2016/6/28 501 2,835 3,336

11 臺中市心理健康空間地圖系統 2016/5/24 3,103 3,103

12 建築物違章管理系統 2016/12/12 52 2,844 2,896

13 新版人民陳情系統 2017/5/22 122 2,649 2,771

14 服務e櫃檯 2016/4/27 1,923 1,923

15 鑲嵌圖台應用示範 2015/9/15 806 1,113 1,919

16 宗教團體資料管理系統 2015/11/5 1,722 1,722

17 嵌入式地圖服務 2015/9/15 417 417

18 智慧應變暨交控中心整合系統 2017/5/23 365 365

19 旅宿業管理資訊系統 2017/9/28 1 219 220

20 臺中市建築線申請案件系統 2016/4/11 148 148

21 市政服務管理系統 2016/10/24 77 77

22 臺中市環境品質應變系統 2015/11/27 24 24

23 都市設計審議系統 2017/11/21 15 15

24 臺中市3D公共設施管線管理系統 2017/2/3 11 11

25 智慧應變暨交控中心雛型系統 2016/5/13 3 3

26 行道樹空間管理維護系統 2017/6/5 2 2

42

示範應用Demo

宗教管理及查詢應用案例

43

1.結合空間坐標

宗教團隊資料管理中之地址資料管理

結合空間坐標。

•撰寫地址輸入介面，輸入完成後自動取得空間坐標。

1

•地址定位API searchAddress…

EmbedMap.searchAddress({

address:'臺中市龍門路28號',

doDraw:true,

doLocate:true,

doShowLayer:true,

callback: function(o){

if(o.isError=="false")

alert("玉興宮的坐標為：" + o.x + "," + o.y);

}

})


44

2.自行標點

該場所無地址資料，需人工在地圖上點

選所在位置(如OO公園左下角入口處)

•提供開啟圖台功能按鈕。 •使用者在圖台快速定位功能。 •使用地標定位方式找到XX公園。使用者按”地圖取點”功能。

2

•圖台:快速定位功能及地圖工具列之操作。 •加入圖層API (地標圖層) addLayer… API:圖面取坐標drawPoint…

加入地標圖層，查詢圖面地標點位

EmbedMap.addLayer({

layerName:'G97_B_ICLMK_M',

legendName:'G97_B_ICLMK_M Legend'

}); 圖面上標繪點位，取得該點坐標資訊

EmbedMap.drawPoint({

callback: function(o){

alert("這裡是公館公園出入口，坐標為："+o.wkt);

}

});


45

3.自行輸入座標

訪查時發現附近有一神壇，並已透過

GPS取得WGS84經緯度，想標出位置

並輸出地圖。

• API:坐標轉換transXY(84->97) • API:標繪drawWKT •圖台:列印功能

•坐標輸入之介面中提供坐標系統之選項。

3

由其他裝置取得GPS點位(WGS84經緯度)，將該點

位轉換為圖台坐標系統EPSG:3826

var tmpXY = EmbedMap.transXY({

x:120.53955816490618,

y:24.274608509329084,

s_srs:'WGS84',

t_srs:'EPSG:3826'

}) 並將該點位標繪至地圖上

EmbedMap.drawWKT({

wkt:'Point(' + tmpXY.x + ' ' + tmpXY.y + ')',

label:'這裡是「聖帝宮」'

});

46

加入合法旅館圖層

EmbedMap.addLayer({

layerName:'G97_B_TTHOTEL_M',

legendName:'G97_B_TTHOTEL_M Legend'

});

查詢台中火車站200公尺範圍內旅館

EmbedMap.buffer = 200;

EmbedMap.drawWKT({

wkt:'POINT(218002 2670222)',

label:'台中火車站半徑200公尺範圍'

});

4

查詢半徑內圖層資料

簡報結束敬請指教謝謝您

Documents

圖資雲平臺教育訓練 - 臺中市政府資訊中心 · 圖資雲平臺功能介紹 1. 鑲嵌式圖台介紹 2. 鑲嵌式圖台API介紹 3. 圖資服務介紹(WMS、WMTS) 4