javascript - 如何使用 Deck.gl 显示多个图层

Question

我正在尝试使用 Deck.gl 制作交互式图表，该图表结合了 HexagonLayer(用于人口数据)和 IconLayer(用于零售链式店的位置)。

deck.gl documentation表示可以在彼此之上渲染多个层:

deck.gl allows you to render multiple layers using the same or different data sets. You simply provide an array of layer instances and deck.gl will render them in order (and handle interactivity when hovering clicking etc).

甚至还有一个如何初始化层对象的示例:

<DeckGL layers={[
  new PathLayer({data: ...}),
  new LineLayer({data: ...}),
  new ArcLayer({data: ...}),
]} />

但我不知道如何加载单独的数据源并初始化两层，所有示例都写为单层演示。

有人知道实际组合多层的例子吗？

Answer 1

你可以看看deckgl-overlay文件，用于在主页面上呈现标题的文件 website demo ，它显示了使用自定义 TripsLayer 和 PolygonLayer 的用法。

数据经过编码以实现可移植性，因此可读性不是特别好，但我认为您的问题是您试图使用相同数据结构来使用不同的层，这不一定兼容。

这是一个使用多层的例子:

const layers = [
  new ArcLayer({
    id: 'arc-layer',
    strokeWidth: 10,
    data: [
      { sourcePosition: [-122.4, 37.7843], targetPosition: [-122.416, 37.781], color: [255, 0, 255] },
    ],
  }),
  new ScatterplotLayer({
    id: 'scatterplot-layer',
    data: [
      { position: [-122.4, 37.78], radius: 5, color: [0, 255, 0] },
    ],
    radiusScale: 100,
  }),
  new LineLayer({
    id: 'line-layer',
    strokeWidth: 10,
    data: [
      { sourcePosition: [-122.43, 37.79], targetPosition: [-122.416, 37.781], color: [255, 0, 0] },
    ],
  }),
]

如您所见，ArcLayer 和 LineLayer 可以使用完全相同的 data 对象，因为它们具有相同的形式，但是 code>ScatterplotLayer 不能做同样的事情。您必须注意每一层的文档(例如 ArcLayer 层)，其中显示了示例数据。

_{免责声明:我在制作 deck.gl 的数据可视化团队中为 Uber 工作。}