您的位置：首页 > Web前端 > Vue.js

vue项目实现 cesium + heatmap.js 实现在三维地球上绘制热力图

2019-04-11 11:05 3463 查看

做个热力图，刚开始做了大半天，都没有成功，第二天上午来到公司，很快就做出来了，特记录一下。

效果是这样的：
主要步骤是：
1，下载heatmap.js。地址是：https://github.com/pa7/heatmap.js
把项目zip下载下来找到build中的heatmap.js放到自己的项目中

我使用的时vue单页项目，只有一个html。说一下开始走的弯路。开始是用vue引入js的方式，先是在main.js中用import引入，报错h337这个对象为定义，后来又在.vue页面中中单独import还是报这个错。最后是在index.html中用script标签引入，然后直接在.vue页面中使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-cesium</title>
<!--引入热力图js-->
<script src="static/js/heatmap.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

然后在页面中使用

<template>
<div>
<div class="body-content">
<div id="cesiumContainer"></div>
<div id="heatmap" v-show="false"></div>
</div>
</div>
</template>

<script>
/**
* @Author shizc
* 热力图效果
*/
import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'
export default {
name: "cesiumHotMap",
data(){
return{
viewer:{}
}
},
mounted(){
var len = 300;
var points = [];
var max = 100;
var width = 600;
var height = 400;

var latMin = 28.364807;
var latMax = 40.251095;
var lonMin = 94.389228;
var lonMax = 108.666357;

var dataRaw = [];
for (var i = 0; i < len; i++) {
var point = {
lat: latMin + Math.random() * (latMax - latMin),
lon: lonMin + Math.random() * (lonMax - lonMin),
value: Math.floor(Math.random() * 100)
};
dataRaw.push(point);
}
//
for (var i = 0; i < len; i++) {
var dataItem = dataRaw[i];
var point = {
x: Math.floor((dataItem.lat - latMin) / (latMax - latMin) * width),
y: Math.floor((dataItem.lon - lonMin) / (lonMax - lonMin) * height),
value: Math.floor(dataItem.value)
};
max = Math.max(max, dataItem.value);
points.push(point);
}

var heatmapInstance = h337.create({
container: document.querySelector('#heatmap')
});

var data = {
max: max,
data: points
};
//
heatmapInstance.setData(data);

var viewer = new Cesium.Viewer('cesiumContainer');

viewer._cesiumWidget._creditContainer.style.display = "none";

var canvas = document.getElementsByClassName('heatmap-canvas');
console.log(canvas);
viewer.entities.add({
name: 'heatmap',
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),
material: new Cesium.ImageMaterialProperty({
image: canvas[0],
transparent: true
})

}
});

viewer.zoomTo(viewer.entities);
}
}
</script>

<style>
#heatmap{
width: 500px;
height: 500px;
}
</style>

参考的是这位朋友代码：https://zhuanlan.zhihu.com/p/31497328
主要思路是用heatmap.js画图，然后用entity添加到地球上
我遇到的主要问题是不能正确的引入heatmap.js。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航