网格热力图

网格热力图将离散的数据点以正方形区域进行聚合，根据落入区域内的数据点数量渲染不同颜色的高度的正方形棱柱。

创建网格热力图

//创建网格热力图
var grid =new TMap.visualization.Grid({
    sideLength: 1000, // 设置网格边长
    extrudable: true, // 网格是否可拔起
    colorList: [
        'rgb(11, 152, 159)',
        'rgb(73, 207, 206)',
        'rgb(216, 254, 181)',
        'rgb(255, 237, 177)',
        'rgb(254, 173, 84)',
        'rgb(239, 55, 78)'
    ],//颜色层级
    heightRange:[1, 3000], // 高度变化区间
    showRange:[1, 100] // 聚合数据显示区间
 
}).addTo(map);
 
grid.setData(data);//设置数据
 
// 数据聚合之后才能够真正获取值域范围
grid.setShowRange(grid.getValueRange());

参考手册 | 查看示例

绑定事件

使用on方法添加绑定事件，通过事件对象可以获取相关事件信息代码示例：

// 绑定事件
grid.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 = '';
    }
});

查看示例