Leaflet

拒絕臃腫的地圖引擎：用最少的代碼，實現最完整的地圖功能

• 極致輕量效能: 核心檔案壓縮後僅約 42 KB，卻包含了 80% 開發者所需的各種地圖功能，確保網頁加載速度與流暢的縮放體驗。
• 行動裝置優化: 預設支援觸控縮放、雙擊縮放與慣性滾動，並利用 CSS3 硬體加速技術，在智慧型手機上運作極其平滑。
• 供應商中立 (Provider Agnostic): 不綁定任何特定地圖源。您可以自由切換 OpenStreetMap、Mapbox、Google Maps 或是自建的點陣圖磚伺服器。

主要功能、特點

• 介紹: Leaflet 是一個開源的 JavaScript 函式庫，旨在為現代網頁提供簡單、穩定且高效的互動式地圖開發環境。它專注於讓「基本功能運作得完美無缺」，並透過數百個社群插件來擴展進階功能。

• 特色服務:

  • 強大的圖層系統: 支援點陣圖磚 (Tiles)、GeoJSON、SVG、以及向量圖形（圓形、多邊形等）的渲染與互動。
  • 豐富的插件生態: 擁有超過 400 個插件，可輕鬆擴展如熱力圖 (Heatmaps)、叢集標記 (Marker Clustering) 或路徑規劃等功能。
  • 現代瀏覽器相容性: 完全相容於所有的行動與桌面瀏覽器，並具備良好的無障礙空間 (Accessibility) 支援。
  • 易用的 API 設計: 語法直覺且文件極其完善，讓即便是 GIS 初學者也能在十分鐘內佈署出第一張地圖。

快速啟動範例

透過 CDN 引入並初始化地圖：

<link rel="stylesheet" href="[https://unpkg.com/leaflet@1.9.4/dist/leaflet.css](https://unpkg.com/leaflet@1.9.4/dist/leaflet.css)" />
<script src="[https://unpkg.com/leaflet@1.9.4/dist/leaflet.js](https://unpkg.com/leaflet@1.9.4/dist/leaflet.js)"></script>

<div id="map" style="height: 400px;"></div>

<script>
  // 初始化地圖並設定中心點
  const map = L.map('map').setView([25.0330, 121.5654], 13);

  // 加入 OpenStreetMap 圖磚
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  // 加入標記與彈出視窗
  L.marker([25.0330, 121.5654]).addTo(map)
    .bindPopup('這是台北 101').openPopup();
</script>

使用 npm 安裝：

npm install leaflet

產品說明

Leaflet 代表了開源開發的哲學：專注、純粹且高效。 Leaflet 憑藉著開源授權的自由度 (BSD-2) 與極低的資源佔用，依然是 2D 地圖展示、地理資訊標註與資料視覺化專案的首選。