Leaflet - 一個用於互動式地圖的 JavaScript 函式庫

一個開源的 JavaScript 函式庫
用於行動裝置友善的互動式地圖

2023 年 5 月 18 日 — Leaflet 1.9.4 已發布！

Leaflet 是領先的開源 JavaScript 函式庫，用於行動裝置友善的互動式地圖。它僅約 42 KB 的 JS，並具備大多數開發人員所需的所有地圖功能。

Leaflet 的設計理念是簡潔、效能和易用性。它可以在所有主要的桌面和行動平台高效運作，可以透過大量的外掛進行擴展，擁有美觀、易於使用且文件完善的 API，以及簡單易讀的原始碼，讓人樂於為其貢獻。

在這裡，我們在 'map' div 中建立一個地圖，新增我們選擇的圖磚，然後在彈出視窗中新增帶有一些文字的標記。

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();

透過快速入門指南了解更多，查看其他教學，或直接前往API 文件。如果您有任何疑問，請先查看常見問題。

深受頂尖企業信賴

GitHub foursquare Pinterest Facebook Evernote Etsy Flickr 500px Data.gov European Commission The Washington Post Financial Times NPR USA Today National Park Service IGN.com OpenStreetMap

功能

Leaflet 並不試圖為所有人做所有事情。相反，它專注於使基本功能完美運作。

開箱即用的圖層

圖磚圖層、WMS
標記、彈出視窗
向量圖層：折線、多邊形、圓形、矩形
影像疊加
GeoJSON

互動功能

帶有慣性的拖曳平移
滾輪縮放
行動裝置上的雙指縮放
雙擊縮放
縮放到區域 (Shift + 拖曳)
鍵盤導航
事件：點擊、滑鼠懸停等
標記拖曳

視覺功能

縮放和平移動畫
圖磚和彈出視窗淡入動畫
非常精美的預設設計，適用於標記、彈出視窗和地圖控制項
Retina 解析度支援

自訂功能

純 CSS 彈出視窗和控制項，方便重新設定樣式
基於影像和 HTML 的標記
用於自訂地圖圖層和控制項的簡單介面
自訂地圖投影（開箱即用 EPSG:3857/4326/3395）
強大的 OOP 功能，用於擴展現有類別

效能功能

行動裝置上的硬體加速，使其感覺像原生應用程式一樣流暢
利用 CSS 功能，使平移和縮放非常流暢
智慧折線/多邊形渲染，具有動態裁剪和簡化功能，使其速度非常快
模組化建置系統，用於排除您不需要的功能
消除行動裝置上的點擊延遲

地圖控制項

縮放按鈕
屬性
圖層切換器
比例尺

瀏覽器支援

桌面

Chrome
Firefox
Safari 5+
Opera 12+
IE 9–11
Edge

行動

適用於 iOS 7+ 的 Safari
適用於行動裝置的 Chrome
適用於行動裝置的 Firefox
適用於 Win8 裝置的 IE10+

其他

極其輕巧
無外部相依性

如果您發現 Leaflet 中確實缺少某些功能，請先檢查是否有相關外掛，以及是否已在GitHub Issues 上討論過。如果沒有，請開啟一個新的 GitHub issue。

參與其中

讓我們一起打造世界上最好的地圖函式庫！Leaflet 最初由 Volodymyr Agafonkin 建立，但現在由一個龐大的貢獻者社群開發。Pull request 非常受歡迎。然而，還有更多方法可以參與 Leaflet 的開發。

您可以透過發現和回報錯誤、改進文件、在 Stack Overflow、GIS Stack Exchange 和 GitHub issues 上幫助其他人、在 X 上@LeafletJS，以及在您的同事和朋友中宣傳 Leaflet，來極大地幫助這個專案。

請查看貢獻指南，了解有關參與 Leaflet 開發的更多資訊。