首次通过代码在kepler.gl中添加Cluster Layer不显示问题求助

首次尝试在kepler.gl中通过编程方式添加Cluster Layer，数据已分发到地图，但图层完全不可见，相关代码如下：

dispatch(
  addDataToMap({
    datasets: {
      info: {
        label: "Vehicle Data",
        id: "action",
      },
      data: transformedData,
    },
    option: {
      centerMap: true,
      readOnly: false,
    },
    config: {
      version: "v1",
      config: {
        visState: {
          layers: [
            {
              type: "cluster",
              config: {
                id: "action",
                columns: {
                  lat: "latitude",
                  lon: "longitude",
                },
                isVisible: true,
              },
            },
          ],
        },
      },
    },
  })
);

问题排查与修复步骤： #

• 关联数据集与图层：原代码中图层ID与数据集ID重复，且未指定dataId关联数据集。kepler.gl的图层需要通过dataId字段明确绑定对应的数据集，建议给图层设置唯一ID，避免与数据集ID冲突。
• 补充Cluster Layer必填配置：Cluster Layer需要radius（聚类半径）、colorRange（颜色范围）、sizeScale（大小缩放）等核心参数才能正常渲染，缺少这些参数会导致图层无法显示。
• 验证坐标数据格式：确认transformedData中的latitude和longitude字段为数值类型，字符串格式的坐标无法被kepler.gl解析。

修改后的示例代码： #

dispatch(
  addDataToMap({
    datasets: {
      info: {
        label: "Vehicle Data",
        id: "action",
      },
      data: transformedData,
    },
    option: {
      centerMap: true,
      readOnly: false,
    },
    config: {
      version: "v1",
      config: {
        visState: {
          layers: [
            {
              type: "cluster",
              config: {
                id: "cluster-vehicle-data", // 设置唯一图层ID
                dataId: "action", // 绑定数据集ID
                columns: {
                  lat: "latitude",
                  lon: "longitude",
                },
                isVisible: true,
                radius: 30, // 聚类半径（像素）
                colorRange: {
                  colors: [
                    "#FFEAA7",
                    "#FD79A8",
                    "#E84393",
                    "#6C5CE7",
                    "#0984E3"
                  ]
                },
                sizeScale: 12, // 聚类点大小缩放系数
                aggregation: {
                  type: "count" // 聚类聚合方式，可选count/sum等
                }
              },
            },
          ],
        },
      },
    },
  })
);

内容的提问来源于stack exchange，提问作者Bhoomika goyal