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

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

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

deck.gl允许您使用同一个或多个图层渲染多个图层 不同的数据集。您只需提供一个层实例数组 和deck.gl将按顺序渲染它们（并在 悬停（点击等）

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

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

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

您可以查看该文件，该文件用于在主界面上呈现标题，其中显示了使用自定义

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

可以使用完全相同的

数据

对象，因为它们具有相同的形式，但是

散点图层

不能这样做。您必须注意每一层的文档（例如一层），其中显示了一个示例数据

---

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

该文档链接已断开，但确实添加了

id:'layer2'

和

id:'layer1'

为我解决了这个问题，感谢制作deckgl。