Leaflet 是一個開源的 JavaScript 庫，用於構建 Web 地圖應用。首次釋出於 2011 年，並於 2012 年 7 月 30 日進行第一次更新，釋出了 leaflet 04。它支援大多數移動和桌面平臺，支援 HTML5 和 CSS3。其使用者包括 FourSquare、Pinterest 和 Flickr。 Leaflet 讓無 GIS 背景的開發人員可輕易地展示公共伺服器上的，並且可以疊加圖層。Leaflet 也可展示 GeoJSON 格式的空間資料，並設定樣式、建立互動式圖層，如點選時會彈出視窗的標記。 烏克蘭人 Vladimir Agafonkin 開發了 Leaflet，他在 2013 年加入了 Mapbox。 Leaflet 的最新版本為 Leaflet 194，在 2023 年 5 月 18 日釋出。 Leaflet 能運作於所有主要的桌面和移動平臺，並且有許多外掛供擴充套件，原始碼美觀易懂，簡單高效。42KB 輕量化的 Leaflet JS 庫提供了絕大多數開發者所需的地圖特性。關於版本更新問題，Leaflet19 版本將為之後 20 系列等重要版本升級奠定基礎，但是 20 版本就目前來說仍需時間除錯。據官方更新日誌描述，未來將計劃放棄支援 IE 瀏覽器；更新 JavaScript 版本相容，使用 ECMAScript 標準版本以期待使用更加功能強大的 JavaScript 特性；模組標準化，未來僅使用單個模組化標準，降低分散式程式碼的複雜性；取消了 L 全域性變數，以期為了更好地使用 treeshaking 消除無用程式碼。1x 版本系列將更加專注於重要錯誤的修復以及過去版本的維護。 使用 Leaflet 的典型用法是將 Leaflet 的 map 元素繫結到 HTML 元素（例如 div）上。然後將圖層和標記新增到 map 元素中。 create a map in the map div set the view to a given place and zoom var map Lmap mapsetView 51505 009 13 add an OpenStreetMap tile layer Tile Usage Policy applies httpsoperationsosmfoundationorgpoliciestiles LtileLayer httpstileopenstreetmaporgzxypng attribution a hrefhttpopenstreetmaporgcopyrightOpenStreetMapa contributors addTo map Leaflet 支援非球面墨卡託投影顯示地圖。Leaflet 庫本身可以透過變數 L 訪問。 功能 Leaflet 原生支援（WMS）層、GeoJSON 層、向量層和瓦片層。透過外掛支援許多其他型別的圖層。 與其他 Web 地相簿一樣，由 Leaflet 實現的基本顯示模型是一個基本地圖，加上零個或多個半透明覆蓋，上面顯示零個或多個向量物件。 Leaflet 有一些特別的定製功能，例如自定義地圖投影、基於影像和 HTML 的標記、和 CSS3 彈出視窗和控制元件等。 部分實用功能舉例 Leaflet 的 onEachFeature 在處理例如 geojson 資料時非常方便。該函式包含兩個引數：feature 和 layer。 feature 允許我們訪問 geojson 中的每個物件，layer 允許我們新增彈出視窗、工具提示等。 下面給出了一個 JavaScript 示例： let geoJson LgeoJSON geoJsonData weight2 onEachFeature getFeature style getStyle addTo map const getFeature feature layer if featurepropertiesname return layerbindTooltip featurepropertiescityName layerbindPopup Name featurepropertiescityName Population featurepropertiespopulation 還可以向 getFeature 函式新增 async 關鍵字，以便使用 fetch 等 Promise。我們可以利用 geojson 每個物件中的屬性來建立自定義的 jsonqueries 並獲取例如城市特定資訊，並使用 layerbindTooltip、layerbindPopup 等顯示它們。 元素 主要的 Leaflet 物件型別有： 柵格型別（TileLayer 與 ImageOverlay） 向量型別（Path、Polygon，以及特定型別，如 Circle） 群組型別（LayerGroup、FeatureGroup 與 GeoJSON） 控制元件（Zoom、Layers 等） 還有各種工具類，例如用於管理投影、變換和與 DOM 互動的介面。 GIS 格式支援情況 Leaflet 的核心支援少數 GIS 標準格式，其他外掛來支援。 標準 支援情況 GeoJSON 良好，透過 geoJson 函式支援，核心功能 KML、CSV、WKT、TopoJSON、GPX 用 LeafletOmnivore 外掛支援 透過 TileLayerWMS 子型別支援，核心功能 不支援，不過有第三方外掛。 GML 不支援。 瀏覽器支援 Leaflet 07 支援 Chrome、Firefox、Safari 5、Opera 12 和 IE 711。 最新發布的版本 Leaflet 192 發生了少許變化，在桌面部分支援 Chrome、firefox、Safari 5、 Opera 12 IE 911 和 Edge。而在移動端則支援 Safari for iOS 7、Chrome for mobile、 Firefox for mobile、和 IE10 for Win8 devices。 與其他庫的比較 Leaflet 與 OpenLayers 之間可以進行比較，因為兩者都是開源的，而且客戶端都只有 JavaScript 庫。與 OpenLayers 的 230000 行相比，整個庫要小得多，大約有 7000 行程式碼（截至 2015 年）。與 OpenLayers 相比，它的程式碼佔用空間更小（大約是 123KB 相比於 423KB），部分原因是它使用模組化結構。Leaflet 的程式碼庫更新，用上了 JavaScript 的新特性，以及 HTML5 和 CSS3。還有，Leaflet 缺乏一些 OpenLayers 原生支援的特性，比如（WFS），Various plugins providing WFSsupport are listed on httpsleafletjscompluginshtml 以及 EPSG385743263395 以外的各種投影方式。 它還可以與私有的、封閉原始碼的 Google 地圖 API（2005 年推出）和 Bing 地圖 API 相比較，後兩者都包含了一個重要的伺服器端元件，提供地址編碼、路徑規劃、搜尋等服務，並與 Google 地球等功能整合。谷歌地圖 API 提供了速度和簡單性，但不是靈活的，只能用於訪問谷歌地圖服務。不過，Google API 的新 DataLayer 部分確實允許顯示外部資料來源。 Leaflet 的特點 Leaflet 是一個開源的 JavaScript 庫，用於構建互動地圖。它由 Vladimir Agafonkin 開發，並由眾多貢獻者共同維護。Leaflet 於 2011 年首次釋出，迅速成為構建 Web 地圖應用的熱門選擇，特別是在移動裝置上表現優異。Leaflet 輕量且效能優異，其核心庫僅幾十 KB，但功能強大，支援包括瓦片圖、向量圖和自定義圖層在內的多種地圖圖層。 Leaflet 提供了豐富的外掛和 API，使開發者能夠輕鬆新增標記、彈出視窗、圖例和其他互動元素。外掛生態系統非常活躍，有數百個社群貢獻的外掛擴充套件了 Leaflet 的功能，如路徑動畫、群集標記和測量工具等。此外，Leaflet 還支援各種地圖服務提供商，如 OpenStreetMap、Mapbox 和 Google Maps，開發者可以靈活地選擇和切換不同的地圖源。 Leaflet 的文件全面，社群活躍，為開發者提供了豐富的資源和支援。無論是初學者還是經驗豐富的開發者，都能從中獲益。它已被廣泛應用於各種 Web 地圖專案，如即時交通地圖、環境監測、旅遊導航和災害應對等。例如，在環境監測專案中，Leaflet 可以用於展示汙染源和監測資料；在旅遊導航中，可以幫助使用者找到景點和路線。Leaflet 的簡單易用和靈活性，使其成為建立互動地圖的不二選擇。 首頁就非常明確的聲明瞭，他們開發的這個 JavaScript 庫是一個關注移動端並且對移動端使用者非常友好的，關於互動式地圖的 JavaScript 庫，並且這個庫是完全開源的。 Leaflet 外掛 由於 Leaflet 是一款輕量化的 JavaScript 庫，它主要提供網頁地圖的核心功能。如果需要更多功能，開發者可用第三方外掛來擴充，包括地圖互動、動態資料載入、資料視覺化等。 外部連結 openstreetmapleaflet Leaflet 官網 Leaflet 教程 參考文獻 Category 自由 GIS 軟體 Category 用 JavaScript 程式設計的自由軟體 Category 地理技術 CategoryJavaScript 函式庫 Category 使用 BSD 許可證的軟體 Category 電子地圖