作者这里的热力图的应用场景为微信浏览器,相对于其他浏览器,微信浏览器在制作热力图中会遇到一个问题,下文中会提到。
首先是初始化地图:
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