百度地图jsAPI使用总结（三）散点地图之echarts

针对散点地图的需求，可以采用echarts来实现，其优点在于效果美观，但对于海量数据的场景，不建议使用echarts，笔者做过一次两万散点的百度-echarts散点，浏览器打开页面后几乎动弹不得

echarts官方文档

准备

引用百度API资源和echarts资源，注意，这里bmap.js是百度地图api结合echarts必引的一个文件

<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/bmap.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey"></script>

百度地图容器

<div id="map" style="position:absolute;top:40px;left:10px;">
    <!-- 这边是将要存放的地图画布 -->
</div>

初始化echarts

var myChart = echarts.init(document.getElementById('map'));
//一共要显示5种颜色的数据，这里按颜色分组
var blackData = [];
var redData = [];
var orangeData = [];
var brownData = [];
var greenData = [];
/*数据分组的代码省略*/
var option = {
	//标题设置
    	title: {},
    	//图例,name的值要与下面series中的name值对应上才会有效果
    	legend:{
    		data:[{
    			name:'不法户',
    			icon:'circle',
    			textStyle : {
    				color:'#ff0000'
    			}
    		},{
    			name:'违法户',
    			icon:'circle',
    			textStyle : {
    				color:'#ffae00'
    			}
    		},{
    			name:'违规户',
    			icon:'circle',
    			textStyle : {
    				color:'#993300'
    			}
    		},{
    			name:'正常户',
    			icon:'circle',
    			textStyle : {
    				color:'#2ad14b'
    			}
    		},{
    			name:'无证户',
    			icon:'circle',
    			textStyle : {
    				color:'#000000'
    			}
    		}],
    		orient:'vertical',
    		backgroundColor:'rgba(140,101,101,0.1)',
    		shadowColor: 'rgba(140,101,101, 0.5)',
  				shadowBlur: 10,
  				width : "100px",
  				left : '30px',
  				//bottom : '60px'
  				top : '400px'
    	},
    	//百度地图配置，必须配置项
    	bmap: {
    	    //中心坐标，如下定义为常德
            center: [111.74877070950000,29.64169217980000,8],
            //地图初始显示的缩放大小
            zoom: 15,
            roam: true
    	},
    	//散点数据的配置
    	series : [
        {
            name: '无证户',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            //数据载入，这里需要自己定义自己的数据，主要是[{value : [lng,lat]}]
            data: blackData,
            symbolSize: 5,
            //配置标签的显示
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            //配置散点的颜色
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: '#000000',
                    color: '#000000'
                }
            },
            //鼠标悬停时显示的提示内容
            tooltip : {
                formatter : function(param){
                    return toolTipFormatter(param);
                },
                show : false
            }
        },{
            name: '不法户',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            //数据载入，这里需要自己定义自己的数据，主要是[{value : [lng,lat]}]
            data: redData,
            symbolSize: 5,
            //配置标签的显示
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            //配置散点的颜色
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: '#ff0000',
                    color: '#ff0000'
                }
            },
            //鼠标悬停时显示的提示内容
            tooltip : {
                formatter : function(param){
                    return toolTipFormatter(param);
                },
                show : false
            }
        },{
            name: '违法户',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            //数据载入，这里需要自己定义自己的数据，主要是[{value : [lng,lat]}]
            data: orangeData,
            symbolSize: 5,
            //配置标签的显示
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            //配置散点的颜色
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: '#ffae00',
                    color: '#ffae00'
                }
            },
            //鼠标悬停时显示的提示内容
            tooltip : {
                formatter : function(param){
                    return toolTipFormatter(param);
                },
                show : false
            }
        },{
            name: '违规户',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            //数据载入，这里需要自己定义自己的数据，主要是[{value : [lng,lat]}]
            data: brownData,
            symbolSize: 5,
            //配置标签的显示
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            //配置散点的颜色
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: '#993300',
                    color: '#993300'
                }
            },
            //鼠标悬停时显示的提示内容
            tooltip : {
                formatter : function(param){
                    return toolTipFormatter(param);
                },
                show : false
            }
        },{
            name: '正常户',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            //数据载入，这里需要自己定义自己的数据，主要是[{value : [lng,lat]}]
            data: greenData,
            symbolSize: 5,
            //配置标签的显示
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            //配置散点的颜色
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: '#2ad14b',
                    color: '#2ad14b'
                }
            },
            //鼠标悬停时显示的提示内容
            tooltip : {
                formatter : function(param){
                    return toolTipFormatter(param);
                },
                show : false
            }
        }
    	]
};
function toolTipFormatter(param){
	//param传进来的是鼠标悬停点的series内容，可用param.data来获取data内容
	//这里可以根据需求拼HTML字符串然后返回
	return "<div>...</div>";
}
//这是让echarts真正开始干活的代码
myChart.setOption(option);
// 百度地图实例,使用变量map的方式和BMap的实例使用方式一致
var map = myChart.getModel().getComponent('bmap').getBMap(); 

效果如下：