需求描述:使用高德地图插件--热力图插件,实现监控数据直观化:地图上呈现人流量变化,以热力图的方式。服务器监控数据每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 ? $.