Leaflet
Leaflet是一個開源的JavaScript庫,用於構建Web地圖應用。首次發布於2011年,並於2012年7月30日進行第一次更新,發布了leaflet 0.4。[3]它支持大多數移動和桌面平台,支持HTML5和CSS3。其用戶包括FourSquare、Pinterest和Flickr。
![]() | |
原作者 | Vladimir Agafonkin |
---|---|
首次發布 | 2011年5月13日 |
當前版本 |
|
源代碼庫 | |
編程語言 | JavaScript |
平台 | 參見瀏覽器支持 |
類型 | JavaScript函式庫 |
許可協議 | BSD-2-Clause[2] |
網站 | leafletjs |
Leaflet允許沒有GIS背景的開發人員非常容易地顯示託管在公共服務器上的瓦片Web地圖,並且可以疊加圖層。它可以從GeoJSON文件中加載地理要素數據,設置樣式,並創建交互式圖層,如點擊時會彈出窗口的標記。
烏克蘭人Vladimir Agafonkin開發了Leaflet,他在2013年加入了Mapbox。[4] leaflet的最新版本為Leaflet 1.9,在2022年9月21日發布。
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支持非球面墨卡托投影顯示地圖。[5]Leaflet庫本身可以通過變量L
訪問。
功能
編輯Leaflet原生支持Web地圖服務(WMS)層、GeoJSON層、矢量層和瓦片層。通過插件支持許多其他類型的圖層。
與其他Web地圖庫一樣,由Leaflet實現的基本顯示模型是一個基本地圖,加上零個或多個半透明覆蓋,上面顯示零個或多個矢量對象。
Leaflet有一些特別的定製功能,例如自定義地圖投影、基於圖像和HTML的標記、和CSS3彈出窗口和控件等。[6]
部分實用功能舉例
編輯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對象類型有:[7]
- 柵格類型(TileLayer與ImageOverlay)
- 矢量類型(Path、Polygon,以及特定類型,如Circle)
- 群組類型(LayerGroup、FeatureGroup與GeoJSON)
- 控件(Zoom、Layers等)
還有各種工具類,例如用於管理投影、變換和與DOM交互的接口。
GIS格式支持情況
編輯Leaflet的核心支持少數GIS標準格式,其他插件來支持。
標準 | 支持情況 |
---|---|
GeoJSON | 良好,通過geoJson 函數支持,核心功能[8]
|
KML、CSV、WKT、TopoJSON、GPX | 用Leaflet-Omnivore插件支持[9] |
WMS | 通過TileLayer.WMS [10]子類型支持,核心功能
|
WFS | 不支持,不過有第三方插件。[11] |
GML | 不支持。[12] |
瀏覽器支持
編輯Leaflet 0.7支持Chrome、Firefox、Safari 5+、Opera 12+和IE 7-11。[6]
最新發布的版本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。 [6]
與其他庫的比較
編輯Leaflet與OpenLayers之間可以進行比較,因為兩者都是開源的,而且客戶端都只有JavaScript庫。與OpenLayers的230,000行相比,整個庫要小得多,大約有7,000行代碼(截至2015年)。[13]與OpenLayers相比,它的代碼占用空間更小(大約是123KB[14]相比於423KB[15]),部分原因是它使用模塊化結構。Leaflet的代碼庫更新,用上了JavaScript的新特性,以及HTML5和CSS3。還有,Leaflet缺乏一些OpenLayers原生支持的特性,比如Web要素服務(WFS),[16]以及EPSG:3857/4326/3395以外的各種投影方式。[17]
它還可以與私有的、封閉源代碼的Google地圖API(2005年推出)和Bing地圖API相比較,後兩者都包含了一個重要的服務器端組件,提供地址編碼、路徑規劃、搜索等服務,並與Google地球等功能集成。谷歌地圖API提供了速度和簡單性,但不是靈活的,只能用於訪問谷歌地圖服務。不過,Google API的新DataLayer 部分確實允許顯示外部數據源。[18]
Leaflet的特點
編輯Leaflet 是一個開源的 JavaScript 庫,用於構建互動地圖。它由 Vladimir Agafonkin 開發,並由眾多貢獻者共同維護。Leaflet 於2011年首次發布,迅速成為構建 Web 地圖應用的熱門選擇,特別是在移動設備上表現優異。Leaflet 輕量且性能優異,其核心庫僅幾十KB,但功能強大,支持包括瓦片圖、矢量圖和自定義圖層在內的多種地圖圖層。 Leaflet 提供了豐富的插件和 API,使開發者能夠輕鬆添加標記、彈出窗口、圖例和其他交互元素。插件生態系統非常活躍,有數百個社區貢獻的插件擴展了 Leaflet 的功能,如路徑動畫、群集標記和測量工具等。此外,Leaflet 還支持各種地圖服務提供商,如 OpenStreetMap、Mapbox 和 Google Maps,開發者可以靈活地選擇和切換不同的地圖源。 Leaflet 的文檔全面,社區活躍,為開發者提供了豐富的資源和支持。無論是初學者還是經驗豐富的開發者,都能從中獲益。它已被廣泛應用於各種 Web 地圖項目,如實時交通地圖、環境監測、旅遊導航和災害應對等。例如,在環境監測項目中,Leaflet 可以用於展示污染源和監測數據;在旅遊導航中,可以幫助用戶找到景點和路線。Leaflet 的簡單易用和靈活性,使其成為創建互動地圖的不二選擇。 [19]首頁就非常明確的聲明了,他們開發的這個JavaScript 庫是一個關注移動端並且對移動端用戶非常友好的,關於交互式地圖的 JavaScript 庫,並且這個庫是完全開源的。
Leaflet插件
編輯因為Leaflet本身是一款十分輕量化的JavaScript庫,所以它只重於一組核心功能的實現,然而開發者可以通過使用第三方插件的方式來拓展Leaflet的其他功能,你可以在Leaflet 插件[20]中找到並下載這些插件,這些插件有關於實現地圖交互,動態數據加載,實現數據可視化等各種功能。
外部連結
編輯參考文獻
編輯- ^ v1.9.4 Latest. 2023年5月18日 [2023年5月20日].
- ^ 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).
- ^ 6.0 6.1 6.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).