維基百科

Leaflet

Leaflet是一個開源的JavaScript庫，用於構建Web地圖應用。首次發布於2011年，並於2012年7月30日進行第一次更新，發布了leaflet 0.4。[3]它支持大多數移動和桌面平台，支持HTML5和CSS3。其用戶包括FourSquare、Pinterest和Flickr。

Leaflet
原作者Vladimir Agafonkin
首次發布2011年5月13日 (2011-05-13)
當前版本
  • 1.9.4 (2023年5月18日；穩定版本)[1]
編輯維基數據鏈接
源代碼庫
編輯維基數據鏈接
編程語言JavaScript
平台參見瀏覽器支持
類型JavaScript函式庫
許可協議BSD-2-Clause[2]
網站leafletjs.com

Leaflet允許沒有GIS背景的開發人員非常容易地顯示託管在公共服務器上的瓦片Web地圖（英語：tiled web map），並且可以疊加圖層。它可以從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的典型用法是將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: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);

Leaflet支持非球面墨卡托投影顯示地圖。[5]Leaflet庫本身可以通過變量L訪問。

功能 編輯

Leaflet原生支持Web地圖服務（英語：Web Map Service）（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（英語：Web Map Service） 通過TileLayer.WMS[10]子類型支持，核心功能
WFS（英語：Web Feature Service） 不支持，不過有第三方插件。[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要素服務（英語：Web Feature Service）（WFS），[16]以及EPSG:3857/4326/3395以外的各種投影方式。[17]

它還可以與私有的、封閉源代碼的Google地圖API（2005年推出）和Bing地圖API相比較，後兩者都包含了一個重要的服務器端組件，提供地址編碼、路徑規劃、搜索等服務，並與Google地球等功能集成。谷歌地圖API提供了速度和簡單性，但不是靈活的，只能用於訪問谷歌地圖服務。不過，Google API的新DataLayer 部分確實允許顯示外部數據源。[18]

Leaflet的特點 編輯

Leaflet是一款輕量級的JavaScript庫，用戶只需要將包含Leaflet的JavaScript和CSS文件添加到項目中集成就可以隨時進行使用。 非常有特點的是，Leaflet的定位是移動設備、他們致力於為移動設備提供良好的使用性的交互式地圖。Leaflet網站[19]首頁就非常明確的聲明了，他們開發的這個JavaScript 庫是一個關注移動端並且對移動端用戶非常友好的，關於交互式地圖的 JavaScript 庫，並且這個庫是完全開源的。

Leaflet插件 編輯

因為Leaflet本身是一款十分輕量化的JavaScript庫，所以它只重於一組核心功能的實現，然而開發者可以通過使用第三方插件的方式來拓展Leaflet的其他功能，你可以在Leaflet 插件[20]中找到並下載這些插件，這些插件有關於實現地圖交互，動態數據加載，實現數據可視化等各種功能。

外部連結 編輯

參考文獻 編輯

  1. ^ v1.9.4 Latest. 2023年5月18日 [2023年5月20日]. 
  2. ^ License - Leaflet. Leaflet. [2018-11-03]. （原始內容存檔於2021-01-06）. 
  3. ^ Lovelace, Robin. Testing web map APIs - Google vs OpenLayers vs Leaflet. [2018-11-03]. （原始內容存檔於2017-11-03）. 
  4. ^ MacWright, Tom. Leaflet Creator Vladimir Agafonkin Joins MapBox. 2014-08-06 [2018-11-03]. （原始內容存檔於2015-09-12）. 
  5. ^ Top Data Visualization tools by Nataly Otair. 2020-10-08 [2020-09-06]. （原始內容存檔於2020-11-25）. 
  6. ^ 6.0 6.1 6.2 Features. [2018-11-03]. （原始內容存檔於2021-02-07）. 
  7. ^ Leaflet API reference. [2018-11-03]. （原始內容存檔於2021-01-05）. 
  8. ^ Using GeoJSON with Leaflet. [2018-11-03]. （原始內容存檔於2020-11-11）. 
  9. ^ leaflet-omnivore. October 5, 2021 [2020-12-13]. （原始內容存檔於2020-10-19） –透過GitHub. 
  10. ^ TileLayer.WMS. [2018-11-03]. （原始內容存檔於2021-01-05）. 
  11. ^ Leaflet with WFS Example. July 19, 2019 [2020-12-13]. （原始內容存檔於2020-09-30） –透過GitHub. 
  12. ^ Support for GML. 2012-06-23 [2018-11-03]. （原始內容存檔於2016-09-27）. 
  13. ^ OpenHub.net comparison between OpenLayers and Leaflet. OpenHub.net. [2018-11-03]. （原始內容存檔於2014-08-08）. 
  14. ^ Leaflet frontpage. Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. [2018-11-03]. （原始內容存檔於2021-02-07）. 
  15. ^ OpenLayers 3.4.0 compressed source code. OpenLayers.org. [2018-11-03]. （原始內容存檔於2016-11-29）. 
  16. ^ Various plugins providing WFS-support are listed on https://leafletjs.com/plugins.html （頁面存檔備份，存於網際網路檔案館）
  17. ^ Projection. [2018-11-03]. （原始內容存檔於2021-01-05）. 
  18. ^ Data Layer. Google Maps Platform. Google. [2018-11-03]. （原始內容存檔於2021-01-28）. 
  19. ^ leaflet官网. leaflet. [2022-10-23]. （原始內容存檔於2023-01-10）. 
  20. ^ Leaflet 插件. Leaflet plugins. [2022-10-23]. （原始內容存檔於2021-01-19）. 
取自「https://zh.100ke.info/w/index.php?title=Leaflet&oldid=82404257」