原
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
今天下午完成了通过限定时间范围动态查询学生上网信息数据,首先使用SQL查询将数据填充进DataTable中,然后将DataTable中的数据解析成JSON数据格式,前端AJAX函数请求后台返回的JSON格式数据,并使用var dataObj = eval_r("(" + strjson + ")")函数进行解析,作为参数传到heatmapOverlay.setDataSet()函数中,在BMap上加载显示查询范围时间区间内的热力图。完成之后的效果图如下:
1.前端代码如下:
//根据时间段(时间范围)显示的动态热力图
functionshowDynamicHeatMap(){
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