leaflet具備markersCluster(標點聚合)的插件很是好用,偶然看到百度地圖也有標點聚合開源庫,嘗試一下,先上效果圖:html
點此打開交互網頁
git
總結:github
1、優勢:網絡
百度地圖原生的火星座標系和國內通過偏移的經緯度能完美歪在一塊兒;性能
網絡訪問速度比open street map快;ui
地圖信息相對豐富;spa
2,缺點:插件
說明文檔不是很詳細,自定義分組顏色應該有,沒找到說明文檔;code
程序性能不高,點擊聚合點會凍結1秒鐘的感受;orm
美感通常;
實現代碼以下:
var map = new BMap.Map("allmap"); window.map = map; var point = new BMap.Point(121.48, 31.233); map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件 map.enableScrollWheelZoom(); //啓用滾輪放大縮小 map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件 map.disable3DBuilding(); map.centerAndZoom(point, 12); map.setMapStyle({style:'grayscale'}); var markers_kfc = []; var markers_mcd = []; queue() .defer(d3.csv, 'data/kfc_official.csv') .defer(d3.csv, 'data/mcd_official_geo.csv') .await(function(error, kfc, mcd) { kfc.forEach(function(d) { var pt = new BMap.Point(d.lng, d.lat); markers_kfc.push(new BMap.Marker(pt)); }); mcd.forEach(function(d) { var pt = new BMap.Point(d.lng, d.lat); markers_mcd.push(new BMap.Marker(pt)); }); var markerClusterer_kfc = new BMapLib.MarkerClusterer(map, {markers:markers_kfc}); var markerClusterer_mcd = new BMapLib.MarkerClusterer(map, {markers:markers_mcd}); });