cesium 热力图的实现

 创建热力图要将引入heat.js

创建热力点heatpoints

  function createHeatMap() {
    const data = [
        { longitude: 106.695302, latitude: 26.516131, count: 10 },
        { longitude: 106.683302, latitude: 26.512131, count: 50 },
        { longitude: 106.683502, latitude: 26.514131, count: 20 },
        { longitude: 106.688302, latitude: 26.512131, count: 10 }
      ]
      var min = 0
      var max = 0
      const heatpoints = []
      // for (var feature of data) {
      if (feature.longitude && feature.latitude) {
        max = Math.max(max, feature.count)
        min = Math.min(min, feature.count)
        heatpoints.push({
          x: parseFloat(feature.longitude),
          y: parseFloat(feature.latitude),
          value: feature.count
        })
      }
      // }
      addHeatMap(min, max, heatpoints)
  }

根据最大最小值创建热力图

function addHeatMap(min, max, heatPoints) {
    debugger
    // 创建一个矩形，包围要做热力的区域
    const features = [
      { longitude: 106.6555543649391, latitude: 26.48334149757955 },
      { longitude: 106.68732179894454, latitude: 26.564155190537694 },
      { longitude: 106.72079820833973, latitude: 26.4917484358577 },
      { longitude: 106.72023263982003, latitude: 26.499988040091054 }
    ]
    const points = []
    const bpoint = []
    for (const coord of features) {
      points.push(coord.longitude, coord.latitude)
      bpoint.push(new Cesium.Cartographic(coord.longitude, coord.latitude, 0))
    }
    // eslint-disable-next-line new-cap
    // 根据数据计算范围
    const bound = new Cesium.Rectangle.fromCartographicArray(bpoint)
    // eslint-disable-next-line no-undef
    const heatMap = CesiumHeatmap.create(
      viewer,
      bound,
      {
        // heatmap相应参数
        backgroundColor: 'rgba(0,0,0,0)',
        radius: 50,
        maxOpacity: 0.5,
        minOpacity: 0,
        blur: 0.85
      }
    )

    heatMap.setWGS84Data(min, max, heatPoints)
    const img = heatMap._heatmap._renderer.canvas
    const entity = viewer.entities.add({
      polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray(points), // 多边形
        material: new Cesium.ImageMaterialProperty({
          image: img
        })
      }
    })
    heatmapPolygon.push(entity)
  }

创建结果