cesium热力图（cesiumheatmap.js）

最新推荐文章于 2025-07-16 09:13:04 发布

原创

最新推荐文章于 2025-07-16 09:13:04 发布 · 1.6w 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何利用cesiumheatmap.js在Cesium框架中实现热力图。通过创建矩形，结合heatmap.js生成的canvas，将数据转换为3D地图坐标，从而在Cesium中展示热力图。步骤包括准备3D地图视图，初始化矩形坐标，创建cesiumheatmap对象，加载数据并展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无意中看到有个大神写了一个cesiumheatmap.js，顾名思义，就是在cesium框架中实现热力图

原理是创建矩形，用heatmap.js生成一个canvas，再将canvas贴到矩形中

这位大神将热力图的canvas大小通过传入的矩形坐标生成，将传入的数据也通过3D地图坐标处理成浏览器正常盒子的x,y坐标

可通过下载cesiumheatmap.js，引入到页面，再行使用

1、准备一个3D地图视图，并初始化一个矩形坐标json

var viewer = new Cesium.Viewer("viewer");
// 矩形坐标
var bounds = {
    west: -109.0, south: 30.0, east: -80.0, north: 50.0
};

2、初始化cesiumheatmap对象，传入相应的参数

// 初始化CesiumHeatmap
var heatMap =

200万优质内容无限畅学