cesium 加载热力图

梳理cesium 加载热力图

到的插件

热力图 ：heatmap.js
复制代码

代码 可以直接用噢！！！

import HeatmapJS from "heatmap.js";
复制代码

pointslist 是你的信息数据

viewer 是你的cesium实例

mapNormalLongitude, mapNormalLatitude 经纬度

  heatMap = (pointslist, viewer, mapNormalLongitude, mapNormalLatitude) => {
    if (!mapNormalLongitude || !mapNormalLatitude)
      return message.error("没有经纬度无法加载", mapNormalLongitude, mapNormalLatitude);
    
    return new Promise((res, rej) => {
      let heatMap = HeatmapJS.create({
        gradient: {
          "0.5": "blue",
          "0.8": "red",
          "0.95": "white",
          "0.6": "yellow",
        },
        radius: 10,
        opacity: 0.8,
        container: document.querySelector("#cesiumMap"),
      });


  var width = document.querySelector("#cesiumMap").clientWidth;
  var height = document.querySelector("#cesiumMap").clientHeight;
  var max = 100; // 热力图经纬度范围

  var latMin = 28.364807;
  var latMax = 40.251095;
  var lonMin = 94.389228;

  var lonMax = 108.666357; // 根据热力图图片范围，生成随机热力点和强度值
 var len = 200;
 
//自己模拟数据
 while (len--) {
     var val = Math.floor(Math.random()*100);
     max = Math.max(max, val);
     var point = {
        x: Math.floor(Math.random()*width),
        y: Math.floor(Math.random()*height),
         value: val
     };
     points.push(point);
 }
  this.viewer.entities.add({
    name: "heatmap",
    description: "heatmap",
    rectangle: {
      coordinates: Rectangle.fromDegrees(
        +mapNormalLongitude,
        +mapNormalLatitude,
        +mapNormalLongitude + 5.0,
        +mapNormalLatitude + 5.0,
      ),
      material: new ImageMaterialProperty({
        image: heatMap._renderer.canvas,
        transparent: true,
      } as any),
    },
  } as any);
  try {
    heatMap.setData({
      data: points,
    });
    //  message.info("加载成功");
    res(true);
  } catch (error) {
    message.info("加载失败");
    rej(false);
  }
});
}
复制代码

这里面我最无语的是 heatmap.js的data数据好像只能加载x,y,z 然而我的数据是经纬度

朕乏了

最后我妥协了 使用了高德地图来加载的热力图