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

     今天下午完成了通过限定时间范围动态查询学生上网信息数据,首先使用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 = "";
        }
    }
目前时间滑块的功能还没有做好,只能通过手动设置起始和结束时间,接下来会把时间滑块完成,在下一篇博客里和大家交流,分享!

你可能感兴趣的:(JavaScript)