三维可视化场景绘制热力图

方法1：通过多边形标注初始化热力图(推荐方法)

第一步，创建一个多边形标注 （以下代码都要在 map.on('loadComplete') 中调用） 

// 创建一个多边形标注，并添加到三维场景中
rectangleMarker = new esmap.ESPolygonMarker({...})
 
var building = map.getBuildingById('test666'); // 根据ID获取建筑对象
var floor = building.getFloor(1);              // 获取第一层的楼层对象

// 获取或者新建一个name为'mypoly'的多边形标注层    
var layer = floor.getOrCreateLayerByName('mypoly', esmap.ESLayerType.POLYGON_MARKER);

// 添加多边形标注
layer.addMarker(rectangleMarker);

关于new esmap.ESPolygonMarker({...})，多边形标注方法请参考 绘制多边形标注 页面

第二步，初始化热力图

var gradient = { 0.45: 'rgb(201,135,255)', 0.65: 'rgb(155,49,255)', 0.95: 'yellow', 1.0: 'rgb(157,53,255)' }

rectangleMarker.initHeatMap({
    bid: building.id,   // *绑定到需要显示的建筑id*
    radius: 60,         // 热点半径
    opacity: 1,         // 热力图透明度
    mapOpacity: 0.8,    // 三维场景楼层整体透明度
    max: 100,           // 热力点value的最大值
    maxSize: 2048,      // 热力图画布分辨率
    gradient: gradient  // 渐变色值
})
初始化参数说明:
参数 说明 类型 可选值 默认值 是否必填
radius 热力点半径 Number —— 30 否
opacity 透明度 Number 0-1 1 否
mapOpacity 三维场景楼层整体透明度 Number 0-1 1 否
max 热力点value的最大值 Number —— —— 否
maxSize 热力图画布分辨率 Number —— 2048 否
gradient 渐变色值，可自定义 Object —— 0.45: rgb(0,0,255)0.55: rgb(0,255,255)0.65: rgb(0,255,0)0.95: yellow: rgb(255,0,0) 否
backgroundColor 热力图背景颜色 String —— #FFFFFF 否

第三步，添加热力图数据

// 第一种方法，添加热力点
rectangleMarker.addHeatPoint({
    x: 13496140.383561742,
    y: 3640230.05635368,
    value: 10   // 热力值
});

// 第二种方法，您也可以生成随机热力图数据，参数为生成热力点数量
rectangleMarker.randomHeatPoints(200);

第四步，更新热力图

// 添加好热力点数据后，需要更新绘制热力图
rectangleMarker.updateHeatMap()

清除热力图数据

// 清除热力点，可以调用addHeatPoint重新绘制热力图
rectangleMarker.clearHeatPoints()

方法2：通过楼层初始化热力图

第一步，新建热力图对象实例 （以下代码都要在 map.on('loadComplete') 中调用） 

var gradient = { 0.45: 'rgb(201,135,255)', 0.65: 'rgb(155,49,255)', 0.95: 'yellow', 1.0: 'rgb(157,53,255)' }
var heatmapInstance = esmap.ESHeatMap.create(map, {
    bid: building.id,    // *绑定到需要显示的建筑id*
    radius: 20,          // 热力点半径
    opacity: 0.5,        // 透明度
    max: 100,            // 热力点value的最大值
    maxSize: 2048,       // 热力图画布分辨率
    gradient: gradient,  // 自定义渐变色
    mapOpacity: 0,       // 设置三维场景楼层整体透明度
    backgroundColor: '#FFFFFF', // 热力图背景颜色，默认白色
});
        
var fnum = building.getFloorNumByName('F1'); // 通过楼层名称来获取三维场景内部楼层层数
heatmapInstance.setFloorNum(fnum);      // 将热力图设置到某个楼层上
初始化参数说明:
参数 说明 类型 可选值 默认值 是否必填
radius 热力点半径 Number —— 30 否
opacity 透明度 Number 0-1 1 否
mapOpacity 三维场景楼层整体透明度 Number 0-1 1 否
max 热力点value的最大值 Number —— —— 否
maxSize 热力图画布分辨率 Number —— 2048 否
gradient 渐变色值，可自定义 Object —— 0.45: rgb(0,0,255)0.55: rgb(0,255,255)0.65: rgb(0,255,0)0.95: yellow: rgb(255,0,0) 否
backgroundColor 热力图背景颜色 String —— #FFFFFF 否

第二步，添加热力图数据

// 第一种方法：一次添加一个热力点，在addPoint方法中，前两个参数对应xy坐标，第三个参数是热力点数值
heatmapInstance.addPoint(13496140.383561742, 3640230.05635368, 10);
heatmapInstance.addPoint(13496150.383561742, 3640235.05635368, 20);

// 第二种方法：一次添加多个热力点,数组的对象中xy对应坐标，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 = building.getFloor(fnum);       // fnum为楼层层数
floorLayer.applyHeatMap(heatmapInstance);

清除热力图

// 清除画布
heatmapInstance.clear()

// 清除热力点
heatmapInstance.clearPoints()

// 清除某一层热力图，fnum为楼层数
heatmapInstance.disposeHeatMap(fnum);  
                
// 销毁热力图实例
var floorLayer = building.getFloor(fnum)
floorLayer.removeHeatMap(heatmapInstance)

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

// 若body和html里面的有这个属性必须要去掉 
{
    background: transparent;
}