百度地圖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