如何使用Deck.gl顯示多層

Question

我正在嘗試使用Deck.gl制作交互式圖表，該圖表將HexagonLayer（用於人口數據）與IconLayer（用於零售鏈的位置）相結合。

deck.gl 文檔指示可以在彼此之上渲染多個層：

deck.gl允許您使用相同或不同的數據集渲染多個圖層。 您只需提供一個圖層實例數組，deck.gl就會按順序渲染它們（並在單擊鼠標懸停等時處理交互性）。

甚至還有一個有關如何初始化圖層對象的示例：

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

但是我無法弄清楚如何加載單獨的數據源並初始化兩層，所有示例都編寫為單層演示。

有人知道實際上結合了多層的任何示例嗎？

Answer 1

您可以查看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圖層），其中顯示了示例數據。

_{免責聲明：我在Ueck的數據可視化團隊工作，該團隊創建了deck.gl。}