热力图播放跟随客流图表联动

热力图的实现就不细说了 这里主要讲 热力图播放与echarts客流图表联动实现逻辑

最终实现效果如下

热力图echarts播放

主要逻辑

点击播放按钮时 清空右侧图表数据，热力图开始从0点播放，接口请求回来后 渲染当前时间点热力图，一秒后 时间点加一，调下一次接口，判断当前时间点是否大于23点 如果是 就表示热力图播放完毕，每播放一次的同时 图表数据就添加一条对应时间点的数据 ，具体代码如下

 //点击播放按钮
     playClick=()=>{
        let _this=this
        confirm({
            content: '小时级客流统计口径为：居住，工作，到访人口的去重总数。',
            width: 450,
            onOk() {
                store.dispatch({//禁用其他操作
                   type:'insight',
                   data:{
                    contConTmask:true
                   }
                })
                store.dispatch({
                    type: 'insightCharts', data: {
                        id: '000101',
                        loading: false,
                        data: {//这里将个个时候数据赋值为null避免播放时图表移动
                            weekData:{
                                chartData:{'0时':null,'1时':null,'2时':null,'3时':null,'4时':null,'5时':null,'6时':null,'7时':null,'8时':null,'9时':null,'10时':null,'11时':null,'12时':null,'13时':null,'14时':null,'15时':null,'16时':null,'17时':null,'18时':null,'19时':null,'20时':null,'21时':null,'22时':null,'23时':null,},
                            },
                            workData:{
                                chartData:{'0时':null,'1时':null,'2时':null,'3时':null,'4时':null,'5时':null,'6时':null,'7时':null,'8时':null,'9时':null,'10时':null,'11时':null,'12时':null,'13时':null,'14时':null,'15时':null,'16时':null,'17时':null,'18时':null,'19时':null,'20时':null,'21时':null,'22时':null,'23时':null,},
                            },
                        }
                    },
                });
                GOD.weekWorkData={weekData:{//这里将个个时候数据赋值为null避免播放时图表移动
                    chartData:{'0时':null,'1时':null,'2时':null,'3时':null,'4时':null,'5时':null,'6时':null,'7时':null,'8时':null,'9时':null,'10时':null,'11时':null,'12时':null,'13时':null,'14时':null,'15时':null,'16时':null,'17时':null,'18时':null,'19时':null,'20时':null,'21时':null,'22时':null,'23时':null,},
                },
                workData:{
                    chartData:{'0时':null,'1时':null,'2时':null,'3时':null,'4时':null,'5时':null,'6时':null,'7时':null,'8时':null,'9时':null,'10时':null,'11时':null,'12时':null,'13时':null,'14时':null,'15时':null,'16时':null,'17时':null,'18时':null,'19时':null,'20时':null,'21时':null,'22时':null,'23时':null,},
                },}
                _this.setState({
                    isplay:'pause',
                    SliderValue:0//每次从0开始播放 可根据需求更改
                },()=>{_this.playHotData()})//该方法是播放热力图
                
            },
            okText:"确认",
            cancelText:"取消",
            onCancel() {},
          });
        
    }


//获取日客流播放数据
     playHotData=(val)=>{
        let _this=this
        const {insight}=store.getState()
        const { uuId }=insight
        var timer
        if(GOD.dayWeekType==undefined){
            GOD.dayWeekType='workData'
        }
        let dateType=GOD.dayWeekType==='workData'?0:1
        let playTime
        let playParams={...GOD.playParams}
                //这里表示播放日客流
            playTime=this.state.SliderValue
            let params={
                uuId,
                playTime,
                dateType,
                ...playParams
            }
            this.setState({//右侧展示缩回
                tabWidth: true
            })
            hotPlay(params).then(res=>{//调热力图接口，携带参数当前几点
                if(res.data.resultCode==200){
                    let _heatData = res.data.data.map((heatItem) => {
                        const [lon, lat] = wgs84togcj02(heatItem.lon, heatItem.lat);//经纬度转化，根据自己项目经纬度决定要不要转化，此处84转高德
                        return {
                            lat,
                            lon,
                            value: Number(heatItem.value)
                        }
                    })
                    handleHeatMap({data: _heatData});//该方法是页面渲染热力图所用
                    _this.playEchatrs(this.state.SliderValue)//调用播放图表方法，继续添加一条数据
                    if(GOD.setTimer){
                      // 清除延时器, 并置空
                      window.clearTimeout(GOD.setTimer);
                      GOD.setTimer = null
                    }
                    GOD.setTimer=setTimeout(() => {//接口回来一秒后调用下一次接口，避免同时调用数据混乱
                        _this.setState({
                            SliderValue:this.state.SliderValue+=1
                        },()=>{
                            if(this.state.SliderValue<=23){//判断当前是不是23点 如果是 就表示播放完毕，反之继续播放下一条
                                 _this.playHotData()
                            }else{
                                _this.setState({
                                    isplay:'play'
                                })
                                store.dispatch({
                                    type:'insight',
                                    data:{
                                     contConTmask:false
                                    }
                                 })
                                 confirm({
                                    content: '客流热力播放完毕，点击”确定“将回到人口热力图，“取消”留在当前客流热力图',
                                    onOk() {
                                        if(GOD.setTimer){
                                          // 清除延时器, 并置空
                                          window.clearTimeout(GOD.setTimer);
                                          GOD.setTimer = null
                                        }
                                        let {insight}=store.getState()
                                        let {chartsDataAll}=insight
                                        handleHeatMap({data: chartsDataAll['000007'].data});
                                        
                                    },
                                    okText:"确定",
                                    cancelText:"取消",
                                    onCancel() {},
                                  });
                            }
                        })
                    }, 1000);
                   
                    
                }else if(res.data.resultCode==204){//204为当前区域无客流数据 不播放
                    message.error('当前区域暂无数据')
                    store.dispatch({
                        type:'insight',
                        data:{
                         contConTmask:false
                        }
                     })
                     _this.setState({
                        SliderValue:23,
                        isplay:'play'
                    })
                    let {insight,}=store.getState()
                    let {weekWorkData}=insight
                    store.dispatch({//客流图表回归初始状态
                        type: 'insightCharts', data: {
                            id: '000101',
                            loading: false,
                            data: weekWorkData
                        },
                    });
                }else{
                    message.error('播放失败请重新播放')
                    store.dispatch({
                        type:'insight',
                        data:{
                         contConTmask:false
                        }
                     })
                     _this.setState({
                        SliderValue:23,
                        isplay:'play'
                    })
                    let {insight}=store.getState()
                    let {chartsDataAll,weekWorkData}=insight
                     handleHeatMap({data: chartsDataAll['000007'].data});
                    store.dispatch({//客流图表回归初始状态
                        type: 'insightCharts', data: {
                            id: '000101',
                            loading: false,
                            data: weekWorkData
                        },
                    });
                }
            }).catch(res=>{
                message.error('播放失败请重新播放')
                        store.dispatch({
                            type:'insight',
                            data:{
                             contConTmask:false
                            }
                         })
                         _this.setState({
                            SliderValue:23,
                            isplay:'play'
                        })
                        let {insight}=store.getState()
                        let {chartsDataAll,weekWorkData}=insight
                        handleHeatMap({data: chartsDataAll['000007'].data});
                        store.dispatch({
                            type: 'insightCharts', data: {
                                id: '000101',
                                loading: false,
                                data: weekWorkData
                            },
                        });
            })
        
    }