iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0

我們在上一篇了解到folium在網頁中設定了那些js以及css的設定,這一篇就要來了解一下他如何運用leaflet建立我們設定的地圖。

回顧一下我們在myMap.py中建立的程式碼:

import folium
myMap = folium.Map([22.73444963475145, 120.28458595275877], zoom_start=14)
myMap.save('myMap.html')

很簡單的3行結束,就讓我們來看看,folium將這三行轉換為leaflet的程式碼長甚麼樣子吧!

folium 在html網頁body外面再繼續寫script,將leaflet的程式碼包起來。

<script>    
    var bounds = null;

    var map_929b734e59b44831afa47e8cdeabd045 = L.map(
        'map_929b734e59b44831afa47e8cdeabd045', {
        center: [22.73444963475145, 120.28458595275877],
        zoom: 14,
        maxBounds: bounds,
        layers: [],
        worldCopyJump: false,
        crs: L.CRS.EPSG3857,
        zoomControl: true,
        });
    
    var tile_layer_9c22f07c9d404cd99b4b0ee791438bd8 = L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
        "attribution": null,
        "detectRetina": false,
        "maxNativeZoom": 18,
        "maxZoom": 18,
        "minZoom": 0,
        "noWrap": false,
        "subdomains": "abc"
}).addTo(map_929b734e59b44831afa47e8cdeabd045);
</script>

我將程式碼分成三個部分逐一說明如下:

Bounds

var bounds = null;

第一個部分只有設定bounds = null這個在後面的程式碼會用bounds的變數。

Map

var map_929b734e59b44831afa47e8cdeabd045 = L.map(
    'map_929b734e59b44831afa47e8cdeabd045', {
    center: [22.73444963475145, 120.28458595275877],
    zoom: 14,
    maxBounds: bounds,
    layers: [],
    worldCopyJump: false,
    crs: L.CRS.EPSG3857,
    zoomControl: true,
    }
);

在這個部分,folium建立了上一篇提到的map_929b734e59b44831afa47e8cdeabd045變數,並指定建立map物件。在L.map中有兩個參數,第一個為'map_929b734e59b44831afa47e8cdeabd045',這裡的文字代表的是body中div的id名稱,我在下面順便再放一次,因此若網頁中有div的id為這個字串的話,就會套用leaflet地圖。

<div class="folium-map" id="map_929b734e59b44831afa47e8cdeabd045" ></div>

第二個參數則是由{ }包起來的dictionary。裡面的key與value可以參考Leaflet_Map官方說明。這邊簡易說明一下:

center

這邊放的是地圖一開始讀取時的中心座標位置,屬於LatLng格式,相關說明可參考Leaflet_LatLng10. Leaflet_Basic Types的說明。

可以看到中心座標為[22.73444963475145, 120.28458595275877],與前面提到python程式碼中指定的座標一樣。

myMap = folium.Map([22.73444963475145, 120.28458595275877], zoom_start=14)

zoom

指定地圖zoom等級為14,與上方程式碼設定的參數相同。

maxBounds

相關說明可參考Leaflet_maxBounds,maxBounds預設為null。假設有設定maxBounds,地圖將會固定在設定的邊界,無法放地縮小,且不能移到其他地方,任何移動都會有彈回來的動畫。

layers

在layers中,可以利用陣列 [ ]將要加進地圖中的圖層加進來,因為此次並沒有加入任何圖層,只有建立地一個基本的地圖而已,所以在這個地方會是空的陣列。

worldCopyJump

參考Leaflet_worldCopyJump的說明,意思應該是當worldCopyJump的值為true時,leaflet會追蹤你平移到另一個複製地圖的位置,無接縫地跳回原本的地圖,所以就等於在原本的地圖上平移畫面。

crs

設定此地圖的座標系統,在14. Leaflet_Basic Classes中有提到crs,這邊設定的座標系統為EPSG3857,也就是Google Map以及地圖圖磚、WMTS常用的座標系統,為Spherical Mercator。

zoomControl

zoomControl設定為true代表地圖上會顯示放大縮小的按鈕,可參考11. Leaflet_Controls的zoomControl說明。

tileLayer

var tile_layer_9c22f07c9d404cd99b4b0ee791438bd8 = L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        "attribution": null,
        "detectRetina": false,
        "maxNativeZoom": 18,
        "maxZoom": 18,
        "minZoom": 0,
        "noWrap": false,
        "subdomains": "abc"
}).addTo(map_929b734e59b44831afa47e8cdeabd045);

終於講到最後一個部分了,最後這個部分建立的一個OSM的底圖,並將它加到前面建立的map中。
建立tileLayer的第一個參數為圖磚的網址,包含s, x, y ,z三個參數,以便系統根據地圖的座標位置顯示對應的底圖圖片,相關資料可參考06. Leaflet_Raster Layers的說明。

folium在tileLayer預設的設定為:

  • attribution:版權文字說明為空值
  • detectRetina:沒有設定Retina
  • maxNativeZoom:可參考Leaflet_tilelayer-maxnativezoom,目的為設定tileLayer圖磚的縮放等級。假設maxNativeZoom的值為14,且maxZoom為18,當縮放等級變成16時,地圖中顯示的圖片只會用zoom等級為14的tileLayer圖磚,而不會用zoom等級為16的圖磚顯示。
  • maxZoom:tileLayer顯示的最大zoom等級
  • minZoom:tileLayer顯示的最小zoom等級
  • noWrap:設定地圖是否連續顯示。
    • noWrap:true
      noWrap_true
    • noWrap:false
      noWrap_false
  • subdomains:用於tileLayer的{s}字元

最後就是將tileLayer加入到上面建立的地圖中囉!!

經過這樣的說明,各位是否有比較了解folium在做什麼了呢~~?

明天又要來看一下folium官方網站的介紹囉~~


上一篇
17. Folium_看看他做了什麼好事?!(上)
下一篇
19. Folium_GlobalSwitches
系列文
使用Leaflet及Folium開啟網頁地圖大門30

尚未有邦友留言

立即登入留言