KeplerGL各图层与过滤器配置方法及热力图不显示问题排查

核心问题排查与配置修正 #

你的热力图不显示仅展示点数据，大概率是配置结构缺失关键参数或层级错误，以下是针对你提供的配置的修正方案：

修正后的完整配置 #

const sampleConfig = {
  visState: {
    filters: [
      {
        id: "me",
        dataId: "test_trip_data",
        name: "tpep_pickup_datetime",
        type: "timeRange",
        enlarged: true,
      },
      {
        id: "me2",
        dataId: "test_trip_data",
        name: "count",
        type: "int",
        enlarged: false,
      },
    ],
    layers: [
      {
        id: "heatmap-layer",
        type: "heatmap",
        config: {
          dataId: "test_trip_data",
          label: "Heatmap",
          columns: {
            lat: "latitude",
            lng: "longitude",
            weight: "count" // 新增权重字段，用于热力图密度计算
          },
          isVisible: true,
          aggregation: "sum", // 指定聚合方式，匹配权重字段的计算逻辑
          visConfig: {
            opacity: 0.8,
            colorRange: {
              name: "Global Warming",
              type: "sequential",
              category: "Uber",
              colors: [
                "#5A1846",
                "#900C3F",
                "#C70039",
                "#E3611C",
                "#F1920E",
                "#FFC300",
              ],
            },
            radius: 40,
            intensity: 0.5, // 注意：热力图的密度参数是intensity而非density
          },
          // 热力图无需textLabel配置，直接移除
        },
      },
    ],
  },
};

关键修正点说明 #

• 新增权重字段：热力图需要基于数值字段计算密度，在columns中添加weight: "count"，关联你的数据中的计数字段，确保热力图能根据数据量生成渐变效果。
• 修正聚合方式：添加aggregation: "sum"，明确权重字段的计算逻辑，这是热力图渲染的必要参数。
• 修正密度参数名：将visConfig中的density改为intensity，KeplerGL热力图的密度控制参数为intensity，原参数名错误会导致渲染失效。
• 移除无用配置：热力图不需要textLabel配置，冗余配置可能干扰渲染逻辑，直接删除即可。

基础配置注意事项 #

• 数据字段匹配：确保columns中的lat、lng字段与你的数据集里的经纬度字段名完全一致，大小写敏感。
• 过滤器影响：检查两个过滤器是否过滤掉了所有数据，比如时间范围过滤器是否超出了数据的时间区间，数值过滤器是否设置了过窄的范围，导致没有数据用于渲染热力图。
• 图层优先级：如果同时存在点图层和热力图层，确保热力图层的层级高于点图层（可通过config中的order参数调整，数值越大层级越高）。

内容的提问来源于stack exchange，提问作者İbrahim Yılgör