So zeigen Sie mehrere Ebenen mit Deck.gl an

Question

Ich versuche, ein interaktives Diagramm mit Deck.gl zu erstellen, das einen HexagonLayer (für Bevölkerungsdaten) mit einem IconLayer (für Standorte einer Einzelhandelskette) kombiniert.

Die deck.gl documentation zeigt an, dass es möglich ist, mehrere Schichten übereinander zu machen:

deck.gl können Sie mehrere Schichten mit der gleichen oder verschiedene Datensätze machen. Sie stellen einfach ein Array von Ebeneninstanzen zur Verfügung und deck.gl wird sie in der Reihenfolge rendern (und Interaktivität handhaben, wennMausklick usw.).

Es gibt sogar ein Beispiel dafür, wie die Schichten Objekt initialisiert werden kann:

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

Aber ich kann nicht herausfinden, wie separate Datenquellen zu laden und initialisieren, die beiden Schichten, alle Beispiele sind geschrieben als Single-Layer-Demos.

Kennt jemand Beispiele, die tatsächlich mehrere Schichten kombinieren?

Answer 1

Sie an der deckgl-overlay Datei aussehen kann, derjenige, der die Kopfzeile auf dem Haupt website demo, die eine um eine eigene TripsLayer und PolygonLayer Verwendung zeigt machen verwendet wird.

Die Daten sind für Portabilität codiert, so dass es nicht besonders lesbar ist, aber ich denke, Ihr Problem ist, dass Sie versuchen, verschiedene Schichten mit den gleichen Datenstrukturen zu verwenden, die nicht unbedingt kompatibel ist. Hier

ist ein Beispiel mehrere Schichten mit:

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] }, 
    ], 
    }), 
] 

Wie Sie sehen können, die ArcLayer und LineLayer könnte genau das gleiche data Objekt verwenden, da sie die gleiche Form haben, aber ein ScatterplotLayer kann das nicht tun gleich. Sie müssen auf die Dokumente jeder Schicht achten (zB die ArcLayer), wo ein Beispiel Daten gezeigt wird.

_{Haftungsausschluss: Ich arbeite für Uber im Data Visualization Team, das deck.gl gemacht hat.}