本文介绍如何在Cesium中展示热力图。目前比较常用的热力图插件是heatmap.js，实现的原理是使用heatmap.js生成热力图后，再将图贴到Cesium的相应位置。
准备工作：
1. 首先下载heatmap.js插件，官网地址：https://www.patrick-wied.at/static/heatmapjs。
2. 然后初始化Cesium，准备展示环境
主要步骤：
1. 确定热力图画布的宽高
2. 根据热力图显示的经纬度，将点映射到画布对应的位置，并创建热力点
3. 初始化热力图对象h337，并设置热力点数据
4. 创建Cesium对象，并将热力图贴到Cesium对象相应的位置
效果图：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>热力图</title>
<script src="../Build/Cesium/Cesium.js"></script>
<!--热力图官网 https://www.patrick-wied.at/static/heatmapjs/-->
<script src="./js/heatmap.min.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
}
.div-heatmap {
width: 600px;
height: 400px;
display: none;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<!--热力图容器-->
<div class="div-heatmap"></div>
<script>
var points = [];
var width = 600;
var height = 400;
var max = 100;
// 热力图经纬度范围
var latMin = 28.364807;
var latMax = 40.251095;
var lonMin = 94.389228;
var lonMax = 108.666357;
// 根据热力图图片范围，生成随机热力点和强度值
for (var i = 0; i < 300; i++) {
var lon = lonMin + Math.random() * (lonMax - lonMin);
var lat = latMin + Math.random() * (latMax - latMin);
var value = Math.floor(Math.random() * max);
var point = {
x: Math.floor((lat - latMin) / (latMax - latMin) * width),
y: Math.floor((lon - lonMin) / (lonMax - lonMin) * height),
value: value
};
points.push(point);
}
// 创建热力图
var heatmapInstance = h337.create({
container: document.querySelector('.div-heatmap')
});
var data = {
max: max,
data: points
};
heatmapInstance.setData(data);
// 将热力图添加到球体上(生成的热力图canvas元素类名为heatmap-canvas)
var canvas = document.getElementsByClassName('heatmap-canvas');
// 更换默认Ion的accesstoken，初始化Cesium
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjhlMzE4MS1iNTU1LTRmMWYtYjQ5MC03Nzg1YzMwNTAwMWMiLCJpZCI6MTk0MzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzU1Mjc1NDV9.PTf_VP102asNYU199ovMqgITS_2KCHtEP54TXLe7y5I';
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
timeline: false
});
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>
</body>
</html>欢迎分享交流，转载请注明出处：WithCoder » 在Cesium中展示热力图heatmap
Cesium中的常用坐标系及相互转换
在Cesium中展示热力图heatmap
解决Cesium1.64.0对gltf2
Cesium是什么