《使用 Cesium 加载静态热力图显示的实现步骤》

Cesium——使用cesium 加载静态热力图显示

实现思路

要在 Cesium 中加载静态热力图，我们需要完成以下几个主要步骤：

1、计算热力图数据的四至范围和中心点。

2、初始化热力图并设置相关参数。

3、将数据添加到热力图中。

4、定位到热力图的位置并刷新场景。

代码实现

加载热力图的核心代码

以下是实现加载静态热力图的核心代码：
//调用
let data = [{x:112.11,y:34.11,value:11},{x:112.22,y:34.11,value:188}]
testLoc(data)

//-----------------加载热力图start------------------//function testLoc(newHeatList) {// 设定热力图的四至范围// 初始化边界值let bounds = {west: Infinity,east: -Infinity,south: Infinity,north: -Infinity,};// 检查数据是否为空if (newHeatList.length === 0) {console.error("数据为空，无法计算四至范围");bounds = null;} else {// 遍历数据，动态计算四至范围newHeatList.forEach((point) => {if (point.x < bounds.west) bounds.west = point.x;if (point.x > bounds.east) bounds.east = point.x;if (point.y < bounds.south) bounds.south = point.y;if (point.y > bounds.north) bounds.north = point.y;});// 格式化边界值，保留 6 位小数bounds.west = parseFloat(bounds.west.toFixed(6));bounds.east = parseFloat(bounds.east.toFixed(6));bounds.south = parseFloat(bounds.south.toFixed(6));bounds.north = parseFloat(bounds.north.toFixed(6));}// 调用函数计算中心点const centerPoint = calculateCenterPoint(newHeatList);// 初始化热力图let heatMap = CesiumHeatmap.create(viewer, // your cesium viewerbounds, // bounds for heatmap layer{// heatmap相应参数backgroundColor: "rgba(0,0,0,0)",radius: 25,maxOpacity: 0.5,minOpacity: 0,blur: 0.75,});let data = newHeatList;//设置最大最小值let valueMin = Math.min(...data.map((d) => d.value));let valueMax = Math.max(...data.map((d) => d.value));// 将数据添加到热力图heatMap.setWGS84Data(valueMin, valueMax, data);//定位到热力图的位置// viewer.zoomTo(viewer.entities);CameraFlyTo1(centerPoint.x, centerPoint.y, 20000); //改变默认初始地图高度// 强制刷新viewer.scene.requestRender();
}// 计算中心点
function calculateCenterPoint(points) {if (points.length === 0) {console.error("数据为空，无法计算中心点");return null;}// 初始化经度和纬度的总和let sumX = 0;let sumY = 0;// 遍历所有点，累加经度和纬度points.forEach((point) => {sumX += point.x;sumY += point.y;});// 计算平均值并保留 6 位小数const centerX = parseFloat((sumX / points.length).toFixed(6));const centerY = parseFloat((sumY / points.length).toFixed(6));return { x: centerX, y: centerY };
}
//----------------------------end热力图end----------------------//

代码解释

testLoc** 函数**：

首先，初始化热力图的四至范围（bounds），并检查输入数据是否为空。

如果数据不为空，遍历数据，动态计算四至范围，并将边界值保留 6 位小数。

调用 calculateCenterPoint 函数计算数据的中心点。

使用 CesiumHeatmap.create 方法初始化热力图，并设置相关参数，如背景颜色、半径、透明度等。

计算数据的最小值和最大值，并将数据添加到热力图中。

调用 CameraFlyTo1 函数定位到热力图的位置，并强制刷新场景。

calculateCenterPoint** 函数**：

检查输入数据是否为空，如果为空则输出错误信息并返回 null。

初始化经度和纬度的总和，遍历所有点，累加经度和纬度。

计算平均值并保留 6 位小数，返回中心点的坐标。

效果图

总结

通过以上步骤，我们可以在 Cesium 中加载静态热力图并进行显示。核心在于计算热力图数据的四至范围和中心点，初始化热力图并设置参数，将数据添加到热力图中，最后定位到热力图的位置并刷新场景。希望本文对你有所帮助，你可以根据自己的需求对代码进行修改和扩展。

请注意，上述代码中 viewer 和 CameraFlyTo1 函数需要根据实际情况进行定义和实现。在实际应用中，你可能还需要处理更多的错误情况和优化代码性能。

以上就是使用 Cesium 加载静态热力图显示的详细介绍，希望能帮助你在开发地理信息系统应用时更好地利用 Cesium 的功能。
最后感谢阅读，如有不足指出，请指正，谢谢。