三维可视化场景绘制热力图
方法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;
}