蜂窝热力图
蜂窝热力图将离散的数据点以六边形区域进行聚合,根据落入区域内的数据点数量渲染不同颜色的高度的六边形棱柱
创建蜂窝热力图
//创建蜂窝热力图
var hexagon = new TMap.visualization.Hexagon({
radius: 1000, //六边形中心点到端点的距离(半径)
extrudable: true,//六边形是否可拔起
colorList: [
'rgb(1, 152, 189)',
'rgb(73, 227, 206)',
'rgb(216, 254, 181)',
'rgb(254, 237, 177)',
'rgb(254, 173, 84)',
'rgb(209, 55, 78)'
],//颜色层级
heightRange:[1, 5000], // 高度变化区间
showRange:[1, 100] //蜂窝聚合数据显示区间
}).addTo(map);
hexagon.setData(data);//设置数据
// 数据聚合之后才能够真正获取值域范围
hexagon.setShowRange(hexagon.getValueRange());
绑定事件
使用on方法添加绑定事件,通过事件对象可以获取相关事件信息代码示例:
// 绑定事件
hexagon.on('click', evt => {
var aggregator = evt && evt.detail && evt.detail.aggregator;
if (aggregator) {
infoDom.style.display = 'block';
infoDom.innerHTML = '原始数据索引:' + aggregator.indexes.join() + '; 聚合热力值:' + aggregator.count;
} else {
infoDom.style.display = '';
}
});
这篇文章对您解决问题是否有帮助?
已解决
未解决