您现在的位置: 首页 > SDK开发 > 开发指南


绘制热力图 热力图反映了某个地区的人流密度,通过不同程度的颜色区域,表现出人流的密集度。 heatmap

第一步,新建热力图对象实例(以下代码都要在地图加载完成后调用map.on('loadComplete')


var gradient = { 0.45: "rgb(201,135,255)", 0.55: "rgb(189,97,255)", 0.65: "rgb(155,49,255)", 0.95: "yellow", 1.0: "rgb(157,53,255)" }
var heatmapInstance = esmap.ESHeatMap.create(map, {
radius: 20, //热力点半径
opacity: .5, //热力图透明度
max: 100, //热力点value的最大值
gradient: gradient //渐变色值,可配
// 系统默认值:
// .45: "rgb(0,0,255)",
// .55: "rgb(0,255,255)",
// .65: "rgb(0,255,0)",
// .95: "yellow",
// 1: "rgb(255,0,0)"
});

第二步,添加热力图数据


//第一种方法,一次添加一个热力点,addPoint前两个参数是位置,第三个参数是人数
heatmapInstance.addPoint(13496140.383561742, 3640230.05635368,10);
heatmapInstance.addPoint(13496150.383561742, 3640235.05635368,20);

//第二种方法,一次添加一批热力点,前两个参数是位置,第三个参数value是人数
var pts=[{x:13496140.383561742,y:3640230.05635368,value:10},{x:13496140.383561742,y:3640230.05635368,value:10},{x:13496140.383561742,y:3640230.05635368,value:10}];
heatmapInstance.addPoints(pts);

//第三种方法,你也可以生成随机热力图数据
heatmapInstance.randomPoints(200);

第三步,将热力图应用到某具体楼层


//热力图应用到哪一楼层
var floorLayer = map.getFloor(fnum);
floorLayer.applyHeatMap(heatmapInstance);   

清除某楼层的热力图


var floorLayer = map.getFloor(fnum);
floorLayer.removeHeatMap(heatmapInstance);

注意网页CSS样式里面的属性不能有透明,否则热力显示不正常


body和html里面的这个属性去掉 {
   background:transparent;
}