iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2
Modern Web

30天打造我的WebGIS系列 第 5

[Day 5] 資料視覺化工具-CARTO part2

  • 分享至 

  • xImage
  •  

上一篇[Day4] 資料視覺化工具-CARTO part1中,我們已經將opendata景點資訊上傳至CARTO,做過必要的編輯後,產生了一張基本的主題圖,今天我們要帶大家一起為主題圖進行美化及製作篩選工具,最後將主題圖發佈出去。

地圖美化及互動

在主題圖編輯介面中共有5個頁籤:

  • DATA
    此部分主要提供各種工具(widget),作為使用者觀看主題圖時能夠針對興趣的項目進行篩選。
    CARTO會解析資料的各個欄位,依據資料特性,產生不同篩選工具。

https://ithelp.ithome.com.tw/upload/images/20171222/20107816DagfDP5aDA.jpg
如果想要把這個欄位設定為將來主題圖篩選條件,便可按下Add將該工具加入,加入後便可再進入Edit對該工具做進一步的設定:
* Type
選擇該工具的類型,包括CATAGORY、FORMULA、HISTOGRAM、TIME SERIES等,當預設的工具類型不符合需求時,可在這裡更換。在此以停車資訊欄位為例,該資料的停車資訊可分為路邊停車、附停車格、市區停車、與其他,因此使用CATAGORY分類。
* Data
此區塊所設定的是資料的呈現與計算條件,並且可以加上前綴詞與後綴詞(如單位)。
https://ithelp.ithome.com.tw/upload/images/20171222/20107816t8x3LfoO7f.jpg

  • ANALYSIS
    分析工具提供各類空間分析功能,前一篇的Georeference其實就是其中一項功能。
    現在我們來加上其他空間分析,點擊ADD NEW ANALYSIS,此處便列出CARTO所提供之分析項。
    假設我們希望得到的是在各行政區中,所有旅遊景點的幾何中心,便可用Find Centroid of Geometries(形心)工具來產生。
    選擇後點擊ADD ANALYSIS將此分析加入地圖中。
    https://ithelp.ithome.com.tw/upload/images/20171222/20107816tdRiSw6c7L.jpg

現在可以看到,在ANALYSIS中,除了原本的Geogreference以外,還多了一個Centroid分析串聯在一起,我們對原始資料所做過的任何處理都包含在此分析流中。
https://ithelp.ithome.com.tw/upload/images/20171222/20107816ZMayUhLQ94.jpg

  • STYLE
    切換到BY VALUE頁籤,便能依據任意欄位更換顯示樣式。點的樣式、顏色、大小、透明度及標籤都在此調整。

  • POP-UP
    CLICKHOVER兩類
    設定時,可依據infowindow想要的欄位,上下拖曳更換順序,例如在此設定顯示順序為:。
    https://ithelp.ithome.com.tw/upload/images/20171223/20107816QonoEIWmND.jpg

  • LEGEND
    此部分為圖例,當一張主題圖含有多種分類資訊或多圖層時,圖例是很重要的,大家視需要將其加入吧!

以下是我們利用台中市旅遊景點所製作的地圖。能夠讓使用者點選查看相關資訊,並具備依據區域篩選依據停車資訊篩選依據門票資訊篩選等功能。
並且在左側,現在可以看到有2個圖層了:

  1. 各區旅遊景點中心點 (經過Georeference > Centriod 兩次處理)
  2. 台中市旅遊景點 (經過Georeference 一次處理)

這兩個圖層來自同一筆資料,也就是說每產製一次空間分析結果,就會產生一個新的圖層。如此我們可以將不同圖層套疊在一起。
https://ithelp.ithome.com.tw/upload/images/20171223/20107816WS8bnES6RP.jpg

加入其他資料

同一個地圖中,當然還能再加入其他資料一同呈現。
我們依據前一天[Day4] 資料視覺化工具-CARTO part1的分享中,再加入臺中市星級飯店資料如下:
https://ithelp.ithome.com.tw/upload/images/20171223/20107816h6Q5JUr86c.jpg
進一步,我們能夠再對飯店資料使用其他ANALYSIS工具,這邊所用到的是
https://ithelp.ithome.com.tw/upload/images/20171223/20107816xKDuLSuMFy.jpg

  1. Create areas of influence
    創造飯店周邊500公尺範圍
  2. Intersect second layer
    計算各飯店500公尺範圍內所涵蓋的景點數量

計算結果如下,能夠得出範圍與其涵蓋景點數量,並將其條件也加入到WIDGETS中,讓使用者篩選:
https://ithelp.ithome.com.tw/upload/images/20171223/20107816itapNf19rg.jpg

分享主題圖-PUBLISH

設定完成後,可點選back回到卡片。
點選下方PUBLISH,點選DONE
https://ithelp.ithome.com.tw/upload/images/20171223/20107816JaXV67UHIh.jpg

可點選觀看本次製作的主題圖

如此我們就完成了一個主題圖,能夠提供使用者篩選資訊,情境例如:
"我想要找周邊500公尺涵蓋了15個以上的台中市中區的免費景點,並且星級在3-4星的飯店"

整體概念整理

最後再整理一次本日製圖的架構:
https://ithelp.ithome.com.tw/upload/images/20171223/201078163G6XoKRPnY.jpg

本次的分享所使用的2份資料格式雖然都是.xlsx,但webGIS的世界中,無論是撰寫程式或是使用線上工具來製圖,瞭解格式並處理各種資料的能力是不可或缺的。
下一次的主題,將會深入探討現在webGIS中常見的資料轉換(data conversion)議題。


上一篇
[Day 4] 資料視覺化工具-CARTO part1
下一篇
[Day 6] 常見的GIS資料格式
系列文
30天打造我的WebGIS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言