Deck.GL TerrainLayer在其他HTML元素上呈现

Question

当使用DeckGL + React编写代码时，地形层瓦片呈现在所有其他DeckGL元素之上，而不考虑DOM中指定的顺序。

在本例中，我希望能够在<DeckGLMap>中渲染Terrain切片之上的<Graph>组件

*为简洁起见，已对示例进行了编辑

import './App.css';
import './styles.css';
import React from 'react'
import DeckGL from '@deck.gl/react';
import {TerrainLayer} from '@deck.gl/geo-layers';
import {GeoJsonLayer} from '@deck.gl/layers';
  
class Wrapper extends React.Component {
  state = {
    focal_pt: "TEST",
    upstream: [],
    downstream: []
  }

  render() {
    return (
      <>
        <Graph focal_pt={this.state.focal_pt}/>
        <div className="map-container">
          <DeckGLMap/>
        </div>
      </>
    );
  }
}


class Graph extends React.Component {

  constructor(props) {
    super(props)
  }

    render () {
      return <div className="graph">{this.props.focal_pt ? this.props.focal_pt.lat: ''}</div>
    }
}

class DeckGLMap extends React.Component {
  constructor(props) {
    super(props)
  }

  baseTerrain = new TerrainLayer({
    id: 'terrain',
    minZoom: 0,
    maxZoom: 18,
    pickable: true,
    // onClick: (info, event) => console.log('Clicked:', info.coordinate),
    onClick: (info, event) => {
      this.props.newFoci({lon: info.coordinate[0], lat: info.coordinate[1]})
    },
    strategy: 'no-overlap',
    elevationDecoder: ELEVATION_DECODER,
    elevationData: TERRAIN_IMAGE,
    texture: SURFACE_IMAGE,
    meshMaxError: 2.0,
    wireframe: false,
    color: [0, 0, 0]
  })

  render() {
    return (
      <div className="map">
        <DeckGL 
              initialViewState={INITIAL_VIEW_STATE} 
              controller={true} 
              layers={[this.baseTerrain]}
      />
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
        <Wrapper />
    </div>
  );
}

export default App;

我已经尝试了vDOM中元素的多层次结构/排序。有没有一种方法可以确保tiles按照预期的顺序加载？

Answer 1

在这篇文章中找到了答案：Rendering NavigationControl with deck.gl

TL;DR:在任何想要渲染到DeckGL之上的<divs>上设置style={{zIndex: '1'}}。适用于其他层，而不仅仅是TerrainLayer。