在瀏覽器中基於地圖構建應用已經是很廣泛的業務需求，隨着大數據在地圖可視化中的出現，我們遇到了不小的挑戰。用戶會拿出十萬甚至百萬數量級的數據，正如您所想象的，在顯示此數量的地理編碼信息方面存在着一些技術上的難題。一個難題是確保數據以一種有意義且對最終用戶可操作的方式準確地呈現；另一個是因爲信息的數量使得它在瀏覽器上產生了巨大負載，需要花長時間纔可以看到的結果。
爲了尋找最佳解決方案，我們測試了各種開源地圖渲染組件，通過加載大數據集將它們的相對性能呈現出來。對於這些測試,，我們不使用服務器端分頁和前端聚合的手段，就是爲了找出最佳的組件組合。
我們準備了20萬個緯度/經度點的數據集。分別使用了百度地圖的BMap.PointCollection組件、Openlayers的ol.source.Vector組件，但效果不是很理想，操作畫面有明顯的卡頓，很明顯瀏覽器承受力已經到了極限。我們把目光轉向了同樣是開源的地圖組件Leaflet，近些年它在大數據展現方面可是名聲大作，也感謝必應搜索，讓我很快找到了關於它在大數據處理方面的技術博客。
Leaflet是用於適用於移動端交互地圖的主要的開源JavaScript庫。JS庫的大小爲38k左右，但是擁有大部分開發者需要的全部地圖功能。Leaflet保持着簡單、性能和實用性的設計思想，可以在所有主要的桌面和移動端平臺上高效的運轉。
Leaflet.CanvasLayer。Leaflet提供CanvasLayer(全屏幕畫布覆蓋)類，它調用定製的用戶函數進行繪圖，在這個函數中，我們可以使用canvas繪製自定義圖形。我們使用這個方案測試了20萬條的數據，渲染的時間約爲1293毫秒，操作畫面流暢度較以前有了很大的提升。它的原理是使用了canvas來繪製地圖元素，畫布的內存使用率低於 SVG， 因爲它沒有將每個點插入到 DOM 中。但是，該方案只支持地圖元素的快速渲染，不支持在每個地圖元素上設置事件處理程序，使得在交互擴展受到了很大的限制。
圖：使用Leaflet.CanvasLayer渲染效果圖
Leaflet與D3。爲了支持在每個地圖元素上設置事件處理程序，我們最後選擇了Leaflet與D3結合的方案，向Leaflet的overlay圖層添加SVG元素，利用D3的data方法爲每條數據創建path元素，將數據轉換成SVG的座標並繪製成圖形，在圖形上綁定事件處理程序，最後當地圖漫遊時，Leaflet自動重新定位overlay框。
使用這個方案，數據在渲染上加快了一些速度，使得整體上獲得更好的交互體驗。事實上D3並沒有繪製所有的點，它使用了D3中的輸入、更新、退出模式，來動態更新地圖上的點，在地圖進行縮放、漫遊操作後，根據地圖的可視範圍重新檢索數據，過濾掉不能有效渲染的點，從而減少SVG中的點數，最終的結果就是，數據渲染的更快了。
圖：使用Leaflet與D3渲染效果圖
在做大數據地圖可視化時，基於瀏覽器客戶端進行渲染優化的手段並不多。使用聚合手段，通過縮減顯示點的數量可以提高渲染效率，但遺憾的是，它在視覺上減少了實際位置和密度的感觀，導致分析結果打了個不小的折扣。我們的結論是，Leaflet與D3結合的方式，不僅比其他選項更快、更靈活，而且它允許對單個數據點進行綁定和操作，真正實現地圖的可視化與交互，地圖元素的分佈更實際，數據的分析結果也更準確。