Leaflet 0.4 版本發佈
經過 5.5 個月的開發,自上次穩定版本以來,有 33 位貢獻者參與,我很榮幸地宣布 Leaflet 0.4 版本發佈!它帶來了更簡單的 API 和許多重大改進與重要的錯誤修復,同時也對文件進行了重大更新、新增了官方外掛頁面,並啟動了這個開發者部落格。讓我們逐一看看這些改進。
更簡單的 API
Leaflet 0.4 包含多項 API 改進,讓您能編寫更簡單、更精簡的程式碼(類似 jQuery),同時與先前的方法向下相容(因此您可以使用兩種風格)。
L.marker([51.5, -0.09])
.addTo(map)
.bindPopup('Hello world!')
.openPopup();
首先,Leaflet 方法現在接受簡單陣列形式的 LatLng、LatLngBounds、Point 和 Bounds 物件,因此您不必總是明確地建立它們
map.panTo([50, 30]); // the same as:
map.panTo(new L.LatLng(50, 30));
其次,addLayer、addControl、openPopup 等 Map 方法,也從另一側取得了對應的方法
marker.addTo(map); // same as map.addLayer(marker)
control.addTo(map); // map.addControl(control)
popup.openOn(map); // map.openPopup(popup)
加上所有不顯式返回值的 Leaflet 方法都會返回物件本身的事實,這使得連鎖方法調用非常方便。
第三,Leaflet 類別現在帶有小寫捷徑(類別工廠),讓您可以在不使用 new
關鍵字的情況下建立物件,這讓連鎖程式碼看起來更美觀
L.map('map').fitWorld(); // same as
(new L.Map('map')).fitWorld();
值得注意的新功能
改良的縮放動畫
在之前的版本中,標記、彈出視窗、向量圖層和影像覆蓋在縮放期間會被隱藏,但現在(感謝 Dave Leaver)它們都擁有美麗且流暢的縮放動畫,與其他現有的地圖函式庫不同。試著縮放上方的地圖,看看它看起來如何!但如果您在地圖上有數千個標記,則可以使用 Map 的 markerZoomAnimation
選項關閉標記動畫,以避免速度變慢。
此外,現在如果您快速縮放多次,圖磚也不會消失。
鍵盤導航
Leaflet 地圖在 0.4 版本中透過新的鍵盤處理器(由 Eric Martinez 貢獻)獲得了良好的輔助功能提升,預設為啟用。它允許使用者透過使用方向鍵進行平移,以及使用 +/-
鍵進行縮放(在透過 Tab 鍵或點擊將焦點移至地圖後)來導航地圖。在上方的地圖上試試看,感覺非常棒!
平移動態效果
平移體驗的另一個不錯的改進是,現在它具有慣性移動效果,在地圖快速平移後會繼續平滑移動。在觸控裝置上感覺特別自然,而且預設也會啟用,現在就試試看!它也是高度可配置的,允許您設定效果的最大速度、減速和觸發的時間閾值。
Android 4 上的 Pinch-Zoom
在先前的 Leaflet 版本中,Pinch-Zoom 僅適用於 iOS 裝置,但現在它終於也適用於 Android 了!不僅適用於 Android 4+ 上的內建瀏覽器,也適用於 Android 版 Chrome 和 Firefox。
比例尺控制項
一個簡單輕巧的控制項,可指示目前地圖檢視的公制和/或英制系統比例。與往常一樣,您可以使用 CSS 自訂其外觀。看看上方地圖的左下角!
L.control.scale().addTo(map);
折線和多邊形編輯
允許使用者使用簡單直觀的介面編輯折線和多邊形。請注意,此功能最終會合併到 Leaflet.draw 中,這是 Jacob Toye 開發的一個很棒的繪圖形狀外掛。
polygon.editing.enable();
基於 Div 的圖示
除了基於影像的 Icon 類別外,Leaflet 0.4 還獲得了一個 DivIcon 類別,用於建立輕巧的基於 div 的標記(可以包含自訂 HTML 並可以使用 CSS 設定樣式)。例如,您可以在編輯折線時(方形控制點)或在稍後我將介紹的 Leaflet.markercluster 外掛中(彩色群集)看到它們的作用。
L.marker([50.505, 30.57], {
icon: L.divIcon({className: 'my-div-icon'})
}).addTo(map);
矩形圖層
矩形是建立矩形區域圖層的便捷捷徑。您之前可以使用多邊形執行此操作,但這樣更容易
L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map);
API 改進
GeoJSON API
GeoJSON API 經過改進,變得更簡單且更具彈性。Jason Sanford 編寫了一篇很棒的教學,展示了新的 API。但是這些變更並不向下相容,因此請務必更新舊程式碼。
圖示 API
Icon API 經過改進,變得更簡單且更具彈性,這些變更也不向下相容(但是可以很快更新舊程式碼)。請查看更新的 自訂圖示教學,或直接前往 API 文件。
控制項 API
現在建立自訂控制項更容易了,請查看 API 文件,其中也包含一個簡單範例。
更好的事件 API
Aaron King 對事件方法進行了一些改進。on
和 off
方法現在可以一次接受多個事件類型,以空格分隔的類型字串表示
map.on('click dblclick moveend', doStuff);
此外,它們可以接受一個以類型和監聽器函數作為鍵/值對的物件,如下所示
marker.on({
click: onMarkerClick,
dragend: onMarkerDragEnd
});
而且,現在如果您僅在 off
方法中指定事件類型,它將移除所有與此事件相關聯的監聽器。
map.off('click');
其他 API 改進
Leaflet 0.4 在不同的 Leaflet 類別中新增了 30 多個方法、選項和事件,使 API 更加完整和強大。請查看完整變更日誌以取得完整清單。
效能和可用性改進
您可能會認為 Leaflet 已經快得令人難以置信,但此版本帶來了一些效能改進,使其速度更快。
- 平移、地圖大小調整和 Pinch-Zoom 的效能得到了提升(稍後的部落格文章將說明其背後的一些技巧)。
- 在畫布後端(例如在 Android 2 上)更新和移除向量圖層的速度快了很多倍。
- 行動裝置上的控制項陰影已替換為簡單的邊框,以提高效能。
- 現在,向量圖層在 iOS 上每次平移後都不會閃爍。
此外,還有一些尚未提及的可用性改進
- 即使游標下有標記,現在平移也可以運作(有助於擁擠的地圖)。
- 彈出視窗的外觀略有改善。
- 圖磚圖層現在具有
detectRetina
選項,啟用時會將視網膜顯示器的圖磚解析度加倍(由 Mithgol 貢獻)。
錯誤修復
Leaflet 0.4 帶來了大約 45 個錯誤修復,使其在所有瀏覽器和平台上更加穩定和可靠。值得注意的錯誤修復包括在某些罕見情況下,在 Pinch-Zoom 後導致地圖完全消失的可怕 iOS 錯誤、IE10 beta 上損壞的縮放、以 XHTML 內容類型提供的頁面上損壞的 Leaflet 地圖,以及固定位置元素內的地圖上的不正確縮放。
以下是變更日誌中的完整錯誤修復清單。
從舊版本升級
除了上述的 GeoJSON 和 Icon 變更外,這裡還有一個可能造成重大變更的清單,更新程式碼時請仔細閱讀(應該不需要太多時間)。
Leaflet 0.4 的下載選項(包括實際下載、CDN 託管版本和手動建置的說明)列在下載頁面上。
程式碼統計資料
我仍然致力於使 Leaflet 盡可能小巧輕便。以下是函式庫目前大小的細分
- JavaScript:27 KB 縮小並經過 gzip 壓縮(102 KB 縮小、176 KB 原始碼、7578 行程式碼)
- CSS:1.8 KB 經過 gzip 壓縮(8 KB、377 行程式碼)
- 影像:10 KB(5 個 PNG 影像)
文件更新
到目前為止,Leaflet API 參考不完整。但是對於此版本,我們投入了巨大的努力,使其 100% 完整、最新,並且成為您見過最棒的 API 參考頁面。所有剩餘的類別、方法、選項、事件和屬性都經過仔細記錄,並新增了更多程式碼範例,而且從現在開始,文件將始終保持最新狀態。
此外,頁面的設計也得到了顯著的改進,包括更好的色彩、字型、間距、連字、手動調整的欄寬等等,許多細節都使其美觀且易於閱讀。
外掛頁面
Leaflet 網站現在有一個官方的外掛頁面,其中列出了由出色的 Leaflet 社群建立的許多 Leaflet 外掛,新增了許多出色的功能並有助於服務整合。
我想提到的一個外掛是 Leaflet.markercluster,由 Dave Leaver 開發,這是目前我在任何地圖函式庫中見過最好的標記群集外掛,它速度快、美觀、為群集提供流暢的動畫、為最後一個縮放層級上擁擠的標記提供智慧型 Google Earth 風格的解決方案(由 George MacKerron 開發)、可以突顯滑鼠懸停在群集上時所覆蓋的區域、在行動裝置上也能良好運作,並且可以輕鬆自訂。我想我們將在接下來的文章中更詳細地介紹此外掛。
另一個值得注意的外掛是 Leaflet.draw,由 Jacob Toye 開發,其靈感來自 Bruno B 開發的類似外掛。它透過帶有圖示和提示的非常友好的使用者介面,啟用繪製折線、多邊形、矩形、圓形和標記等功能。其他與編輯相關的程式碼可能會在未來移至此外掛中。
此外,感謝 Proj4Leaflet 外掛(由 Kartena 開發),GIS 愛好者現在可以享用 Leaflet 來繪製一些古怪且罕見的投影地圖。
另一個每個人都需要查看的基於 Leaflet 的創作是 OSM Buildings,由 Jan Marsch 開發,這是一個很棒的 JS 函式庫,用於在 Leaflet 地圖之上視覺化 3D OSM 建築資料。非常酷的東西。
開發者部落格
這是官方 Leaflet 開發者部落格的第一篇文章,它將成為所有重要的 Leaflet 相關新聞、教學、提示和開發筆記的主要場所。
使用 Leaflet 的大型業者
自上次發布以來,Leaflet 已被許多偉大的公司採用,包括 Flickr、foursquare 和 維基媒體基金會(現在在首頁上展示)。對於 Leaflet 和開源地圖來說,這是一個非常令人興奮的時刻,我期待看到未來有更多公司遵循這一很棒的趨勢。
感謝您
我要感謝所有幫助 Leaflet 成為現在這樣的人們,他們貢獻程式碼、回報錯誤、在其網站上使用 Leaflet、告訴同事有關它的資訊、在會議上談論它等等。繼續努力!
特別感謝 Dave Leaver 的鼓舞人心的貢獻,包括改進的縮放動畫和最先進的群集外掛,以及 Jason Sanford 的友善支援(以及設定 Leaflet CDN 等等)。
當然,還要感謝我的出色公司 CloudMade,感謝他們擁抱開源並支持這項開發。
誠摯地,
Vladimir Agafonkin,Leaflet 維護者。