Cover

想自製地理區塊範圍做視覺化,但現有的製圖軟體 QGIS、ArcGIS 等又好複雜!地圖視覺化總是讓人煩惱,有沒有比較好用的工具呢?有! geojson.io 直接讓我們在線上製圖,即刻產生 geojson 檔,連下載軟體都省了!

面量圖 ( Choropleth ) 是一種很常見的視覺化手法,它將地理範圍分成許多塊,再分別以各種顏色為每一個區塊上色來呈現數據。下圖是一個台灣鄉鎮區塊面量圖範例,以灰階著色,數值為隨機產生:

choropleth

我想大家在看這些圖的時候一定會有些疑問:這些範圍是怎麼畫出來的?顏色是怎麼對應的?我要怎麼呈現?先前我們的文章「視覺化實戰 - D3.js 地理區塊視覺化」已經解釋了一部份疑惑,文中提到我們可以將來自政府的地理邊界資料利用 D3.js 在網頁上呈現,不過我們還不知道,如果今天我們想要調整這個範圍,該怎麼做比較好呢?舉幾個可能的實用例子:

  • 想要標示燒毀古蹟的面積與位置
  • 想要標示任何政黨黨產的分布範圍
  • 想要標示具容積獎勵的建案其開放空間的範圍
  • 當我們手上有的圖檔較舊,而已知邊界有發生過調整

很顯然,我們需要的是地圖編輯的功能。一直以來都有不少軟體提供地圖編輯的功能,然而往往不是很容易使用,要嘛介面設計有缺陷、要嘛過於專業、或者是訂價格讓業餘玩家難以下手。很幸運的,專業的線上地圖服務 Mapbox 在 2013 年發布了一個新的網路服務「geojson.io」,標榜著「Simple、Fast Map Data Editing」,讓我們不光是下載軟體,連登入都不需要便可以直接製作地理區塊檔。

基本編輯

連接至 geojson.io 網站後我們立刻會看到類似下方的編輯畫面:

Editor Screen

可以看到畫面很清楚的分成兩半,左邊是地圖編輯區,右邊是對應的 Geojson 碼。要在地圖上畫任何的區塊,只要點擊上圖紅色箭頭處所指的幾個按鈕,便可以繪製包含單點、線條、多邊形等幾何區塊;一但完成繪製,區塊對應的 Geojson 會即刻產生在右方面板上,如藍色箭頭的位置。

編輯也相當簡單,就如常見的繪圖軟體一般,下圖為描繪臺大範圍的結果,黑色部份為完成的多邊形,粉紅色則為正在編輯的部份:

editing

點擊個別區塊我們可以調整基本樣式,或是為區塊加上數值。下圖的台大區塊已被調整為綠色,同時還加上了「test」屬性,值為 123:

Popup over Polygon

不過,若要為區塊鍵入對應數值,更好的方式是透過右方面板的「Table」頁籤來編輯;上圖的右方面板呈現的即是 Table 頁籤,我們可以看到他將地理區塊的參數視為一個表格,每一列 ( row ) 對應到一個區塊,而每一行 ( column ) 則對應到一個屬性。一次將多邊形繪制完成後,便可以在 Table 頁籤快速的鍵入各個屬性。

資料存取

當我們編輯完成後想保留檔案,除了自己手動將右方的 geojson 碼複製下來之外,也可以將滑鼠移至畫面左上方的「Save」按鈕,在這裡 geojson 提供我們不同格式的資料下載,包含 Geojson 、 Topojson 、 SHP 、 KML 、 CSV、 WKT 等檔案格式。

有趣的是, geojson.io 甚至直接與 Github 做結合,我們可以將檔案直接存至 Github 的匿名 Gist 中:

Geojson in Gist

上圖即為我們將台大區塊儲存至 Github Gist 的結果, Github 也提供線上即時預覽 Geojson 的功能,所以我們可以即時看到地圖的結果。你若對這個結果有興趣,可以點擊這裡來瀏覽。然而,匿名 Gist 產生以後,並沒有辦法再進行編輯,如果我們需要未來繼續編輯的話,可以點擊右上方的「login」按鈕將 geojson.io 與我們的 Github 帳號做連結,便可以利用我們個人的 Github 帳號來管理地圖檔囉!

結語

直接在線上編輯地理區塊是相當方便的功能,尤其是 geojson.io 還提供各種不同格式的檔案匯出與線上儲存功能,可說是非常實用。不過,geojson.io 還是有些缺點,我在這邊簡單的列一些出來:

  • 無法編輯複合區塊,比方說將多個多邊形視為同一組區塊
  • 編輯功能可以再更強,例如繪圖軟體的手繪模式
  • 若需呈現 geojson 檔仍需使用其它工具,geojson.io 本身的分享功能並不提供樣式呈現。

事實上,一旦我們製作好 geojson 檔,我們便可以將之匯入到 MapBox 中來調整細部樣式, Mapbox 提供 iOS 、 Android 、 Web 版本的 JavaScript API 讓我們可以在不同裝置上應用我們製作的 geojson 檔,有興趣的朋友可以試試看。


Written by infographics.tw

1 Comment

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *