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

Question

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

javascriptdata-visualizationdeck.gl

3

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

deck.gl documentation 指出可以在彼此之上渲染多个图层：

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

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

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

但我无法弄清楚如何加载不同的数据源并初始化这两个图层，所有的示例都是单层演示。

是否有人知道实际上结合了多个图层的示例？

- user2588094

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Preview · Accepted Answer

您可以查看deckgl-overlay文件，该文件用于在网站演示的主页上呈现标题，展示了使用自定义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对象，因为它们具有相同的形式，但ScatterplotLayer不能这样做。您必须注意每个图层的文档(例如ArcLayer)，其中显示了示例数据。

_{免责声明：我在Uber的数据可视化团队工作，负责deck.gl。}