作為一個LBS的APP,都獲得了用戶經緯度,也都使用了友盟統計、google ana等等統計分析系統,不過沒有地圖展示功能,不能進行直觀的展示。
友盟統計、google ana等系統是總體數據統計,無法和業務結合起來,比如淘寶提供每個店、每個商品的用戶統計。
當有上述需求時,就需要自己服務器保存一份經緯度,進行統計,這時候如何直觀的展示?
查看各個地圖開放平台的文檔,發現有的提供了“麻點圖/點聚合(Marker Cluster)”功能。
原理是:把每個點都畫在地圖上,縮放時累加聚合。
缺點:只能畫少量的點(1千個),如果很多的話會導致瀏覽器卡死。如果需要把幾百萬用戶畫在地圖上,麻點圖顯然不能用。
高德地圖:
點聚合顯示:http://developer.amap.com/api/javascript-api/example/e/0507-2/
疊加雲數據圖層:http://developer.amap.com/api/javascript-api/example/r/1801-2/
谷歌地圖:
MarkerClusterer:https://developers.google.com/maps/articles/toomanymarkers#markerclusterer
如上圖所示:麻點圖解決的是 從1加到1000的問題。
能不能直接從1千、1萬開始呢?麻點圖不可以,所以我開發了麻數圖(Number Cluster),現在整理開源出來,方便重用,希望能幫大家節約一點時間。
代碼:https://github.com/sinkcup/maps-number-cluster
在線演示(國內,高德和騰訊):http://jsfiddle.net/sinkcup/Z6v9x/
在線演示(國外,Google,需番茄):http://jsfiddle.net/sinkcup/Y5NaT/
如何集成到自己的項目:請看examples目錄。
截圖: