百度地图js结合heatMap.js制作热力图

作者这里的热力图的应用场景为微信浏览器，相对于其他浏览器，微信浏览器在制作热力图中会遇到一个问题，下文中会提到。

首先是初始化地图：

var map = new BMap.Map("attenMap");
var point = new BMap.Point(106.55373,29.556006);
map.centerAndZoom(point,12);
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.addControl(new BMap.NavigationControl()); //向地图中添加缩放控件

接下来就是在地图添加热力图：

function creatHeatMap(data){ //创建热力图
	map.clearOverlays();

	var heatArr = []; //热力图需要的数组
	var pts = []; //视图中数组
	for(i=0;i<data.length;i++){
		pts.push(new BMap.Point(data[i].lng, data[i].lat));
	}
	if(!isSupportCanvas()){ //判断浏览器是否支持canvas
		alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~');
	}
	heatArr = heatPointArr(pts); //获得热力图需要的数组，主要是计算权重值
	console.log(heatArr);
	if(heatArr.length==0){ //在微信浏览器中，不能传递空的heatArr数组,需要初始化一个数组
		heatArr = [{"lng":106.55373,"lat":29.556006,"count":1}];
	}
	heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":100,"visible":true,"maxOpacity": .7,"minOpacity": 0});
	map.addOverlay(heatmapOverlay);
	heatmapOverlay.setDataSet({data:heatArr,max:100}); //注意，在微信浏览器中，不能传递空的heatArr数组

	map.setViewport(pts); //将热力图处于视图中央
}


//判断浏览区是否支持canvas
function isSupportCanvas(){
	var elem = document.createElement('canvas');
	return !!(elem.getContext && elem.getContext('2d'));
}

 注意，在微信浏览器中，不能传递空的heatArr数组，我这里给长度为零的数组给一个初始值，使他在地图中并不明显。

使用heatmap.js需要的数据源不止需要坐标点，还要计算一个权重值，这个权重值相当于坐标点的密集程度，百度地图不能帮我们计算，需要自己计算好权重值。计算方法如下：

function heatPointArr(PointArr){ //计算count权重值。在某一点规定半径范围内，相邻点越多距离越近权重越大。
	var selectedObjArr = []; //计算后得到的热力图数组
	var defaultDistance = 5000; //半径
	var defaultCount = 10; //初始权重
	var maxCount = defaultCount; //最大权重
	var distance;

	var distanceArr=[];
	var sum = 0;
	for (let i=0; i<PointArr.length; i++) { 
	     for(let j = 0;j<PointArr.length;j++){
	         if(j>i){
	 		var dist = map.getDistance(PointArr[i],PointArr[j]);
	 		distanceArr.push(dist);
	 		sum+=parseInt(dist);
	         }
	     }
	}
	var defaultDistance = Math.ceil(sum/distanceArr.length); //距离平均值
	defaultDistance = (defaultDistance>0)?defaultDistance:0;

	for(var i = 0;i<PointArr.length;i++){
	     var count = defaultCount;
	     for(var j = 0;j<PointArr.length-1;j++){
	         distance = map.getDistance(PointArr[i],PointArr[j+1]);
	         if( distance < defaultDistance){
	             count += (defaultDistance-distance)/defaultDistance;
	         }
	     }
	     if(maxCount<count){
	          maxCount = count;
	     }
	     var obj = {
	         "lng": PointArr[i].lng,
	         "lat": PointArr[i].lat,
	         "count": Math.round(count)
	    };
	    selectedObjArr.push(obj);
	}
	return selectedObjArr;
}

在使用热力图之前需要引用百度地图封装的heatMap_min.js

https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js

 

详细可参考百度地图的demo:http://lbsyun.baidu.com/jsdemo.htm#c1_15