iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0
Modern Web

使用Leaflet及Folium開啟網頁地圖大門系列 第 25

25. Folium_QuickStart

前面幾篇稍微介紹了folim的功能,這一篇終於要講一些比較實用的東西了!

這邊的介紹會以前面比較沒有提到的部分做說明,如果發現比網站內容少的話不要罵我喔!

網頁顯示的畫面跟jupyter notebook很像,在旁邊也有顯示執行的順序In [1],因此下面說明時會一併提供編號,讓各位知道我現在說的地方是哪裡:

Map

首先看第1-4 ,屬於基本的地圖建立參考:

  1. 匯入folium套件,並建立以 [45.5236, -122.6750]為中心的地圖,命名地圖為 m
  2. 顯示地圖
  3. 將地圖存成html檔
  4. 建立Stamen Toner的底圖

Marker

接下來提供一些marker使用參考,編號5建立Stamen Terrain的地圖,並建立兩個點,分別設定popup,並使用'Click me!'的tooltip,所以當滑鼠移動到marker上面時,會出現'Click me!'的對話框,提醒使用者可以按下左鍵,而按下後,則會顯示設定的popup資訊。

編號6則提供marker可設定顏色的參考,這邊的Icon就是利用Leaflet.awesome-markers建立的,讓你可以設定更豐富的icon。

編號7提供circle及circleMarker的圖層建立方式,可以看到兩者的差異,像是半徑的部分,Circle設定100(公尺),為紅色的部分;CircleMarker設定50(pixel),但兩者的差異很大。

編號8就是我在23. Folium_Extra Features(上)中的LatLngPopup使用參考。

編號9則是23. Folium_Extra Features(上)的ClickForMarker的用法,在out[9]的地圖中點任何一個點,就會建立新的marker,並設定Waypoint的popup。

編號10及11是一起的,10使用os讀取json,並在11裡面使用Vega顯示圖表

GeoJSON/TopoJSON Overlays

這邊主要介紹如何使用GeoJSON及TopoJSON製作圖層。
在官網使用的資料可參考folium/examples/data at master · python-visualization/folium · GitHub的文件,對照quick start使用的檔案名稱就可以找到我們要的資料了!

這邊直接看topoJSON,僅擷取topoJSON的程式碼如下:

antarctic_ice_shelf_topo = os.path.join(
    'data',
    'antarctic_ice_shelf_topo.json'
)

folium.TopoJson(
    open(antarctic_ice_shelf_topo),
    'objects.antarctic_ice_shelf',
    name='topojson'
).add_to(m)

讀取的檔案名稱為 antarctic_ice_shelf_topo.json,並使用 objects.antarctic_ice_shelf的object.path。讓我們先來看一下這個檔案實際上找什麼樣子吧!

{
    "type":"Topology",
    "transform":{
        "scale":
            [0.036003599298640235,0.0020699335558555815],
        "translate":[-179.99998938710374,-85.22210242610454]},
        "objects":{
            "antarctic_ice_shelf":{
                "type":"GeometryCollection",
                "geometries":[{"type":"Polygon","arcs":[[0],[1],[2],[3],[4],[5],[6],[7],[8]]},{"type":"Polygon","arcs":[[9]]},{"type":"Polygon","arcs":[[10]]},{"type":"Polygon","arcs":[[11]]},{"type":"Polygon","arcs":[[12]]},{"type":"Polygon","arcs":[[13]]}
                ...

所以推測object.path屬於topoJSON裡面,transform底下開始尋找的路徑。

Choropleth maps

Choropleth maps提供屬性資料表與geoJSON或topoJSON圖層整合的功能,來看一下編號13。

import pandas as pd

state_geo = os.path.join('data', 'us-states.json')

state_unemployment = os.path.join('data', 'US_Unemployment_Oct2012.csv')
state_data = pd.read_csv(state_unemployment)

m = folium.Map(location=[48, -102], zoom_start=3)

folium.Choropleth(
    geo_data=state_geo,
    name='choropleth',
    data=state_data,
    columns=['State', 'Unemployment'],
    key_on='feature.id',
    fill_color='YlGn',
    fill_opacity=0.7,
    line_opacity=0.2,
    legend_name='Unemployment Rate (%)'
).add_to(m)

folium.LayerControl().add_to(m)

m

這裏建立了一個pandas的state_unemployment的dataFrame,使用Choropleth讀取us-states的geoJSON檔,同時匯入state_unemployment作為 us-states的屬性資料。 columns為設定pandas讀取的屬性資料,要顯示的圖層,第一個欄位須與圖層Join的欄位,在這邊設定的欄位是State。而圖層Join的欄位則是設定在feature.id,設定完之後,Choropleth就會將兩個資料join起來!!

Styling function

Styling function讓你可以自訂function來建立你需要的設定,像編號15的做法就是先建立一個funciton,裡面設定一些常用的格式,如此一來,當你要建立好幾個相同的圖層,就可以直接叫出這個function,讓程式碼看起來比較簡便以外,維護上面也比較方便。

Quick start講得差不多了,今天就講到這邊囉~~
明天就開始來看實例吧!!
有任何問題的話,歡迎在下面留言喔~


上一篇
24. Folium_Extra Features(下)
下一篇
26. Leaflet_建立高雄市區界地圖
系列文
使用Leaflet及Folium開啟網頁地圖大門30

尚未有邦友留言

立即登入留言