百度地图中添加动态热力图
今天下午完成了通过限定时间范围动态查询学生上网信息数据，首先使用SQL查询将数据填充进DataTable中，然后将DataTable中的数据解析成JSON数据格式，前端AJAX函数请求后台返回的JSON格式数据，并使用
var dataObj = eval_r("(" + strjson + ")")函数进行解析，作为参数传到
heatmapOverlay.setDataSet()函数中，在BMap上加载显示查询范围时间区间内的热力图。完成之后的效果图如下：
1.前端代码如下：
//根据时间段（时间范围）显示的动态热力图
function
showDynamicHeatMap() {
debugger
//var StudentNo = '2014112015';
var TimeStart = '2015-01-02 07:30';
var TimeEnd = '2015-01-12 18:00';
$.ajax({
url: '
DynamicStuInfoJson.aspx',
data: {TimeStart: TimeStart, TimeEnd: TimeEnd },//发送到服务器的数据，key/value形式
datatype: 'json',
cache: false,
success: function (strjson) {
debugger
//组织数据
var dataObj = eval_r("(" + strjson + ")");
var pointsArray = [];
$.each(dataObj, function(index, item) {
var pt = { "lng": item.lng, "lat": item.lat, "count": item.count }; //count 权重
pointsArray.push(pt);
});
var testData = {
max: 300,
data: dataObj
};
//var dataObj = eval_r("(" + strjson + ")");
//$.each(dataObj, function (index, item) {
// var lng = item.Longitude;
// var lat = item.Latitude;
// var clusterPt = new BMap.Point(lng, lat);
// markers.push(new BMap.Marker(clusterPt));
// debugger
//}
//);
if (!isSupportCanvas()) {
alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
//参数说明如下:
heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 50 });
debugger
map.addOverlay(heatmapOverlay);
//heatmapOverlay.setDataSet({ data: points, max: 300 });
heatmapOverlay.setDataSet(testData);
//是否显示热力图
function openHeatmap() {
heatmapOverlay.show();
}
function closeHeatmap() {
heatmapOverlay.hide();
}
openHeatmap();
function setGradient() {
var gradient = {};
var colors = document.querySelectorAll("input[type='color']");
colors = [].slice.call(colors, 0);
colors.forEach(function (ele) {
gradient[ele.getAttribute("data-key")] = ele.value;
});
heatmapOverlay.setOptions({ "gradient": gradient });
}
//判断浏览区是否支持canvas
function isSupportCanvas() {
var elem = document.createElement_x('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
}
}
);
}
2.ASP.NET后台代码：
protected string strJson = "";
protected void Page_Load(object sender, EventArgs e)
{
try
{
//string StudentNo = Request.QueryString["StudentNo"].ToString();
string TimeStart = Request.QueryString["TimeStart"].ToString();
string TimeEnd = Request.QueryString["TimeEnd"].ToString();
//设计通过时间段、学号、年级等SQL信息检索
//DataTable dtCCR = DataProvider.Instance().GetStuInfoByTimeSpan(TimeStart, TimeEnd);
DataTable dtCCR = DataProvider.Instance().GetLoginPtRepeatCount(TimeStart, TimeEnd);
//DataTable dtCCR = DataProvider.Instance().GetStuInfoTabByNo(StudentNo);
string line = "\r\n";
StringBuilder sbList = new StringBuilder();
sbList.Append("[");
if (dtCCR != null && dtCCR.Rows.Count > 0)
{
int i = 0;
foreach (DataRow dr in dtCCR.Rows)
{
//解析成百度地图API热力图支持的JSON数据格式
//if (i < dtCCR.Rows.Count - 1)
//{
// sbList.Append("{'lng':'" + dr["Longitude"].ToString() + "','lat':'" + dr["Latitude"].ToString() + "','count':'" + dr["RepeatCount"].ToString() + "'},");
//}
//else
//{
// sbList.Append("{'lng':'" + dr["Longitude"].ToString() + "','lat':'" + dr["Latitude"].ToString() + "','count':'" + dr["RepeatCount"].ToString() + "'}");
//}
if (i < dtCCR.Rows.Count - 1)
{
sbList.Append("{'lng':" + dr["Longitude"] + ",'lat':" + dr["Latitude"] + ",'count':" + dr["RepeatCount"] + "},");
}
else
{
sbList.Append("{'lng':" + dr["Longitude"] + ",'lat':" + dr["Latitude"] + ",'count':" + dr["RepeatCount"] + "}");
}
i = i + 1;
if (i > 500)
break;
}
}
sbList.Append("]");
strJson = sbList.ToString();
}
catch (Exception ex)
{
strJson = "";
}
}
目前时间滑块的功能还没有做好，只能通过手动设置起始和结束时间，接下来会把时间滑块完成，在下一篇博客里和大家交流，分享！