1. 程式人生 > >百度地圖API開發:大量座標點進行分組聚合

百度地圖API開發:大量座標點進行分組聚合

leaflet具有markersCluster(標點聚合)的外掛非常好用,偶然看到百度地圖也有標點聚合開源庫,嘗試一下,先上效果圖:


互動版連結:http://guoweish.github.io/raw-map-baidu.html

總結:

1、優點:

百度地圖原生的火星座標系和國內經過偏移的經緯度能完美歪在一起;

網路訪問速度比open street map快;

地圖資訊相對豐富;

2,缺點:

說明文件不是很詳細,自定義分組顏色應該有,沒找到說明文件;

程式效能不高,點選聚合點會凍結1秒鐘的感覺;

美感一般;

實現程式碼如下:

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});
    	});