今天下午完成了通过限定时间范围动态查询学生上网信息数据，首先使用SQL查询将数据填充进DataTable中，然后将DataTable中的数据解析成JSON数据格式，前端AJAX函数请求后台返回的JSON格式数据，并使用vardataObj = eval_r("(" + strjson + ")")函数进行解析，作为参数传到heatmapOverlay.setDataSet()函数中，在BMap上加载显示查询范围时间区间内的热力图。完成之后的效果图如下：
1.前端代码如下：
//根据时间段（时间范围）显示的动态热力图
function showDynamicHeatMap() {
debugger
//varStudentNo = '2014112015';
varTimeStart = '2015-01-02 07:30';
varTimeEnd = '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 +")");
varpointsArray = [];
$.each(dataObj, function(index, item) {
var pt = { "lng": item.lng,"lat": item.lat, "count": item.count }; //count 权重
pointsArray.push(pt);
});
vartestData = {
max: 300,
data: dataObj
};
//vardataObj = eval_r("(" + strjson + ")");
//$.each(dataObj, function (index, item) {
// var lng =item.Longitude;
// var lat = item.Latitude;
// var clusterPt = newBMap.Point(lng, lat);
// markers.push(newBMap.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);
//是否显示热力图
functionopenHeatmap() {
heatmapOverlay.show();
}
functioncloseHeatmap() {
heatmapOverlay.hide();
}
openHeatmap();
functionsetGradient() {
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
functionisSupportCanvas() {
var elem =document.createElement_x('canvas');
return !!(elem.getContext&& elem.getContext('2d'));
}
}
}
);
}
2.ASP.NET后台代码：
protected string strJson= "";
protected voidPage_Load(object sender, EventArgs e)
{
try
{
//stringStudentNo = Request.QueryString["StudentNo"].ToString();
stringTimeStart = Request.QueryString["TimeStart"].ToString();
stringTimeEnd = Request.QueryString["TimeEnd"].ToString();
//设计通过时间段、学号、年级等SQL信息检索
//DataTable dtCCR =DataProvider.Instance().GetStuInfoByTimeSpan(TimeStart,TimeEnd);
DataTabledtCCR = DataProvider.Instance().GetLoginPtRepeatCount(TimeStart,TimeEnd);
//DataTable dtCCR =DataProvider.Instance().GetStuInfoTabByNo(StudentNo);
stringline = "\r\n";
StringBuilder sbList = new StringBuilder();
sbList.Append("[");
if (dtCCR!= null && dtCCR.Rows.Count > 0)
{
int i = 0;
foreach (DataRow dr indtCCR.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 ="";
}
}
目前时间滑块的功能还没有做好，只能通过手动设置起始和结束时间，接下来会把时间滑块完成，在下一篇博客里和大家交流，分享！
