iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0

folium官網提供的Raster Layer包含:

  • ImageOverlay
  • TileLayer
  • VideoOverlay
  • WmsTileLayer

命名與leaflet差不多,除了TileLayer.WMS在folium命名為WmsTileLayer

ImageOverlay

Leaflet_ImageOverlay

我們來回顧一下在leaflet時使用的程式碼:

var imageUrl = 'https://opendata.cwb.gov.tw/fileapi/opendata/MSC/O-B0028-003.jpg',
    imageBounds = [[18.600625745, 115.976888855], [27.79937425, 126.02300114]];
imageUrlLayer = L.imageOverlay(imageUrl, imageBounds, {
    opacity:0.4
}).addTo(myMap);

Folium_ImageOverlay

其實在folium裡面,imageOverlay的用法差不多,只是寫法要稍微留意一下:

imageUrl = 'https://opendata.cwb.gov.tw/fileapi/opendata/MSC/O-B0028-003.jpg'
imageBounds = [
    [18.600625745, 115.976888855],
    [27.79937425, 126.02300114]
];
folium.raster_layers.ImageOverlay(
    imageUrl,
    imageBounds,
    opacity = 0.4
).add_to(myMap)
myMap

這邊與leaflet都設定一樣的參數,因此透明度也同樣設定0.4,讓圖片跟地圖重和,同時讀取兩邊的資訊。但奇怪的是,imageOverlay在呼叫時無法直接用folilum.ImageOverlay建立,需輸入完整的folium.raster_layers.ImageOverlay()才能使用。
folium_ImageOverlay

TileLayer

Leaflet_tileLayer

在leaflet中,透過下列方式建立tileLayer:

L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
        maxZoom: 14,
        attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
}).addTo(map);

Folium_TileLayer

在folium的tileLayer提供以下tiles參數,可選擇以下字串直接讀取tileLayers,部分在輸入時需要加上api key才能使用:

  • "OpenStreetMap"
  • "Stamen Terrain", "Stamen Toner", "Stamen Watercolor"
  • "CartoDB positron", "CartoDB dark_matter"
  • "Mapbox Bright", "Mapbox Control Room" (Limited zoom)
  • "Cloudmade" (Must pass API key)
  • "Mapbox" (Must pass API key)

也可以輸入自訂的url建立tileLayer,可參考Leaflet Provider Demo網站,以下為使用上述網站中的OpenStreetMap.HOT建立tileLayer:

myMap = folium.Map([22.73444963475145, 120.28458595275877], zoom_start=6)
folium.raster_layers.TileLayer(
    tiles = "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",                 
    attr = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
).add_to(myMap)
myMap

要注意的是,folium有規定使用自訂的url,需要同時建立attribution才可使用,不然會報錯!!

folium_TileLayer

VideoOverlay

Leaflet_videoOverlay

回顧一下如何使用leaflet建立videoOverlay

var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
    videoBounds = [[ 32, -130], [ 13, -100]];
L.videoOverlay(videoUrl, videoBounds).addTo(myMap);
myMap.fitBounds(videoBounds);

Folium_VideoOverlay

調整一下程式碼,使用folium.raster_layers.VideoOverlay()建立

videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm'
videoBounds = [[ 32, -130], [ 13, -100]]
folium.raster_layers.VideoOverlay(
    videoUrl,
    videoBounds
).add_to(myMap)
myMap.fit_bounds(videoBounds)
myMap

folium_VideoOverlay

WmsTileLayer

Leaflet_TileLayer.WMS

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
    layers: 'nexrad-n0r-900913',
    format: 'image/png',
    transparent: true,
    attribution: "Weather data © 2012 IEM Nexrad"
}).addTo(myMap);

Folium_WmsTileLayer

改用folium試試看,注意這邊是用WmsTileLayer而不是tileLayer.wms:

folium.WmsTileLayer("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
    layers= 'nexrad-n0r-900913',
    format= 'image/png',
    transparent= True,
    attribution= "Weather data © 2012 IEM Nexrad"
).add_to(myMap)
myMap

Folium_WmsTileLayer

Folium的Raster Layers就介紹到這邊,下一篇將繼續介紹Extra Features。還是那一句話,如果有任何問題,歡迎在下面留言喔~~剩下最後8天了!!


上一篇
21. Folium_Vector Layers
下一篇
23. Folium_Extra Features(上)
系列文
使用Leaflet及Folium開啟網頁地圖大門30

尚未有邦友留言

立即登入留言