第47节：cesium 热力图效果（含源码+视频）

**第47节：Cesium 热力图效果**

在前面的章节中，我们已经学习了如何使用 Cesium 库创建3D 地球场景。然而，仅仅展示地理信息是不够的，我们还需要将数据与视觉效果结合起来，使其更易于理解和分析。这就是热力图（Heatmap）的作用。

在本节中，我们将学习如何使用 Cesium 库创建热力图，并展示其效果。

###什么是热力图？

热力图是一种用于表示数据密度的可视化方法。它通过颜色的变化来表示数据点的密度，通常用来表示空间分布的数据，如人口、气温等。

### Cesium 热力图Cesium 库提供了一个名为 `HeatmapLayer` 的类，可以轻松地创建热力图。下面是使用该类的基本步骤：

1. 创建一个 `HeatmapLayer` 实例，传入数据源和其他参数。
2. 将热力图层添加到场景中。

### 源码示例

javascript// 导入必要的库import * as Cesium from 'cesium';
import 'cesium/src/SceneMode';

// 创建一个热力图层const heatmapLayer = new Cesium.HeatmapLayer({
 // 数据源（本例中使用随机数）
 data: Array(100).fill(null).map(() => ({
 latitude: Math.random() *90 -45,
 longitude: Math.random() *180 -90,
 value: Math.random(),
 })),
 // 颜色渐变 colorGradient: new Cesium.ColorGradient({
 minimumValue:0,
 maximumValue:1,
 colors: [
 new Cesium.Color(255,0,0), // 最小值颜色（红色）
 new Cesium.Color(0,255,0), // 中间值颜色（绿色）
 new Cesium.Color(0,0,255), // 最大值颜色（蓝色）
 ],
 }),
});

// 将热力图层添加到场景中viewer.scene.addLayer(heatmapLayer);

javascript// 导入必要的库import * as Cesium from 'cesium';
import 'cesium/src/SceneMode';

// 创建一个热力图层const heatmapLayer = new Cesium.HeatmapLayer({
 // 数据源（本例中使用随机数）
 data: Array(100).fill(null).map(() => ({
 latitude: Math.random() *90 -45,
 longitude: Math.random() *180 -90,
 value: Math.random(),
 })),
 // 颜色渐变 colorGradient: new Cesium.ColorGradient({
 minimumValue:0, // 最小值颜色（红色）
 maximumValue:1, // 中间值颜色（绿色）
 colors: [
 new Cesium.Color(255,0,0), // 最大值颜色（蓝色）
 new Cesium.Color(0,255,0),
 new Cesium.Color(0,0,255),
 ],
 }),
});

// 将热力图层添加到场景中viewer.scene.addLayer(heatmapLayer);