基于Cesium实现加载显示热力图
更新时间：2022年06月22日 11:14:22 作者：王+V
这篇文章主要介绍了如何利用Cesium实现加载显示热力图，文中的示例代码讲解详细，对我们学习或工作有一定的帮助，需要的可以参考一下
我是一个小白，到目前为止对于3D方面的东西不是特别的懂，所以说，对于cesium使用的并不是特别的好，可以说根本不会吧，所以说也是在一点一点摸索，一点一点学习的过程中，所以说有些博文写的可能不是准确的，只是用来记录一下学习过程，错了别喷我啊！！
CesiumHeatmap
首先嘞，绘制热力图需要有一个工具，就是使用 CesiumHeatmap 这个工具，然后呢，下面是他的一个github的地址。
下载下来放到项目里面就可以了。
我把他放到了这里面嘞。
然后在项目里面引入一下。
<script src="./CesiumHeatmap/CesiumHeatmap.js"></script>
编写案例
// 测试热力图
function addHeatMap() {
let bounds = {
west: 106.243911,
east: 106.270811,
south: 29.244545,
north: 29.289995,
};
let heatMap = CesiumHeatmap.create(
viewer, // your cesium viewer
bounds, // bounds for heatmap layer
{
// heatmap.js options go here
// maxOpacity: 0.3
gradient: { // the gradient used if not given in the heatmap options object
'.3': '#d9e7fc',
'.65': '#2a7aed',
'.8': '#fbd801',
'.95': '#18c3a1'
},
},
);
let data = [
{ x: 106.254153, y: 29.2883939, value: 76 },
{ x: 106.2654284, y: 29.2854935, value: 63 },
{ x: 106.265005, y: 29.284573, value: 1 },
{ x: 106.264001, y: 29.283456, value: 21 },
{ x: 106.263219, y: 29.282181, value: 28 },
{ x: 106.262788, y: 29.279673, value: 41 },
{ x: 106.2632087, y: 29.2742665, value: 75 },
{ x: 106.2505158, y: 29.28138, value: 76 },
{ x: 106.2531094, y: 29.2833591, value: 100 },
{ x: 106.2531093, y: 29.2844560, value: 80 },
{ x: 106.253293, y: 29.284826, value: 1 },
{ x: 106.250099, y: 29.285638, value: 21 },
{ x: 106.2469149, y: 29.2864109, value: 28 },
{ x: 106.254119, y: 29.276274, value: 41 },
];
let valueMin = 0;
let valueMax = 50;
heatMap.setWGS84Data(valueMin, valueMax, data);
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(106.254153, 29.2742665, 2e3),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: 0.0,
},
});
}
效果就是这个样子。
以上就是基于Cesium实现加载显示热力图的详细内容，更多关于Cesium显示热力图的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Qt6基于Qml的文件对话框演示,包括打开单个文件配置和打开多个文件配置及保存文件配置的方法，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
很多项目中使用树来展示层级关系，还有些树是为了选中项然后其他地方调用选中项。今天脚本之家小编给大家带来了Bootstrap 树控件使用经验分享，需要的朋友参考下吧2017-11-11
document.all与getElementById、getElementsByName、getElementsByT
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。2008-12-12
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
这篇文章主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动，右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了js HTML5上传示例代码完整版,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了微信小程序实现搜索指定景点周边美食、酒店的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家详细介绍了小程序实现多选框功能，小程序实现单选全选多选删除操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
这篇文章主要介绍了JavaScript语法高亮库highlight.js用法,详细分析了highlight.js的下载、调用及具体使用技巧,需要的朋友可以参考下2016-11-11
这篇文章主要给大家介绍了关于js前端面试之同步与异步问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
用javascript实现一下所谓的动态渐变，考虑动态原因就不上图了，我来简单介绍下思路2014-05-05
最新评论