Question

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

deck.gl documentation表示可以在彼此的顶部渲染多个图层：

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

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

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

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

有人知道任何实际组合多个图层的例子吗？

Answer 1

您可以查看deckgl-overlay文件，该文件用于在主website demo上呈现标题，该文件显示使用自定义TripsLayer和{{1}的用法}}

数据是为了便携性而编码的，因此它不是特别易读，但我认为您的问题是您尝试使用相同的数据结构使用不同的层，而不是必然兼容。

以下是使用多个图层的示例：

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），其中显示了示例数据。

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

如何使用Deck.gl

1 个答案: