javascript - 高德地图热力图插件实现人流量监控，如何实现人流数据实时刷新

问题描述

问 题

需求描述：使用高德地图插件--热力图插件，实现监控数据直观化：地图上呈现人流量变化，以热力图的方式。服务器监控数据每3秒更新，浏览器需要每5秒请求一次获取最新数据并更新用户界面。

代码实现： 定义了一个方法showHeatMap()用来ajax请求服务器监控数据，代码如下：

showHeatMap();//页面加载时请求数据，渲染用户界面
setInterval(showHeatMap,5000);//每隔5秒请求服务器获取最新数据
function showHeatMap(){
       $.get({
           url:"/getdata",
           dataType:"json",
           success:function(data){
             console.log(data);
             var heatmap;
             //map为高德地图实例，AMap.Heatmap为高德地图热力图插件
                map.plugin(["AMap.Heatmap"], function () {
                    heatmap = new AMap.Heatmap(map, {
                        radius: 45, //给定半径
                        opacity: [0, 0.9],
                        gradient: {
                            0.2: $.cookie("little") != undefined ? $.cookie("little") : '#4AA329',
                            0.5: $.cookie("a_little") != undefined ? $.cookie("a_little") : '#1F7B67',
                            0.7: $.cookie("many") != undefined ? $.cookie("many") : '#A63F00',
                            0.95: $.cookie("plenty") != undefined ? $.cookie("plenty") : '#9D0019'
                        }
                    });
                });
                
                heatmap.setDataSet({
                    data: data,
                    min: 10
                });
               },
               error:function(xmlHttpRequest,err,catchError){
                   console.log(xmlHttpRequest);
                   console.log(err);
                   console.log(catchError);
                   }
           });
       }

问题描述 网页打开，成功显示数据，但5秒后没有实时刷新，网页打开一段时间后，页面崩溃。
第一次运行的结果：
崩溃的结果：
调试模式中，每隔5秒有成功打印出请求到的数据。请js大神提供一个开发思路吧，怎么实时刷新这个用户界面，不是刷新整个网页，是重新渲染地图上呈现的结果。高德地图的热力图插件是使用heatmap.js。

解决方案

showHeatMap();//页面加载时请求数据，渲染用户界面
var heatmap;

//map为高德地图实例，AMap.Heatmap为高德地图热力图插件
map.plugin(["AMap.Heatmap"], function () {
    heatmap = new AMap.Heatmap(map, {
        radius: 45, //给定半径
        opacity: [0, 0.9],
        gradient: {
            0.2: $.cookie("little") != undefined ? $.cookie("little") : '#4AA329',
            0.5: $.cookie("a_little") != undefined ? $.cookie("a_little") : '#1F7B67',
            0.7: $.cookie("many") != undefined ? $.cookie("many") : '#A63F00',
            0.95: $.cookie("plenty") != undefined ? $.cookie("plenty") : '#9D0019'
        }
    });
});

setInterval(showHeatMap,5000);//每隔5秒请求服务器获取最新数据
function showHeatMap(){
       $.get({
           url:"/getdata",
           dataType:"json",
           success:function(data){
             console.log(data);
                heatmap.setDataSet({
                    data: data,
                    min: 10
                });
               },
               error:function(xmlHttpRequest,err,catchError){
                   console.log(xmlHttpRequest);
                   console.log(err);
                   console.log(catchError);
                   }
           });
       }

这篇关于javascript - 高德地图热力图插件实现人流量监控，如何实现人流数据实时刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！