百度地图API开发:大量坐标点进行分组聚合

leaflet具有markersCluster(标点聚合)的插件非常好用,偶然看到百度地图也有标点聚合开源库,尝试一下,先上效果图:

百度地图API开发:大量坐标点进行分组聚合_第1张图片

点此打开交互网页

总结:

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



你可能感兴趣的:(数据可视化 d3.js)