iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0

在Leaflet及Folium均熟悉並嘗試建立一些地圖的實例時,會發現其實Folium在很多地方尚未成熟,像是在popup的部分,目前還無法在geoJSON上實現。

Leaflet

在Leaflet中,要使用popup就方便許多,因為他屬於Layer的method,因此可輕易建立,這部分在第26天已經有提到:

fetch("/jsons/taiwanDistrictRange.json")
    .then(response => response.json())
    .then(json => {
    kaoDist = L.geoJSON(json).bindPopup(function (layer) {
        return layer.feature.properties.T_Name;
    }).addTo(map);
    map.fitBounds(kaoDist.getBounds());
});

Folium

那Folium目前的狀況要如何解呢?
或許有其他更好的方法,但我現在想到的只有兩個:

  • GeoJSONTooltip
  • Polygon

第一個方法是用GeoJSON的tooltip參數建立GeoJSONToolTip,如此一來可以在滑鼠移到任意里界時,就顯示該里的資訊。但是缺點就是格式無法自定,而且滑鼠不能移走,不然資訊會跳掉。

第二個方法則是用Polygon。因為Polygon本身有提供popup的參數,因此需要解析GeoJSON檔案中每一個資料,個別建立polygon。若要統一管理,可建立FeatureGroup納入所有圖層。

GoeJSONTooltip

import folium

myMap = folium.Map([22.73444963475145, 120.28458595275877], zoom_start=14)
# 建立tooltip,並設定要顯示的欄位,可自訂欄位名稱
villTooltip = folium.GeoJsonTooltip(['TV_FALL', 'AREA'], ['名稱', '面積'])
kaoVillage = folium.GeoJson('../../dist/mapdata/KaoVillageRange.json', tooltip = villTooltip).add_to(myMap)
myMap.fit_bounds(kaoVillage.get_bounds())
myMap.save('Folium_KaoVill.html')

此時將滑鼠移到里界的範圍中,就會顯示該里的名稱及資訊了。

folium_KaoVillGeoJsonTooltip

Polygon

使用polygon這個方法故然可行,但是因為polygon讀取座標的順序剛好跟geojson格式的順序相反,因此若直接使用,無法順利畫出我們要的圖層,可參考lon lat lon lat lon - macwright.org,目前正在嘗試建立轉換的方法,或許可以再下一篇文章分享。

剩下最後兩天!!


上一篇
27. Folium_建立高雄市里界地圖
下一篇
29. Folium_將geojson以polygon建立包含popup的圖層
系列文
使用Leaflet及Folium開啟網頁地圖大門30

尚未有邦友留言

立即登入留言