Cesium中如何實(shí)現(xiàn)熱力圖

這篇文章主要介紹了Cesium中如何實(shí)現(xiàn)熱力圖，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在Cesium上根據(jù)點(diǎn)，可以顯示出熱力圖，在網(wǎng)上有開(kāi)源的代碼，具體的參考網(wǎng)址如下：

https://github.com/danwild/CesiumHeatmap

使用方式如下：

       function testLoc(){

               //設(shè)定熱力圖的四至范圍

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

}

);

// 設(shè)置一些隨機(jī)的效果，這個(gè)可根據(jù)實(shí)際數(shù)據(jù)進(jìn)行開(kāi)發(fā)

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

}];

                      //設(shè)置最大最小值

let valueMin = 0;

let valueMax = 100;

// 將數(shù)據(jù)添加到熱力圖

heatMap.setWGS84Data(valueMin, valueMax, data); 

                       //定位到熱力圖的位置

viewer.zoomTo(viewer.entities);

}

熱力圖效果：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Cesium中如何實(shí)現(xiàn)熱力圖”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!