vue3中使用heatmap.js实现热力图

方式一:npm安装

安装

npm install heatmap.js

引用

import h337 from 'heatmap.js';

使用

h337.create({
    container: document.getElementById("heatmap"),
     blur: '.8',
     radius: 30
})

但是这种方式会报错,需要到node_modules/heatmap.js/build/heatmap.js文件下,找到527行注释掉  // img.data = imgData;。(我注释了重新编译还是报这个错,所以我选择方法三)

方式二:本地加载

文件下载地址github.com/pa7/heatmap.js/blob/master/build/heatmap.js 将源码js移动到项目当中,再来更改源码,在文件中找到527行下列代码注释掉img.data = imgData

//img.data = imgData
this.ctx.putImageData(img,x,y);
this._renderBoundaries = [1000,1000,0,0];

方式三:

在index.html引入

<script src="https://cdn.bootcdn.net/ajax/libs/heatmap.js/2.0.0/heatmap.min.js"></script>

然后在页面上使用

declare global {
  interface Window {
    h337: any
  }
}

热力图实现的方式

heatmap.js生成canvas图,然后将canvas图作为贴图盖到3d场景中。有个主要的点就是canvas坐标系和3d右手坐标系的y轴是相反的

<template>
  <div class="layout-heatmap">
    <div ref="mapTestRef" id="mapTestOrigin" style="height: 200px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 将 heatmap.js 的全局变量 h337 显式声明为一个变量
declare global {
  interface Window {
    h337: any
  }
}

// 使用ref创建响应式数据
const heatMapIns = ref(null)
const pointsArr = ref([
  { x: 267, y: 1, value: 123 }, // 调整坐标
  { x: 43, y: 87, value: 392 }, // 调整坐标
  { x: 36, y: 24, value: 1110 }, // 调整坐标
  { x: 267, y: 84, value: 600 }, // 调整坐标
  { x: 242, y: 77, value: 800 } // 调整坐标
])
const mapTestRef = ref(null)

const initHeatMap = () => {
  heatMapIns.value = window.h337.create({
    container: mapTestRef.value,
    gradient: {
      0: 'rgb(0,0,255)', // 蓝色
      0.1: 'rgb(0,0,200)', // 深蓝
      0.3: 'rgb(0,255,0)', // 绿色
      0.5: 'rgb(255,255,0)', // 黄色
      0.8: 'rgb(255,128,0)', // 橙色
      1: 'rgb(255,0,0)' // 红色
    },
    maxOpacity: 1,
    minOpacity: 0,
    blur: 0.75
  })

  const dataFormatter = {
    max: 1000,
    min: 0,
    data: pointsArr.value
  }
  heatMapIns.value.setData(dataFormatter)
}

onMounted(() => {
  initHeatMap()
})
</script>

<style scoped>
.layout-heatmap {
  position: absolute;
  top: 100px;
  left: 100px;
  background: #fff;
  width: 30vw;
  height: 200px;
  z-index: 99;
}
</style>

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容