绘制热力图开发支持-室内园区城市三维可视化引擎室内导航及制作|易景空间三维可视化云平台ESMap

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

热力图支持根据多边形标注绘制，并且支持根据楼层地板绘制。
在线演示访问地址：热力图应用示例

根据多边形标注绘制热力图

必须要触发"map.on('loadComplete')"场景加载完成后的时机调用

// 第一步：创建一个多边形标注，并添加到三维场景中
rectangleMarker = new esmap.ESPolygonMarker({...})
// 添加多边形标注
polyLayer.addMarker(rectangleMarker);

// 配置渐变色域
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*(室内模式可忽略bid属性)
    radius: 60,             // 热点半径
    opacity: 0.8,           // 热力图透明度
    max: 100,               // 热力点value的最大值
    maxSize: 2048,          // 热力图画布分辨率
    gradient: gradient,     // 渐变色值
    duration: 1,            // 默认自带动画1秒过渡
})

// 第三步：添加热力图数据
rectangleMarker.addHeatPoint({
    x: 13496140.383561742,
    y: 3640230.05635368,
    value: 10       // 热力值
});
// rectangleMarker.randomHeatPoints(200); // 支持生成随机坐标位置的热力点

// 第四步完成：添加好热力点数据后，需要更新绘制热力图
rectangleMarker.updateHeatMap()

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

initHeatMap参数说明:

参数	说明	类型	可选值	默认值	是否必填
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	否
duration	过渡动画时间	Number	——	1	否

根据楼层边界绘制热力图

如下图所示，需要通过API正确的获取楼层边界数据，再绘制热力图。

// 获取一楼楼层的边界数据
const fnum = 1     // 设置为1楼的楼层
const boundData = map.getBuildingById(0).getFloorBounds(fnum)[0].points

// 创建贴合楼层边界的多边形标注
rectangleMarker = new esmap.ESPolygonMarker({
    // ... 参考多边形标注参数
    points: boundData,  // 点集数组
})
// 添加多边形标注到标注层
polyLayer.addMarker(rectangleMarker);

// 在多边形标注上绘制热力图
rectangleMarker.initHeatMap({
    bid: building.id, // *绑定到需要显示的建筑id*(室内模式可忽略bid属性)
    radius: 60,     // 热点半径
    opacity: 0.8,   // 热力图透明度
    max: 100,       // 热力点value的最大值
    maxSize: 2048,  // 热力图画布分辨率
    duration: 1,    // 默认自带动画1秒过渡
})

// 添加热力点
rectangleMarker.addHeatPoint({
    x: 13496140.383561742,
    y: 3640230.05635368,
    value: 10 // 热力值
});

// 更新绘制热力图
rectangleMarker.updateHeatMap()

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

initHeatMap参数说明:

参数	说明	类型	可选值	默认值	是否必填
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	否
duration	过渡动画时间	Number	——	1	否

热力图清除和销毁方法：

数据清除方法：

// 1.先执行清除热力点数据
rectangleMarker.clearHeatPoints()
// 2.再执行清除后更新画布
rectangleMarker.updateHeatMap()

// 清除后可以调用addHeatPoint和updateHeatMap重新绘制热力图

销毁方法：

// 销毁热力图画布
rectangleMarker.clearHeatMap()

// 销毁后需要调用initHeatMap重新创建热力图

热力图常用方法：

热力图-添加热力点

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

// 添加完热力点后，更新渲染
rectangleMarker.updateHeatMap()

热力图-生成随机热力点

// 随机位置生成热力值为200的热力点
rectangleMarker.randomHeatPoints(200); 

// 添加完热力点后，更新渲染
rectangleMarker.updateHeatMap()

热力图-配合透明楼层

// 当渲染的热力图被场景地板模型遮挡，可配合透明楼层API实现穿透显示
esmap.ESMapUtil.setFloorAlpha({
    bid: building.id,    // *绑定到需要显示的建筑id*(室内模式可忽略bid属性)
    fnum: 1,             // 指定楼层
    alpha: 0.6,          // 透明度(范围0-1，亦支持传递false还原)
    time: 1,             // 透明过渡时间（单位/秒）
    noOcclusion: true,   // 开启透明不遮挡其他元素
})

热力图-注意事项

// 网页CSS样式里面的属性不能有透明,否则热力显示不正常
// 若body和html里面的有这个属性必须要去掉
{
    background: transparent;
}