在瀏覽器中基於地圖構建應用已經是很廣泛的業務需求，隨著大資料在地圖視覺化中的出現，我們遇到了不小的挑戰。使用者會拿出十萬甚至百萬數量級的資料，正如您所想象的，在顯示此數量的地理編碼資訊方面存在著一些技術上的難題。一個難題是確保資料以一種有意義且對終端使用者可操作的方式準確地呈現；另一個是因為資訊的數量使得它在瀏覽器上產生了巨大負載，需要花長時間才可以看到的結果。

為了尋找最佳解決方案，我們測試了各種開源地圖渲染元件，通過載入大資料集將它們的相對效能呈現出來。對於這些測試,，我們不使用伺服器端分頁和前端聚合的手段，就是為了找出最佳的元件組合。

我們準備了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結合的方式，不僅比其他選項更快、更靈活，而且它允許對單個數據點進行繫結和操作，真正實現地圖的視覺化與互動，地圖元素的分佈更實際，資料的分析結果也更準確。