Leaflet
 | |
| 原作者 | Vladimir Agafonkin |
|---|---|
| 首次發布 | 2011年5月13日 |
| 目前版本 | 1.9.4（2023年5月18日） |
| 原始碼庫 | |
| 程式語言 | JavaScript |
| 平台 | 參見瀏覽器支援 |
| 類型 | JavaScript函式庫 |
| 許可協定 | BSD-2-Clause[1] |
| 網站 | leafletjs |
Leaflet是一個開源的JavaScript庫，用於構建Web地圖應用。首次發布於2011年，並於2012年7月30日進行第一次更新，發布了leaflet 0.4。[2]它支援大多數移動和桌面平台，支援HTML5和CSS3。其使用者包括FourSquare、Pinterest和Flickr。
Leaflet讓無GIS背景的開發人員可輕易地展示公共伺服器上的圖磚Web地圖，並且可以疊加圖層。Leaflet也可展示GeoJSON格式的空間資料，並設定樣式、建立互動式圖層，如點擊時會彈出式視窗的標記。
烏克蘭人Vladimir Agafonkin開發了Leaflet，他在2013年加入了Mapbox。[3] Leaflet的最新版本為Leaflet 1.9.4，在2023年5月18日發布。
Leaflet能運作於所有主要的桌面和行動裝置，並且有許多外掛程式供擴充，原始碼美觀易懂，簡單高效。42KB輕量化的Leaflet JS庫提供了絕大多數開發者所需的地圖特性。關於版本更新問題，Leaflet1.9版本將為之後2.0系列等重要版本升級奠定基礎，但是2.0版本就目前來說仍需時間除錯。據官方更新紀錄檔描述，未來將計劃放棄支援IE瀏覽器；更新JavaScript版本相容，使用ECMAScript標準版本以期待使用更加功能強大的JavaScript特性；模組標準化，未來僅使用單個模組化標準，降低分散式代碼的複雜性；取消了「L」全域變數，以期為了更好地使用tree-shaking消除無用代碼。1.x版本系列將更加專注於重要錯誤的修復以及過去版本的維護。
使用
[編輯]
Leaflet的典型用法是將Leaflet的「map」元素繫結到HTML元素（例如div）上。然後將圖層和標記添加到map元素中。
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
// Tile Usage Policy applies: https://operations.osmfoundation.org/policies/tiles/
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Leaflet支援非球面麥卡托投影顯示地圖。[4]Leaflet庫本身可以通過變數L訪問。
功能
[編輯]Leaflet原生支援Web地圖服務（WMS）層、GeoJSON層、向量層和圖磚層。通過外掛程式支援許多其他類型的圖層。
與其他Web地圖庫一樣，由Leaflet實現的基本顯示模型是一個基本地圖，加上零個或多個半透明覆蓋，上面顯示零個或多個向量對象。
Leaflet有一些特別的客製化功能，例如自訂地圖投影、基於圖像和HTML的標記、和CSS3彈出式視窗和控制項等。[5]
部分實用功能舉例
[編輯]Leaflet 的 onEachFeature 在處理例如 geojson 資料時非常方便。該函式包含兩個參數：「feature」和「layer」。 「feature」允許我們訪問 geojson 中的每個對象，「layer」允許我們添加彈出式視窗、工具提示等。
下面給出了一個 JavaScript 範例：
let geoJson = L.geoJSON(geoJsonData,
{weight:2,
onEachFeature: getFeature,
style: getStyle
}).addTo(map);
const getFeature= (feature, layer) =>{
if (!feature.properties.name) return
layer.bindTooltip(feature.properties.cityName);
layer.bindPopup(
`
<ul>
<li>Name: ${feature.properties.cityName}</li>
<li>Population: ${feature.properties.population}</li>
</ul>
`
)
還可以向 getFeature 函式添加「async」關鍵字，以便使用 fetch() 等 Promise。我們可以利用 geojson 每個對象中的屬性來建立自訂的 jsonqueries 並取得例如城市特定資訊，並使用 layer.bindTooltip、layer.bindPopup 等顯示它們。
元素
[編輯]主要的Leaflet對象類型有：[6]
- 柵格類型（TileLayer與ImageOverlay）
- 向量類型（Path、Polygon，以及特定類型，如Circle）
- 群組類型（LayerGroup、FeatureGroup與GeoJSON）
- 控制項（Zoom、Layers等）
還有各種工具類，例如用於管理投影、變換和與DOM互動的介面。
GIS格式支援情況
[編輯]Leaflet的核心支援少數GIS標準格式，其他外掛程式來支援。
| 標準 | 支援情況 |
|---|---|
| GeoJSON | 良好，通過geoJson函式支援，核心功能[7]
|
| KML、CSV、WKT、TopoJSON、GPX | 用Leaflet-Omnivore外掛程式支援[8] |
| WMS | 通過TileLayer.WMS[9]子類型支援，核心功能
|
| WFS | 不支援，不過有第三方外掛程式。[10] |
| GML | 不支援。[11] |
瀏覽器支援
[編輯]Leaflet 0.7支援Chrome、Firefox、Safari 5+、Opera 12+和IE 7-11。[5]
最新發布的版本Leaflet 1.9.2發生了少許變化，在桌面部分支援Chrome、firefox、Safari 5+、 Opera 12+ IE 9-11和Edge。而在行動端則支援Safari for iOS 7+、Chrome for mobile、 Firefox for mobile、和IE10+ for Win8 devices。 [5]
與其他庫的比較
[編輯]Leaflet與OpenLayers之間可以進行比較，因為兩者都是開源的，而且客戶端都只有JavaScript庫。與OpenLayers的230,000行相比，整個庫要小得多，大約有7,000行代碼（截至2015年）。[12]與OpenLayers相比，它的代碼占用空間更小（大約是123KB[13]相比於423KB[14]），部分原因是它使用模組化結構。Leaflet的代碼庫更新，用上了JavaScript的新特性，以及HTML5和CSS3。還有，Leaflet缺乏一些OpenLayers原生支援的特性，比如Web要素服務（WFS），[15]以及EPSG:3857/4326/3395以外的各種投影方式。[16]
它還可以與私有的、封閉原始碼的Google地圖API（2005年推出）和Bing地圖API相比較，後兩者都包含了一個重要的伺服器端組件，提供位址編碼、路徑規劃、搜尋等服務，並與Google地球等功能整合。谷歌地圖API提供了速度和簡單性，但不是靈活的，只能用於訪問谷歌地圖服務。不過，Google API的新DataLayer 部分確實允許顯示外部資料來源。[17]
Leaflet的特點
[編輯]Leaflet 是一個開源的 JavaScript 庫，用於構建互動地圖。它由 Vladimir Agafonkin 開發，並由眾多貢獻者共同維護。Leaflet 於2011年首次發布，迅速成為構建 Web 地圖應用的熱門選擇，特別是在行動裝置上表現優異。Leaflet 輕量且效能優異，其核心庫僅幾十KB，但功能強大，支援包括圖磚圖、向量圖和自訂圖層在內的多種地圖圖層。 Leaflet 提供了豐富的外掛程式和 API，使開發者能夠輕鬆添加標記、彈出式視窗、圖例和其他互動元素。外掛程式生態系統非常活躍，有數百個社群貢獻的外掛程式擴充了 Leaflet 的功能，如路徑動畫、群集標記和測量工具等。此外，Leaflet 還支援各種地圖服務提供商，如 OpenStreetMap、Mapbox 和 Google Maps，開發者可以靈活地選擇和切換不同的地圖源。 Leaflet 的文件全面，社群活躍，為開發者提供了豐富的資源和支援。無論是初學者還是經驗豐富的開發者，都能從中獲益。它已被廣泛應用於各種 Web 地圖專案，如即時交通地圖、環境監測、旅遊導航和災害應對等。例如，在環境監測專案中，Leaflet 可以用於展示污染源和監測資料；在旅遊導航中，可以幫助使用者找到景點和路線。Leaflet 的簡單易用和靈活性，使其成為建立互動地圖的不二選擇。 [18]首頁就非常明確的聲明了，他們開發的這個 JavaScript 庫是一個關注行動端並且對行動端使用者非常友好的，關於互動式地圖的 JavaScript 庫，並且這個庫是完全開源的。
Leaflet外掛程式
[編輯]由於 Leaflet 是一款輕量化的 JavaScript 庫，它主要提供網頁地圖的核心功能。如果需要更多功能，開發者可用第三方外掛程式來擴充，包括地圖互動、動態資料載入、資料視覺化等[19]。
外部連結
[編輯]參考文獻
[編輯]- ^ License - Leaflet. Leaflet. [2018-11-03]. （原始內容存檔於2021-01-06）.
- ^ Lovelace, Robin. Testing web map APIs - Google vs OpenLayers vs Leaflet. [2018-11-03]. （原始內容存檔於2017-11-03）.
- ^ MacWright, Tom. Leaflet Creator Vladimir Agafonkin Joins MapBox. 2014-08-06 [2018-11-03]. （原始內容存檔於2015-09-12）.
- ^ Top Data Visualization tools by Nataly Otair. 2020-10-08 [2020-09-06]. （原始內容存檔於2020-11-25）.
- ^ 5.0 5.1 5.2 Features. [2018-11-03]. （原始內容存檔於2021-02-07）.
- ^ Leaflet API reference. [2018-11-03]. （原始內容存檔於2021-01-05）.
- ^ Using GeoJSON with Leaflet. [2018-11-03]. （原始內容存檔於2020-11-11）.
- ^ leaflet-omnivore. October 5, 2021 [2020-12-13]. （原始內容存檔於2020-10-19） –透過GitHub.
- ^ TileLayer.WMS. [2018-11-03]. （原始內容存檔於2021-01-05）.
- ^ Leaflet with WFS Example. July 19, 2019 [2020-12-13]. （原始內容存檔於2020-09-30） –透過GitHub.
- ^ Support for GML. 2012-06-23 [2018-11-03]. （原始內容存檔於2016-09-27）.
- ^ OpenHub.net comparison between OpenLayers and Leaflet. OpenHub.net. [2018-11-03]. （原始內容存檔於2014-08-08）.
- ^ Leaflet frontpage. Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. [2018-11-03]. （原始內容存檔於2021-02-07）.
- ^ OpenLayers 3.4.0 compressed source code. OpenLayers.org. [2018-11-03]. （原始內容存檔於2016-11-29）.
- ^ Various plugins providing WFS-support are listed on https://leafletjs.com/plugins.html （頁面存檔備份，存於網際網路檔案館）
- ^ Projection. [2018-11-03]. （原始內容存檔於2021-01-05）.
- ^ Data Layer. Google Maps Platform. Google. [2018-11-03]. （原始內容存檔於2021-01-28）.
- ^ leaflet官网. leaflet. [2022-10-23]. （原始內容存檔於2023-01-10）.
- ^ Leaflet 插件. Leaflet plugins. [2022-10-23]. （原始內容存檔於2021-01-19）.