您现在的位置: 首页 > 室内三维可视化SDK开发 > 开发指南

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

第一步，新建热力图对象实例（以下代码都要在三维场景加载完成后调用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;
}