Deck.GL TerrainLayer 渲染其他 HTML 元素

如何解决Deck.GL TerrainLayer 渲染其他 HTML 元素

在使用 DeckGL + React 进行编码时，地形层图块呈现在所有其他 HTML 元素之上，无论 DOM 中指定的顺序如何。

在本例中，我希望能够在 <Graph> 中的地形图块顶部渲染 <DeckGLMap> 组件

*为简洁起见，示例已被编辑

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

  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 中元素的多个层次结构/排序。有没有办法确保瓷砖按照预期的顺序加载？

解决方法

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

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