解锁Kepler.gl：图层和过滤器配置的全面指南

javascript

2024-03-16 19:53:50

Kepler.gl：掌握图层和过滤器的配置

简介

Kepler.gl 是一个功能强大的数据可视化平台，可以创建交互式的地图和图表。掌握其图层和过滤器的配置对于充分利用其潜力至关重要。本文将深入探讨这些配置选项，帮助你创建引人入胜且信息丰富的可视化。

图层配置

类型： 确定地图上可视化数据的类型，如热力图、点图或线图。

数据 ID： 与数据源关联，指定图层使用的数据集。

可见性： 控制图层在地图上的显示与否。

配置： 提供图层特定的选项，如颜色、形状、大小等。

过滤器配置

ID： 唯一的标识符，用于引用过滤器。

数据 ID： 与数据源关联，指定过滤器应用于哪个数据集。

名称： 过滤器所应用的数据字段的名称。

类型： 定义过滤器的类型，如时间范围、数值范围或文本匹配。

是否放大： 控制过滤器在侧边栏中的显示方式。

配置示例

下面是一个配置热力图图层和时间范围过滤器的示例：

{
  visState: {
    filters: [
      {
        id: "me",
        dataId: "test_trip_data",
        name: "tpep_pickup_datetime",
        type: "timeRange",
        enlarged: true,
      }
    ],
    layers: [
      {
        id: "heatmap-layer",
        type: "heatmap",
        config: {
          dataId: "test_trip_data",
          label: "Heatmap",
          color: [218, 112, 191],
          columns: {
            lat: "latitude",
            lng: "longitude",
          },
          isVisible: true,
          visConfig: {
            opacity: 0.8,
            colorRange: {
              name: "Global Warming",
              type: "sequential",
              category: "Uber",
              colors: [
                "#5A1846",
                "#900C3F",
                "#C70039",
                "#E3611C",
                "#F1920E",
                "#FFC300",
              ],
            },
            radius: 40,
            density: 0.5,
          },
          textLabel: [
            {
              field: null,
              color: [255, 255, 255],
              size: 18,
              offset: [0, 0],
              anchor: "start",
              alignment: "center",
            }
          ]
        }
      }
    ]
  }
}