iT邦幫忙

0
鐵人賽 神助攻 HERE Technologies

快速建構地圖服務(三) - 使用 QGIS 玩轉 HERE Data Hub

WW 2020-09-10 14:46:588127 瀏覽
  • 分享至 

  • xImage
  •  

快速建構地圖服務(三) - 使用 QGIS 玩轉 HERE Data Hub

使用 QGIS 玩轉 HERE Studio/Datahub

QGIS 初體驗

QGIS 官方中文網站:https://qgis.org/zh-Hant/site/

QGIS 是一套免費而且開放原始碼的地理資訊系統(Geographic Information System),商用的 GIS 軟體的授權費用非常高,因此我們這裡使用的是免費的 QGIS。GIS 軟體的功能主要是顯示地理資料,並具有轉換、編輯、計算地理資料的功能。以一般人的使用來說,QGIS 已經是游刃有餘了。而且 QGIS 是跨平台的,因此不管是 Windows/Mac OS/Linux 甚至 Android 都可以使用。

QGIS 經過長時間的改進,目前已經到達版本 3.14.15(名稱為 Pi),不僅穩定度大幅的提昇,功能也更加多元,除了內建的工具之外,也可以安裝外掛來加入新功能,除了外掛之外,QGIS 也支援 Python 3 語言,因此您也可以在 QGIS 裡面寫程式來處理資料,或是開發自己的外掛。

GIS 的功能可說是博大精深,特地開一門兩學分的課可能也講不完,因此在這個課程中,我們只會介紹一小部份的功能。

下載 QGIS:https://qgis.org/zh-Hant/site/forusers/download.html

在選擇安裝檔,我建議使用「QGIS 獨立安裝程式版本(64 位元)」因為比較簡單,當然如果您要選擇 OSGeo4W 的版本也可以,只是安裝過程會比較繁瑣一點。

GIS 獨立安裝程式的安裝過程相當簡單,但請記得不需要安裝另外三個 dataset:

XYZ Hub Connector

安裝完之後,就可以打開它,第一次開啟後,我們先來裝外掛,請先按功能表的「Plugins」,接著選「Manage and Install Plugins...」

在「ALL」這個分頁會列出您可以安裝的外掛,可以看到內容相當豐富。請在搜尋文字框裡面輸入「xyz hub」,會看到「XYZ Hub Connector」,點右下角的「Install Plugin」就可以了。安裝完之後請按「Close」關閉。

安裝完之後您會發現在工具列上面多了兩個按鈕,按下左邊的按鈕。

出現 XYZ Hub Connection 之後,按下右上角的「Setup」,出現 Setup XYZ Hub Token 之後,請按下「Add」。

這邊會有兩個文字輸入框,上方的「Name」您可以給他一個名稱,下方的「Token」,請輸入我們之前已經申請具有最高等級權限的 Token。如果之前沒記下來,請登入 HERE Data Hub Console 來查詢。輸入完之後按下「OK」即可。

接著在 Setup XYZ Hub Token 也會看到您剛剛輸入的 Token,按下「OK」即可。

接著按下「Connect」,您可以看到之前建立好的 Space。

接著我們就可以使用 QGIS 來讀取這個 Space 的內容,請選取我們要讀取的 Space,在右下角的 Mode 中選擇 「Static」,接著按下「Load」,QGIS 就會從 Data Hub 上面下載這個 Space 裡面的內容,並顯示在地圖上。

您可以用滑鼠左鍵按住地圖來平移(請先選取工具列的手掌圖示),也可以用滑鼠滾輪來控制地圖縮放,按下滑鼠滾輪(中鍵)也可以用來平移地圖。

另外,在左下角的 Layers 裡面,存放著我們剛剛下載下來的資料,我們稱之為圖層(Layer)。每一個圖層都可以設定顯示的樣式,也可以查看內容。例如請在 scidm-maskdata_geo.csv 這個圖層上面按下右鍵,選擇「Open Attribute Table」來開啟屬性表。

開啟之後您就會看到跟我們之前上傳的 CSV 差不多的內容,只是 HERE Data Hub 會加入一些欄位,例如「xyz_id」、「color」等。在表格上面按右鍵,選「Zoom To Feature」,地圖就會放大到您選的那一筆 Feature(圖徵)。按下「Flash Feature」,地圖上您選取的這個 Feature 就會閃爍提示您位置。

我們也可以在屬性資料表裡面直接編輯每一個 Feature 的屬性。請按下屬性表左上方的黃色鉛筆按鈕,按下去就會開啟編輯模式。接著點選到任意一個欄位,您就會發現每個內容都可以修改。

當然,每一筆紀錄都是可以新增刪除的。我們先回到地圖畫面,找到工具列的「Add Point」,按下去之後,游標會轉為十字瞄準線,在地圖上任一處點一下,就會出現一個視窗,您可以輸入這些屬性。我們先輸入一筆假資料。

輸入完之後,按下「OK」,地圖上就會出現一個您剛剛新增的 Feature。

屬性資料表裡面也會出現您剛剛新增的紀錄。

接著請再按一下左上角的黃色鉛筆,會出現對話框問您要不要存檔,請按下「Save」。

然後回到工具列,找到 XYZ Hub Connector 工具列,您會發現右邊的按鈕剛剛原本是灰色的,現在變成綠色了,請按下去。

按下去之後 XYZ Hub Connector 就會把您剛剛做的變更都上傳到 Data Hub 上,完成的時候地圖畫面上也會跳出通知訊息。

接著請打開您在上個課程製作的 HERE Studio 地圖,會看到您剛剛新增的 Feature 已經出現在地圖上嘍!是不是非常方便呢?

可以新增當然也刪除,一樣請進入屬性資料表,按下黃色鉛筆,找到您剛剛新增的Feature,按下最左側的編號,接著按下上方功能表的紅色垃圾桶,就可以刪除這筆 Feature。刪除後別忘了再按一次黃色鉛筆,並選擇「Save」。接著再把變更上傳到 Data Hub 就可以了。

如果您正確操作,重新打開地圖之後就會發現剛剛新增的 Feature 已經消失了!

QGIS 基本操作

首先,請先打開這個網頁:https://data.taipei/#/dataset/detail?id=a9c282c5-3a43-41ed-badc-f9c1bdf1cc34

接著按下「禁停紅黃線」右側的「預覽」,會出現一個 Google Drive 的連結,打開它。

之後按下右上角的下載按鈕,就會開始下載。

下載的檔案是一個 .zip 檔,請解壓縮到任意位置。您會發現裡面有五個檔案,分別是 .cfg 、.dbf 、.prj 、.shp 、.shx,而我們統稱這樣的檔案結構為 Shapefile,也是目前業界主流的向量地理資料格式之一。請務必保留這五個檔案,少了任何一個都不行。

接著回到 QGIS,按下左上角的白紙圖示開一個新的專案,如果問你要不要儲存目前的專案,按下「Discart」就可以。

面對您的會是一張純白的地圖,接著請把剛剛下載的五個檔案中的「.shp」檔案直接用滑鼠拖進去。

檔案開啟後,我們可以縮放或平移它,不過目前只有單色的線段。

我們可以加上一個底圖讓位置概念比較明確一點,請在左方的 Browser 中點兩下 「XYZ Tiles」,再點兩下「OpenStreetMap」。

QGIS 會自動開一個新圖層,並且把 OpenStreetMap(開放街圖) 的地圖顯示出來,不過目前看起來怪怪的,因為 OpenStreetMap 把我們原本想看的禁停紅黃線圖遮住了。

請您用滑鼠在「Layers」裡面,按住「OpenStreetMap」之後往下拖。我們可以用這種方式調整圖層的順序。

藉由這個步驟我們就更清楚目前地圖的位置了。然後,我們可以用「Identify Features」(識別圖徵)的小工具來查看地圖上面的任何圖徵。請點選工具列上面的這個按鈕:

按下這個按鈕之後,滑鼠游標會變成一個黑色上面有個字母 i 的圖案,接著請在地圖上面隨一點點看,QGIS 的右側會顯示出您在地圖上點選的圖徵的所有屬性資料。

雖然相關的屬性資料很多,不過我們最需要注意的是「PATYPE」,其中「PATYPE」如果是「02」的話就是黃線,其他則是紅線。我們可以在 QGIS 裡面用這樣的規則把顏色加上去。

請在「noparkin_20XXXXXX」圖層上面點兩下,會出現圖層屬性視窗,其中的「Symbology」分頁就是設定圖層的顯示風格,例如顏色、線條粗細、圖樣等等。目前裡面只有一種顏色。您可以點「Color」去修改顏色,調整「Width」的數值去調整粗細等,但都只有一種顏色套用在整個圖層。

要依照屬性畫上不同的顏色,請按下畫面上方的「Single symbol」,會出現五個選項,請選擇第三個「Categorized」。

接著請按下「Value」旁邊的方塊右側的小箭頭,按下「PATYPE」。直接輸入也可以。

接著按下下方的「Classify」,這樣所有 PATYPE 的值都會被列出來,裡面有 01、02、06、11 四種值,也會預先給每個值不同的顏色。

在彩色的線條上點兩下,就可以修改他的顏色、粗細與透明度等等。請依序把 01、06、11都改成紅色,02 則改成黃色。

修改完之後按下右下角的「OK」即可。

回到地圖上,黃紅線就會顯示他們應該呈現的顏色了。話說台北市的黃線還真是少的可憐哪!

使用 QGIS 新增 Space

同樣的概念我們也可以使用在 HERE Studio,依照不同的屬性給予不同的顏色。首先,請開啟 XYZ Hub Connection,並按下「Connect」。等連線完畢後(會出現您既有的 Spaces),請按下下方的「Manage Spaces」,接著按下「New」。

這邊我們要用 QGIS 來新增一個 Space,請在「Title」與「Description」分別輸入標題與描述。輸入完畢之後請按下「OK」。

接著在 Spaces 列表,就會出現您剛剛新增的 Space 了!

然後我們要做的動作,就是把現在的「noparkin」這個圖層上傳到剛剛建立的 Space。因為我們現在用的這個資料集格式為 Shapefile,是無法用 Studio 的網頁介面上傳的,您可以使用 HERE CLI 或 QGIS 來上傳,而我會比較建議剛開始接觸的時候使用 QGIS 會比較方便,因為您可以先檢驗資料的內容,並且了解資料的結構與欄位屬性,之後在作業上會比較快。

而 HERE 所提供的 XYZ Hub Connection 就是一個方便的工具,讓您可以在工作流程中整合 HERE Data Hub,而不用另外呼叫 CLI 或使用 API。

CRS 轉換

雖然 QGIS 搭配 XYZ Hub Connection 是可以直接上傳 Shapefile 格式的,但是在這個資料集上面無法直接上傳,因為這個資料集的座標系不是標準的 WGS84 座標,而是台灣本土的 TM2 座標系,因此如果您硬要直接上傳,會出現錯誤訊息。

QGIS 裡面顯示這個資料集 Shapefile 的 CRS (Coordinate Reference System,參考座標系統)的是 TWD97/TM2 座標。

這邊要注意的是,如果您的資料來源為政府機關,這種狀況是很常見的。台灣的政府機關使用的座標系可能有 TWD67/TM2、 TWD97/TM2、TWD67 經緯、TWD97 經緯(同 WGS84),如果座標系不對的話會造成顯示上的位移或錯誤,因此請務必注意座標系轉換的問題!

詳情可參閱:http://www.sunriver.com.tw/grid_tm2.htm

因此我們現在要做的就是把座標系轉換成 WGS84。請在「noparkin」圖層上,按下右鍵,點選「Export」,接著點選「Save Feature As...」。

接著,請在 Format 選擇「GeoJSON」,File name 輸入存檔的路徑與檔名,在 CRS 選擇 「ESPG: 4326 - WGS 84」。

在存檔的時候,也可以選擇需要或不需要的欄位,因為我們只需要「PATYPE」這個屬性來填色,因此可以把其他的選項都取消勾選,只留下「PATYPE」。之後按下「OK」即可。

等待一段時間,QGIS 會把輸入的 Shapefile 輸出成 GeoJSON 格式(最下方的狀態列會顯示進度),並開啟在地圖上。

在新增的 GeoJSON 圖層上面按右鍵選擇「Open Attribute Table」,可以看到確實只剩下 PATYPE 這個屬性而已了。

回到 XYZ Hub Connection 視窗,在下方選擇「Upload」,然後選取您剛剛建立的 Space,然後下方的「Layer」請選擇我們剛剛新增的 GeoJSON 圖層,至於「Tags」可輸入也可留白。接著按下「Upload」來上傳這個資料集。

按下「Upload」之後會出現一個對話框,因為資料上傳到 Data Hub 之後,會經過一些轉換的作業,因此會跟原本的格式不太一樣,我們按下「OK」來繼續進行上傳作業。

按下「OK」之後,就會開始上傳作業,您可以按下狀態列右下角的訊息按鈕來開啟「Log Message」,可以看到 XYZ Hub Connector 分頁裡面也印出了一些訊息。因為這個資料集的數量較多,會需要靜待一段時間。

上傳成功之後在地圖上方會跳出一個綠色訊息,告訴你已經上傳成功,像這樣:

不過如果等待一段時間都沒有出現,您也可以使用 XYZ Hub Connector 來看資料上傳的進度。在 XYZ Hub Connector 按「Connect」或「Ok!」來重新取得統計數據。

這邊可以看到資料的筆數(feat_cnt)為 125766。接著在我們上傳的 GeoJSON 圖層上面按下右鍵,選「Show Feature Count」,就會顯示這個圖層的資料筆數。

可以看到兩邊的筆數是一樣的,代表上傳完成了!

HERE Studio 地圖製作

接著開啟 HERE Studio。登入後,選擇「Create new project」,然後按下「+ Data」把剛剛上傳的 GeoJSON 圖層加到地圖上。

HERE Studio:https://studio.here.com/

接著,請依照之前課程所學的,選擇資料集、點選「Lines」、但這邊我們並沒有要直接設定顏色,因此請按下「+ Add new line style」。

接著依照以下步驟進行:

  1. 「Style group name」輸入一個名稱,例如「Yellow Lines」
  2. 「Property」選擇「PATYPE」
  3. 「Condition」選擇「Equals」,代表「等於」。
  4. 「Value」輸入「02」(此時會出現一個警告訊息,請按下「Do not show this message again」。
  5. 按下「Confirm」

接著就會看到您建立的 Yellow Lines 就出現在樣式設定中,接著您就可以設定顏色,請設定黃色。

然後重複上一個步驟,不過這次我們要在「Condition」選擇「Does not equal」,也就是「不等於」。

接著把這個樣式設定紅色。

這樣紅黃線地圖基本上設定完成。我們用剛剛的步驟,再把台北市的區界加上去。

h6臺北市區界圖:https://data.taipei/#/dataset/detail?id=1601ef3a-c253-4988-b047-943d9e786143

請下載這個資料集之後,解壓縮,然後把 .shp 檔案拖進 QGIS,但這裡必須要先設定座標系,因為原始資料裡面並沒有設定座標系,這樣我們直接轉檔會出問題。

打開「G97_A_CADIST_P」之後,在圖層上面按下右鍵,選「Set CRS」,接著選「Set Layer CRS...」。

接著,請在「Filter」裡面輸入「twd97」,然後選擇下方的「TWD97 / TM2 zone 121」,ID 為「ESPG:3826」,接著按下「OK」。

然後依照之前所學的:

  1. 轉成 GeoJSON 格式並轉換成 WGS84 座標。
  2. 使用 XYZ Hub Connector 新增一個 Space。
  3. 把 GeoJSON 格式的區界圖上傳到這個新的 Space。
  4. 進到 HERE Studio 裡面,重新開啟之前建立的紅黃線地圖。
  5. 把這個新的 Space 加到圖中,並設定樣式。

小秘訣:

  1. 樣式名稱可以輸入中文,而顯示在圖例上。
  2. Default Line style 顯示在圖例上很礙眼,可以把線條寬度「Width(px)」改成 0,就不會顯示在圖例上。

稍加設定之後一個漂亮的紅黃線地圖就完成了!


住宅安全地圖實做

在這個專案裡面,我們會用到以下幾種 Open Data:

  • 順向坡分布圖(geojson):https://opendata.epa.gov.tw/Data/Details/SOIL00112
  • 活動斷層分布圖(kml):https://opendata.epa.gov.tw/Data/Details/SOIL00103
  • 土壤液化潛勢圖資群組(geojson):https://data.gov.tw/dataset/28691

為了各位方便,我把檔案都下載好放在 Google Drive 上面,請到這裡下載:https://drive.google.com/file/d/1BDvK-Zahf-ONL9iwxNjDtTMxsuH6-bwI/view?usp=sharing

下載之後請解壓縮到您的電腦上。

第一步就是先把這些 Open Data 都放到 Data Hub 上面,您可以嘗試用 HERE CLI 來做,或是用 HERE Studio 的網頁介面,不過要注意的是,CLI 或 Studio 是不支援 KML 格式的,因此您需要透過 QGIS 才能上傳。

首先我們先試著用 QGIS 去讀這些檔案,首先先把「活動斷層.kml」跟「順向坡分布圖.json」拉進去。這兩個檔案都使用標準的 WGS84 座標系,因此沒有 CRS 轉換的問題。我們可以使用 QGIS 去瀏覽與檢查資料是否正確。

其實光是用 QGIS 看圖就很有趣了,會發現有些社區就蓋在順向坡上面。

而大名鼎鼎的「山腳斷層」,也在圖面上一覽無遺。

檢查無誤之後就先把圖層關閉,在圖層上面按右鍵,選擇「Remove Layer...」,會出現對話框詢問是否要移除圖層,選擇「OK」就可以關閉圖層,留下底圖就好。

QGIS 圖資處理

接著我們要來處理土壤液化圖層,解壓縮之後你會看到三個資料夾,分別是「土壤液化高潛勢」、「土壤液化中潛勢」、「土壤液化低潛勢」,裡面分別有十幾個 .json 的檔案,這些是 GeoJSON 格式的地圖資料,請全部拖進去 QGIS 中。

全部總共有 51 個圖層,但你會發現在 Layers 裡面有些圖層看起來比較不一樣,這是因為這些圖層裡面是空的,因此我們必須先把這些圖層先移除。

再來我們要把剩下的四十多個圖層全部合成一個,因為我們也只需要一個資料集上傳到 Data Hub 就好。請按下工具列中的 Toolbox 按鈕,或按 Ctrl+Alt+T 來開啟工具箱。

工具箱出現後,在上方的文字輸入框輸入「merge」,接著點兩下「Merge Vector Layers」。

接著按下「Input layers」的右方「...」按鈕,然後選擇「Select All」,接著按下下方的「Run」,很快就完成了。

接著您會看到 Layers 裡面多了一個「Merged」,按下右鍵存成新的 GeoJSON 檔案。然後只留下這個新的 GeoJSON 檔,其他都關掉。

然後我們就依照之前所學的,使用 XYZ hub Connection 建立三個新的 Space,然後把這三個資料集上傳上去。等待幾分鐘就上傳成功了。

您也可以使用 HERE Studio 花幾分鐘製作一版地圖。

這樣就已經可以發布在網路上了,但是您可能會覺得有一些缺點,例如:

  1. 能不能結合地址定位的功能,輸入地址回傳是否位於土壤液化帶,或是順向坡?
  2. 底圖能不能顯示中文?

因此我們這邊就要帶大家使用 JavaScript 的方式來實做出一個網路地圖,並且加入更多的功能。這個部份會需要一點程式設計的能力,不過我會用儘量簡單的說明來帶領你完成。

「快速建構地圖服務」系列文章

快速建構地圖服務(一) - 認識 HERE Studio / Data Hub
快速建構地圖服務(二) - 認識 HERE Data Hub CLI / API
快速建構地圖服務(三) - 使用 QGIS 玩轉 HERE Data Hub
快速建構地圖服務(四) - 當 Leaflet JS 遇見 Data Hub
快速建構地圖服務(五) - 整合 HERE 地點搜尋 API
快速建構地圖服務(六)- HERE Waypoints Sequence 路徑最佳排序
快速建構地圖服務(七)- 認識 HERE Routing API - 路徑規劃
快速建構地圖服務(八)- 認識 Matrix Routing
快速建構地圖服務(九)- Isoline Routing
快速建構地圖服務(十)- HERE Tour Planning 物流路徑預排與成本精算
快速建構地圖服務(十一)- HERE Route Matching GPS 軌跡分析
快速建構地圖服務(十二)- HERE Custom Locations 地圖資料倉儲與查詢
快速建構地圖服務(十三)- HERE Geofencing 地理圍籬
快速建構地圖服務(十四)- HERE Custom Routes 自建路網 + Vector Tile 向量圖磚 + Map Image API 靜態地圖
快速建構地圖服務(十五)- HERE Positioning 網路定位服務


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言