Cesium中如何实现热力图

这篇文章主要介绍了Cesium中如何实现热力图，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联建站专业为企业提供集安网站建设、集安做网站、集安网站设计、集安网站制作等企业网站建设、网页设计与制作、集安企业网站模板建站服务，10多年集安做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

在Cesium上根据点，可以显示出热力图，在网上有开源的代码，具体的参考网址如下：

https://github.com/danwild/CesiumHeatmap

使用方式如下：

       function testLoc(){

               //设定热力图的四至范围

let bounds = {

west: 116.13833844,

east: 116.13956899,

south: 37.43582929,

north: 37.43706916

};

// i初始化热力图

let heatMap = CesiumHeatmap.create(

viewer, // your cesium viewer

bounds, // bounds for heatmap layer

{

// heatmap.js options go here

maxOpacity: 0.75

}

);

// 设置一些随机的效果，这个可根据实际数据进行开发

let data = [{

"x": 116.1383442264,

"y": 37.4360048372,

"value": 76

}, {

"x": 116.1384363011,

"y": 37.4360298848,

"value": 63

}, {

"x": 116.138368102,

"y": 37.4358360603,

"value": 1

}, {

"x": 116.1385627739,

"y": 37.4358799123,

"value": 21

}, {

"x": 116.1385138501,

"y": 37.4359327669,

"value": 28

}, {

"x": 116.1385031219,

"y": 37.4359730105,

"value": 41

}, {

"x": 116.1384127393,

"y": 37.435928255,

"value": 75

}, {

"x": 116.1384551116,

"y": 37.4359450132,

"value": 3

}, {

"x": 116.1384927196,

"y": 37.4359158649,

"value": 45

}, {

"x": 116.1384938639,

"y": 37.4358498311,

"value": 45

}, {

"x": 116.1385183299,

"y": 37.4360213794,

"value": 93

}, {

"x": 116.1384007925,

"y": 37.4359860133,

"value": 46

}, {

"x": 116.1383604844,

"y": 37.4358298672,

"value": 54

}, {

"x": 116.13851025,

"y": 37.4359098303,

"value": 39

}, {

"x": 116.1383874733,

"y": 37.4358511035,

"value": 34

}, {

"x": 116.1384981796,

"y": 37.4359355403,

"value": 81

}, {

"x": 116.1384504107,

"y": 37.4360332348,

"value": 39

}, {

"x": 116.1385582664,

"y": 37.4359788335,

"value": 20

}, {

"x": 116.1383967364,

"y": 37.4360581999,

"value": 35

}, {

"x": 116.1383839615,

"y": 37.436016316,

"value": 47

}, {

"x": 116.1384082712,

"y": 37.4358423338,

"value": 36

}, {

"x": 116.1385092651,

"y": 37.4358577623,

"value": 69

}, {

"x": 116.138360356,

"y": 37.436046789,

"value": 90

}, {

"x": 116.138471893,

"y": 37.4359184292,

"value": 88

}, {

"x": 116.1385605689,

"y": 37.4360271359,

"value": 81

}, {

"x": 116.1383585714,

"y": 37.4359362476,

"value": 32

}, {

"x": 116.1384939114,

"y": 37.4358844253,

"value": 67

}, {

"x": 116.138466724,

"y": 37.436019121,

"value": 17

}, {

"x": 116.1385504355,

"y": 37.4360614056,

"value": 49

}, {

"x": 116.1383883832,

"y": 37.4358733544,

"value": 82

}, {

"x": 116.1385670669,

"y": 37.4359650236,

"value": 25

}, {

"x": 116.1383416534,

"y": 37.4359310876,

"value": 82

}, {

"x": 116.138525285,

"y": 37.4359394661,

"value": 66

}, {

"x": 116.1385487719,

"y": 37.4360137656,

"value": 73

}, {

"x": 116.1385496029,

"y": 37.4359187277,

"value": 73

}, {

"x": 116.1383989222,

"y": 37.4358556562,

"value": 61

}, {

"x": 116.1385499424,

"y": 37.4359149305,

"value": 67

}, {

"x": 116.138404523,

"y": 37.4359563326,

"value": 90

}, {

"x": 116.1383883675,

"y": 37.4359794855,

"value": 78

}, {

"x": 116.1383967187,

"y": 37.435891185,

"value": 15

}, {

"x": 116.1384610005,

"y": 37.4359044797,

"value": 15

}, {

"x": 116.1384688489,

"y": 37.4360396127,

"value": 91

}, {

"x": 116.1384431875,

"y": 37.4360684409,

"value": 8

}, {

"x": 116.1385411067,

"y": 37.4360645847,

"value": 42

}, {

"x": 116.1385237178,

"y": 37.4358843181,

"value": 31

}, {

"x": 116.1384406464,

"y": 37.4360003831,

"value": 51

}, {

"x": 116.1384679169,

"y": 37.4359950456,

"value": 96

}, {

"x": 116.1384194314,

"y": 37.4358419739,

"value": 22

}, {

"x": 116.1385049792,

"y": 37.4359574813,

"value": 44

}, {

"x": 116.1384097378,

"y": 37.4358598672,

"value": 82

}, {

"x": 116.1384993219,

"y": 37.4360352975,

"value": 84

}, {

"x": 116.1383640499,

"y": 37.4359839518,

"value": 81

}];

                      //设置最大最小值

let valueMin = 0;

let valueMax = 100;

// 将数据添加到热力图

heatMap.setWGS84Data(valueMin, valueMax, data); 

                       //定位到热力图的位置

viewer.zoomTo(viewer.entities);

}

热力图效果：

感谢你能够认真阅读完这篇文章，希望小编分享的“Cesium中如何实现热力图”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!