2

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

deck.gl文档表明可以在彼此之上渲染多个图层：

deck.gl 允许您使用相同或不同的数据集渲染多个图层。您只需提供一组图层实例，deck.gl 将按顺序呈现它们（并在悬停单击时处理交互性等）。

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

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

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

有人知道实际上结合了多个层的任何示例吗？

4

1 回答 1

4

您可以查看deckgl-overlay文件，该文件用于在主网站 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] },
    ],
  }),
]

如您所见，ArcLayerandLineLayer可以使用完全相同的data对象，因为它们具有相同的形式，但 aScatterplotLayer不能这样做。您必须注意每一层的文档（例如ArcLayer one），其中显示了示例数据。

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

于 2017-05-09T16:58:01.863 回答