<template>
    <div id="container"></div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'heat3D',
    data() {
        return {
            heatData: [],
            center: {
                lat: '',
                lng: '',
            },
            map: null,
            heat: null,
        };
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        this.$nextTick(() => {
            window.draw = this.draw;
        });
    },
    methods: {
        draw(list, center) {
            this.heatData = list;
            if (center) {
                this.center = center;
            }
            if (!this.map) {
                this.initMap();
            } else {
                this.heat.setData(this.heatData);
            }
        },
        getData() {
            axios.get('http://dingdong.izouma.com/merchant/heatMap', {
                longitude: '118.734661',
                latitude: '31.981746',
            });
        },
        initMap() {
            //初始化地图
            this.map = new TMap.Map('container', {
                zoom: 12, //设置地图缩放级别
                pitch: 45, // 设置地图俯仰角
                center: new TMap.LatLng(this.center.lat, this.center.lng), //设置地图中心点坐标
            });
            //初始化热力图并添加至map图层
            this.heat = new TMap.visualization.Heat({
                max: 180, // 热力最强阈值
                min: 0, // 热力最弱阈值
                height: 40, // 峰值高度
                radius: 30, // 最大辐射半径
            })
                .addTo(this.map)
                .setData(this.heatData); //设置数据
        },
    },
};
</script>
<style lang='less' scoped>
#container {
    width: 100vw;
    height: 100vh;
}
</style>