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

做个热力图，刚开始做了大半天，都没有成功，第二天上午来到公司，很快就做出来了，特记录一下。效果是这样的：主要步骤是：1，下载heatmap.js。地址是：https://github.com/pa7/heatmap.js把项目zip下载下来找到build中的heatmap.js放到自己的项目中我使用的时vue单页项目，只有一个html。说一下开始走的弯路。开始是用vue引入js的方式...

轩辕问天

8458人浏览 · 2019-04-11 11:05:53

轩辕问天 · 2019-04-11 11:05:53 发布

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

效果是这样的：在这里插入图片描述
主要步骤是：
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。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^