在Leaflet中,Other Layers包含:
我們可以利用layerGroup管理多個圖層,將要管理的圖層加到layerGroup裡面來,就等於是操作layerGroup這一個圖層。我們來看一下範例:
L.layerGroup([marker1, marker2])
.addLayer(polyline)
.addTo(map);
第1行就是建立layerGroup的程式碼,可以看到( )
裡面用陣列包起來,陣列裡面有marker1與marker2兩個點。
第2行實現layetGroup其中一個Method:addLayer()
,這一行表示將polyline
這個圖層也加入到第1行的layerGroup中。
第三行則是將layerGroup加到地圖中,因此現在地圖上會有3個圖層(marker1
, marker2
, marker3
)
FeatureGroup從LayerGroup擴展過來的,據官網的說法是,他比layerGroup更容易對group中的圖層做同樣的事情,例如加popup或是設定按鈕事件等等。
目前還不清楚layerGroup與featureGroup之間的差別,但參考別人的範例或是一些課程的影片,似乎都用featureGroup操作。來看一下範例:
L.featureGroup([marker1, marker2, polyline])
.bindPopup('Hello world!')
.on('click', function() { alert('Clicked on a member of the group!'); })
.addTo(map);
跟layerGroupu一樣,第1行是建立featureGroup,並加入marker1
、marker2
、polyline
這三個圖層。
第2行在每個圖層建立popup,內容為 'Hello world!'
第3行設定click事件,當按下後跳出alert小視窗,內容為 'Clicked on a member of the group!'
第4行將設定好的featureGroup加入地圖中。
這個我覺得很好用,因為只要提供的geoJSON資料沒有錯誤,他就會自動幫你讀取內容並轉成圖層。假設有個geoJSON的資料,命名為geoData,這時只要簡單的使用一行程式碼就可以建立圖層:
L.geoJSON(data).addTo(map);
是不是既快速又方便!!!
而且如果geoJSON裡面已經有包含一些資訊像是名稱、地址等等,在建立時就可以順便設定popup了,相比於其他塗層建置方式會輕鬆很多!相關的建置範例會在後面的文章提到~
GridLayer有點類似rasterLayer,但我還不清楚他的作用,只好在這邊跟大家說抱歉啦......
上週好不容易完成了6天的鐵人賽文章,結果隔天一上班就接到壞消息,當天還距離7分鐘踩死線,真是有驚無險(擦汗。到今天已經連三天趕工了,希望明天之後能夠稍微喘息一下。