百度地图中添加动态热力图

     今天下午完成了通过限定时间范围动态查询学生上网信息数据，首先使用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 = "";

        }

    }

目前时间滑块的功能还没有做好，只能通过手动设置起始和结束时间，接下来会把时间滑块完成，在下一篇博客里和大家交流，分享！