iT邦幫忙

1
鐵人賽 神助攻 HERE Technologies

快速建構地圖服務(一) - 認識 HERE Studio / Data Hub

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

  • xImage
  •  

快速建構地圖服務(一) - 認識 HERE Studio / Data Hub

關於此課程

  1. 您將申請一個免費的 HERE 開發者帳號,並使用此帳號來體驗 HERE 地圖服務。
  2. 您將學到如何使用 HERE Studio / Data Hub 上傳資料,建立您的第一個地圖,並發布在網路上。
  3. 您將學會如何透過 HERE CLI 的指令來建立、讀取、修改、刪除您的地圖資料,並且呼叫 HERE GeoJSON Visualizer 來秀出地圖資料。
  4. 您將學會如何使用 QGIS 來讀取 KML、GeoJSON 與 Shapefile 資料、轉換資料格式、管理您的 HERE Data Hub 儲存空間,並上傳地圖資料到 Data Hub,接著透過 HERE Studio 發布到網路上。
  5. 您將學會如何使用 Token 管理地圖資料的權限。
  6. 你將學會使用更多 HERE 地圖 API,結合 Data Hub 功能,做出更多有趣的應用。

課程中會使用的資料集:

  • 口罩地圖(csv): https://scidm.nchc.org.tw/dataset/nhi-maskdata
  • 台北市禁停紅黃線地圖(shp):https://data.taipei/#/dataset/detail?id=a9c282c5-3a43-41ed-badc-f9c1bdf1cc34
  • 順向坡地圖(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

什麼是 HERE Studio / Data Hub?

HERE Studio/Data Hub 是 HERE Technologies 所推出的一個線上地圖製作平台,其功能有兩大核心 Data Hub,以及 Studio。主要的特色有:

  • HERE Studio/Data Hub 是強大的地圖資料管理和顯示工具,使地圖資料處理更加方便和高效率。即使您沒有地理空間、位置或投影概念的經驗,這些工具也很容易理解並使用。
  • HERE Data Hub 提供免費且方便的的雲端服務,您可以透過 RESTful API 呼叫、CLI、甚至GIS系統來建立、讀取、修改、刪除您的地圖資料。
  • HERE Data Hub 提供嚴謹的權限管理功能,同一筆地圖資料可以開放不同的權限給不同的使用者。
  • HERE Studio 提供快速方便的 UI 元件,便於顯示和設定地理資料和內容的樣式,依照您的需求顯示數據和內容。
  • 即使您的地圖資料相當龐大,HERE Studio 也可以很快速的處理並發布在網路上。

圖片出處:https://www.here.com/platform/studio

什麼是 HERE Data Hub?

※ Tracking Coronavirus COVID-19 就是使用 Data Hub 建立的地圖服務(https://app.developer.here.com/coronavirus/)

您可以把 HERE Data Hub 想成是一個資料庫,這個資料庫支援點、線、面向量資料及其相關屬性。使用 HERE Data Hub 的好處是,您只需要專注在維護地圖資料的工作流程上面,因為 HERE Data Hub 是雲端服務,所以您不用自己解決儲存空間的問題,也不用擔心頻寬或穩定性,您可以在上面建立您的地圖資料,也可以上傳既有的地圖檔案,如 Shapefile 檔、GeoJSON 檔、甚至 CSV 檔(必須具有經緯度欄位)到 HERE Data Hub,結合 HERE Studio,您可以快速製作網路地圖,也可以用 API 的形式發布並且與您的網頁、應用程式相結合。

如果您有空間資料或地圖資料必須找空間存放並發布,甚至提供多人同時讀寫並即時更新,HERE Data Hub 絕對是最好的選擇,而且 HERE 也提供了有限的免費服務,您只要申請一個免費的 HERE 開發者帳號,就可以開始製作並發布您的地圖。

免費帳號限制:傳輸量每月不得大於 2.5GB,總資料儲存量不得大於 5GB 。

什麼是 HERE Studio?

HERE Studio 的主要功能在於用簡單快速的方式製作一個網路地圖。

  • 簡單:透過網頁界面,調整地圖的風格與樣式,您甚至不需要會寫程式,就可以快速製作出一個漂亮的地圖。
  • 快速:從登入到發布地圖,只需要幾分鐘的時間。
  • 即時:任何線上資料的修改,都會即時反應在地圖上。

HERE Data Hub/Studio 能做什麼?

2019年的年底,我幫路殺社製作了一個路殺地圖(官方報導中央社報導公視報導新頭殼報導),其中有四個圖層。

  1. 路殺社整理出的路殺熱點,總共有 116 個路段。
  2. 根據路殺熱點路段而算出的 icon 放置位置。
  3. 防止動物路殺而設立的改善設施,例如警告標誌等。
  4. 路殺社歷年統計的十六萬筆路殺歷史資料。

主要的工作流程大概是:

  1. 由於路殺社提供的道路資料,是起訖點的經緯度,因此就透過 HERE Routing API 來算出經過道路的形狀。
  2. 透過步驟 1 所算出的道路形狀,使用 QGIS 軟體算出路段中點,作為 icon 放置的位置。
  3. 防止動物路殺而設立的改善設施,主要是把原始資料簡化,不必要的欄位去除。
  4. 至於最大量的路殺歷史資料,首先就把資料清洗過,把不必要的欄位去除,並修改某些內容(例如隱藏特定物種的名稱)。
  5. 以上都進行完之後,就全部上傳到 HERE Data Hub ,並計算出六角網格熱度圖(Hexbin Map)。
  6. 設定好 Token 之後接著就是地圖前端的製作,第一版使用 HERE JavaScript API,第二版則改用 Leaflet JS 製作。

最後完成的地圖在此:https://aquawill.github.io/taiwan_roadkill_map/

事前準備

申請 HERE 開發者帳號

如果您已有 HERE 開發者帳號,可略過此段。

首先請開啟 HERE 開發者網站:https://developer.here.com/ ,並按下畫面中央的「Get started for free」或右上角的「Sign up」來申請帳號。

在申請表中,請填入姓名、email、密碼,選取國家或地區名稱並依照圖片輸入安全碼,按下最下方的「Register for a HERE account」。

接著,您可以選擇輸入公司名稱或電話號碼(也可留空),但一定要勾選「I Agree to the Terms and Conditions」,並按下下方的「Start Coding」。

另外,也別忘了到信箱裡面收取確認信(主旨為「Welcome to HERE」),並且按下信件中的Confirm your email來完成整個手續。

如果您看到如下圖這樣的頁面,代表帳號申請成功,日後只要用這個帳號就可以進到此頁面來管理您的 HERE API/SDK 相關設定。

HERE Data Hub/Studio 初體驗

首先,請開啟HERE Studio:https://studio.here.com/ ,輸入您剛剛申請的 email 與密碼之後,按下「Sign in」。

接著輸入您的出生年月日之後按下「Continue」。

等待幾秒鐘之後就會進到 HERE Studio,並且會有簡單的導覽說明,可以按下畫面中的箭頭來看導覽,也可以按下「Skip」跳過。

雖然畫面中其實已經可以建立專案了,但目前我們並沒有上傳任何的地圖資料,因此我們必須先在這裡暫停一下。

下載地圖 Open Data

首先,請開啟此網頁:https://scidm.nchc.org.tw/dataset/nhi-maskdata

這是國網中心的開放資料平台,我們要取得的是「健保特約機構口罩剩餘數量明細清單(含地理加值)(10mis/update)」這個資料集。依照上面的說明,這個資料集是每十分鐘動態更新一次,資料集的內容為健保特約機構(通常是藥局)的口罩剩餘數量,格式為 csv 。

上面有兩個 csv 檔,第一個是沒有經緯度的,第二個是有經緯度的。雖然從地址查詢經緯度也不是難事(HERE 也提供了批次大量地址轉換成經緯度的 API),但我們在這裡還是使用有經緯度的比較省事一點。請選擇第二筆資料(檔名中有 geo)的,按下右邊的「探索」,之後按「下載」。

檔案下載完之後,我們就先開啟來看一下內容是什麼。您可以使用 OpenOffice Calc,或是 Notepad++/Visual Studio Code/Sublime 來開啟。反而不建議用 Excel,因為編碼的關係(此檔案使用 UTF-8 編碼),可能開起來會是亂碼。

以OpenOffice Calc為例,開啟檔案前請先確認正確的編碼(此檔案使用 UTF-8 編碼)以及使用逗號分隔。

檔案開啟之後,我們可以觀察到這個資料集為一個典型的具有欄位的表格,並有以下欄位:

  • 醫事機構代碼
  • 醫事機構名稱
  • 醫事機構地址
  • address_clean
  • latitude
  • longitude
  • 醫事機構電話
  • 成人口罩剩餘數
  • 兒童口罩剩餘數
  • 來源資料時間

其中 latitude 為緯度,longitude 為經度,這兩個欄位剛好是我們需要的,也是把資料繪製在地圖上必備的。這邊要注意的是,如果要把 csv 檔案上傳到 HERE Data Hub 一定要有經緯度,經緯度可接受的欄位名稱是:

緯度:

  • y, ycoord, ycoordinate, coordy, coordinatey, latitude, lat

經度:

  • x, xcoord, xcoordinate, coordx, coordinatex, longitude, lon, lng, long, longitud

資料集內容(特別是最重要的經緯度欄位)確認無誤後,我們就可以準備把這個資料集上傳到 HERE Data Hub。

五分鐘內製作第一份 HERE Studio 地圖

上傳地圖資料集

我們回到剛剛 HERE Studio 的頁面,請選擇 Create new project。按下去之後就會進到一個空白地圖頁面。

您可以輸入專案名稱與說明,並且按下「+Data」的按鈕。

因為目前您沒有任何的地圖資料,因此他直接要求您上傳一個新的。您可以把剛剛下載的「scidm-maskdata_geo.csv」直接拖進去,或是按下「Browse files」找到這個檔案並開啟。

開啟檔案之後就會開始上傳,畫面也會顯示進度。

等上傳完之後,按下右下角的「Add 1 dataset」。

等待一兩秒之後,剛剛上傳的資料集就會顯示在地圖上。

接著我們先來設定底圖的樣式。我們可以看到這個專案除了一個圖層「Scidm-maskdata_geo」之外,還有一個「Base Map」,這就是底圖的設定。我們可以選擇不同風格的底圖,甚至還有衛星影像可以使用。

自訂地圖顯示風格

接著,請按下我們剛剛加入的資料集「Scidm-maskdata_geo」,這邊就會進到樣式設定的頁面,按下「Points」,會出現「Default point style」,點下去之後就會出現樣式設定的選項。

以這樣的點狀地圖來說,我們可以使用形狀(圓形或方形),圖示(Studio 內建的)以及文字標籤,這三者可以並存,也可以單獨存在。

按下顏色框之後會出現顏色選擇器,可以選擇顏色以及透明度,您也可以直接在下方的文字框輸入 Hex 或 RGBA 色碼,您也可以在地圖上即時看到變化。

下方的 Hexbin 是付費功能,因此無法使用,不過沒關係,因為我們之後可以用別的方式產生。

調整完圖案的樣式之後,我們可以按下 Points 旁邊的小箭頭把選項隱藏起來。

接著我們來調整按下圖示之後會跳出的卡片。您可以看到這邊會把全部欄位名稱都列出來,請用滑鼠把要顯示的欄位按住往上拖曳,到上方放開。不要顯示的部分就拖到下面放開,您也可以用拖曳的方式調整顯示順序。在調整的過程中,您也可以點選地圖上面的圖示來看看顯示的方式是否是您需要的。按下左上角的「Back」,可以返回設定頁。

可以看到原本顯示的是「Address_clean」、「Color」,我們這邊改成「醫事機構名稱」、「醫事機構地址」、「醫事機構電話」、「成人口罩剩餘數」、「兒童口罩剩餘數」、「來源資料時間」。

卡片內容確認無誤後,我們可以加入版權宣告(Attribution),如果您的資料集是需要版權宣告的,請務必加上。

發布地圖

大功告成,最後按下「Publish」旁邊的開關,就可以把地圖發布出去了。按下「View Map」來看看成果如何。

新的地圖開啟,這個地圖以及網址就可以用來分享在社群軟體上,或是傳送給其他人來進行瀏覽。不過左上角的圖例區似乎有點礙眼,我們來試試看隱藏起來。

回到地圖編輯頁面,按下「Continue Editing」。

接著按下「Publish」旁邊的齒輪按鈕,會開啟選項頁。

然後把 Legends 旁的選取框取消。在這邊您也可以修改地圖的標題與說明。

回到地圖頁面,發現圖例已經不見了,畫面變得簡潔許多。

開啟左上角的「SHOW INFORMATION ON HOVER」,就會在游標劃過圖示的時候顯示卡片。

以上就發布了一個自製的口罩地圖,如果操作步驟熟練的話,不用五分鐘就完成了。非常的方便快速。右上角的輸入框也可以用來查詢地點,並將地圖移動到該地點。

成果總結

從以上的操作步驟來看,我們可以給一些總結:

HERE Data Hub 使用網頁上傳的方式非常的方便,而且跟 Studio 整合,可以快速的把地圖加入專案中,且地圖的樣式自訂很方便,但是缺點是自訂的選項稍嫌陽春了點,不僅沒辦法選擇上傳自己喜歡的圖示,也沒辦法作到比較多的變化,例如不同的比例尺顯示不同的資料等等。

HERE Studio 的優點就在於不需要懂任何的程式設計,就可以快速的把地圖資料發布在網路上;而 HERE Data Hub 提供的是一個快速簡便的儲存空間,您等於是把您的地圖資料託管在 Data Hub 上面,然後透過 Studio 快速產生一個可用的地圖,要克服這些缺點當然是可能的,不過這就必須要透過一些程式開發的方式才能作到,我們之後也會提到這個部份。

另外,我們在這個專案中使用的資料集是每十分鐘更新一次,但在目前這個專案中,因為我們只下載了一次,所以目前這個網路地圖是靜態的。這點其實也是有辦法改進的,因為 HERE Data Hub 提供了 CLI (Command Line Interface / 命令列介面)以及 Restful API 的存取方式,因此您可以設計一個小程式定時的去下載最新的資料集,然後透過 CLI 或 Restful API 的方式去修改或取代 Data Hub 儲存的資料,用這樣的方式就可以做出一個動態更新的地圖。

我們接下來就會介紹 HERE CLI 與 Data Hub API。

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

快速建構地圖服務(一) - 認識 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) }}
直播中

尚未有邦友留言

立即登入留言