蜂窝热力图

蜂窝热力图将离散的数据点以六边形区域进行聚合,根据落入区域内的数据点数量渲染不同颜色的高度的六边形棱柱



创建蜂窝热力图

//创建蜂窝热力图
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 = '';
    }
});

查看示例

这篇文章对您解决问题是否有帮助?

已解决
未解决