heat map java_vue中使用heatmapjs（结合百度地图）

百度地图怎么使用就不说了，主要讲讲这个heatmap,直接贴代码了，注释挺详细的

//vue组件中

data(){

return{

heatmapOverlay:""

}

},

mounted() {

//引用heatmap.js

//你也可以在index.html中直接插个

let script = document.createElement("script");

script.type = "text/javascript";

script.src =

"http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js";

document.body.appendChild(script);

//创建地图，这个写自己的创建地图方法，请确认你的地图能加载出来

this.creatMap();

//一定要先让地图加载出来才加载热力图，我这里做演示直接写个setTimeout了

setTimeout(()=>{this.getHeatmap()},2000)

},

methods:{

getHeatmap() {

//请求雷达数据,雷达数据需要lng,lat,count 三种数据

this.$http

.get("../../../static/radar20.json")

.then(res => {

if (res.data.code == "success") {

console.log("获取radar成功");

var bigdata = res.data.data;

//关键是下面的三行

//其中map是new BMap.Map()创建的地图实例,其他的热力图属性(radius，opacity这种)可以在百度地图接口实例中调试体验，http://lbsyun.baidu.com/jsdemo.htm#c1_15

this.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 40,opacity:0.4});

map.addOverlay(this.heatmapOverlay);

this.heatmapOverlay.setDataSet({ data: bigdata, max: 20 });

} else {

console.log("err");

}

})

.catch(err => {

console.log(err);

});

},

}

效果图：