创建一个简单的热力图实例

官方文档说明书

官方示例

 

1.安装 heatmapjs

// NPM 
npm i heatmapjs

// 或者 yarn 
yarn add heatmapjs

2.导入h337

import h337 from 'heatmapjs';

3.定义全局变量（在react中可用useRef做一个集合来存储）

let heatmapInstance;
    let texture;
    let points;
    let mesh;

4.定义温度颜色渐变

const TemperatureColorStops = {
        1.0: '#f00',
        0.9: '#e2fa00',
        0.6: '#33f900',
        0.3: '#0349df',
        0.0: '#0f00ff'
    };

5.创建热力图

// 创建热力图
    function addPluginHeatmap() {
 
        // 创建一个heatmap实例对象
        // “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
        // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
        heatmapInstance = h337.create( {
 
            container: document.getElementById( 'heatmap' ),
 
            //backgroundColor:'red',    // '#121212'    'rgba(0,102,256,0.2)'
            gradient: TemperatureColorStops,
            radius: 50,     // [0,+∞)
            opacity: .5,
            blur: '.8',
 
        } );
 
        setHeatMapData();//要在此时把数据赋给heatmapInstance
 
        // 获取 heatmap
        texture = new THREE.Texture( heatmapInstance._renderer.canvas );
        const material = new THREE.MeshLambertMaterial( {
 
            map: texture,
            transparent: true,
            opacity: 1
 
        } );
 
 
        mesh = new THREE.Mesh( new THREE.PlaneGeometry( 10, 10, 10 ), material );
        scene.add( mesh );
 
 
        // 更新图片
        if ( texture ) {
 
            texture.needsUpdate = true;
 
        }
 
    }

6. 设置热力图位置温度数据

该方法主要为heatmap设置数据，生成data的方法不唯一

示例1:

// 设置热力图位置温度数据
    function setHeatMapData() {
 
        //构建一些随机数据点,网页切图价格这里替换成你的业务数据
        points = [];
        let max = 0;
        const width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let len = 500;
        // 随机位置点设置温度值
        while ( len -- ) {
 
            var val = Math.floor( Math.random() * 25 + 10 );
            max = Math.max( max, val );
            var point = {
                x: Math.floor( Math.random() * width ),
                y: Math.floor( Math.random() * height ),
                value: val
            };
            points.push( point );
 
        }
 
        // 准备 heatmap 的数据
        const data = {
            max: max,
            data: points
        };
        //因为data是一组数据,web切图报价所以直接setData
        heatmapInstance.setData( data ); //数据绑定还可以使用
 
    }

示例二：

updateHeatMap(){
    let dataHeat = this.dataOrigin.map(item => {
        return {
            x: item.reserve.location.offsetX + 30,
            y: item.reserve.location.offsetY + 30,
            value: item.unit[2].value
        }
    })
    this.heatmap.setData(
        {
            data: dataHeat,
            max: 30,
            min: -10
        }
    )
},

 

config相关参数：h337.create(conofig)

 let config = {
        container: this.$refs.display, // 显示热力图的 dom 元素、或元素 id 名
        radius: 70, // 半径
        maxOpacity: 1, // 最大透明度 0 - 1.0
        minOpacity: 0, // 最小透明度 0 - 1.0
        blur: 0.6 // 边缘羽化程度 0.0 - 1.0
    }