基于Cesium實現(xiàn)加載顯示熱力圖

更新時間：2022年06月22日 11:14:22 作者：王+V

這篇文章主要介紹了如何利用Cesium實現(xiàn)加載顯示熱力圖，文中的示例代碼講解詳細，對我們學(xué)習(xí)或工作有一定的幫助，需要的可以參考一下

我是一個小白，到目前為止對于3D方面的東西不是特別的懂，所以說，對于cesium使用的并不是特別的好，可以說根本不會吧，所以說也是在一點一點摸索，一點一點學(xué)習(xí)的過程中，所以說有些博文寫的可能不是準確的，只是用來記錄一下學(xué)習(xí)過程，錯了別噴我?。。?/p>

CesiumHeatmap

首先嘞，繪制熱力圖需要有一個工具，就是使用 CesiumHeatmap 這個工具，然后呢，下面是他的一個github的地址。

CesiumHeatmap 【時空門~ 嗖~】

下載下來放到項目里面就可以了。

我把他放到了這里面嘞。

然后在項目里面引入一下。

<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,
      },
    });
  }

效果就是這個樣子。