为开源奉献一份自己的力量：Cesium没有热力图组件，我们自己封装！

最新推荐文章于 2024-09-28 17:32:53 发布

攻城师不浪

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量470

点赞数 6

文章标签： cesium 前端数据可视化

本文链接：https://blog.csdn.net/weixin_40580834/article/details/140739653

版权

大家好，我是日拱一卒的攻城师不浪，专注可视化、数字孪生、前端提效、nodejs、AI学习、GIS等学习沉淀，这是2024年输出的第27/100篇文章。
交流合作：brown_7778

请添加图片描述

前言

热力图，在很多可视化场景开发中会被经常提到，先来了解下它在产品表达方面的突出作用：

可视化数据密度：热力图通过颜色的渐变展示数据点的密度。例如，在城市规划中，可以用热力图展示某区域内人口的分布密度，帮助决策者了解人口集中的地方。
突出热点区域：通过颜色的对比，热力图可以很直观地突出某些热点区域。例如，在商业分析中，可以用热力图展示某购物中心的顾客流量，找出最受欢迎的区域。
简化复杂数据：热力图能将复杂的、难以直接理解的数据变得一目了然。通过颜色的变化，用户可以迅速抓住数据的主要趋势和特征。
空间分析：热力图可以帮助进行空间分析，识别出特定区域的模式和异常。例如，在环境监测中，可以使用热力图展示空气质量或污染源分布，帮助环保部门采取措施。

在产品表达方面，热力图的意义在于：

提高用户体验：热力图可以使数据展示更加直观，用户无需复杂的分析就能迅速理解数据的核心信息。
支持决策：通过直观的可视化，热力图可以为用户提供有价值的信息支持，帮助他们做出更明智的决策。
数据呈现的美观性：热力图色彩丰富，能够提升数据展示的美观性和吸引力，使用户对产品的视觉体验更好。
增强互动性：许多热力图允许用户进行交互操作，例如放大、缩小、点击查看详细信息等，提高了产品的互动性和用户参与度。

综上所述，热力图在可视化场景中不仅能提升数据可视化的效果，还能为用户提供更直观的分析工具，帮助他们更好地理解和利用数据，做出快速应对和决策。

数据类型

在开发热力图之前，我们首先要知道要用到什么样的数据类型，下面我给出一个示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [118.01958286942317, 36.81208337028062]
      },
      "properties": {
        "OBJECTID": 275,
        "lng": 118.019583,
        "lat": 36.812083,
        "num": 1
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [118.0362495360232, 36.81208337028062]
      },
      "properties": {
        "OBJECTID": 277,
        "lng": 118.03625,
        "lat": 36.812083,
        "num": 0.983159
      }
    },
    //...
  ]
}

可以清晰的看出，features里面包含了一个一个的点位（Point），实际开发过程中主要使用每个点位中的properties属性，包括经纬度以及当前点位的数据值(num)。

数据处理

拿到可用的数据之后，我们需要对数据进行处理，整合成我们想要的格式类型

const { res } = await getGeojson("/json/heatMap.json");
const { features } = res;
// 最终要用到的数据格式
let heatData = [];
if (features?.length) {
  heatData = features.map((item) => {
    return {
      x: item.properties.lng,
      y: item.properties.lat,
      value: item.properties.num,
    };
  });
}

热力图组件封装

cesiumHeatMap = new CesiumHeatmap(viewer, {
  zoomToLayer: true,
  points: heatData,
  heatmapDataOptions: { max: 1, min: 0 },
  heatmapOptions: {
    maxOpacity: 1,
    minOpacity: 0,
  },
});