方式一: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
暂无评论内容