带有 gl 设置的甲板 gl 小地图

如何解决带有 gl 设置的甲板 gl 小地图

我的 deckgl 和 minimap 显示有问题。首先，我按照 deckgl 文档来集成 mapBox，尤其是 https://deck.gl/docs/api-reference/mapbox/overview 的最后一部分，因为我对街道名称和其他图层有疑问。但是有了它，我的 minimap 没有显示，我不明白为什么。我在一个简单的反应应用程序中重现了我的问题：

这里是我的 app.js 文件

import React,{useState,useRef,useCallback} from 'react';
import DeckGL from '@deck.gl/react';
import { MapView } from '@deck.gl/core';
import {ScatterplotLayer} from '@deck.gl/layers';
import {StaticMap} from 'react-map-gl';

import {MapBoxLayer} from '@deck.gl/mapBox';
import {load} from '@loaders.gl/core';
import {CSVLoader} from '@loaders.gl/csv';

import {render} from 'react-dom';

const INITIAL_VIEW_STATE = {
  longitude: -74.50,latitude: 40,zoom: 9
};

const DATA_URL_BASE = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/radio';
const DATA_URL = {
  STATIONS: `${DATA_URL_BASE}/stations.tsv`,COVERAGE: `${DATA_URL_BASE}/coverage.csv`,CONTOURS: `${DATA_URL_BASE}/service-contour/{z}/{x}-{y}.mvt`
};

const data = [
  {position: [-74.5,40],size: 100}
];

export default function App() {
  const mapBoxApiAccesstoken = 'api_token';
  // DeckGL and mapBox will both draw into this WebGL context
  const [glContext,setGLContext] = useState();
  const deckRef = useRef(null);
  const mapRef = useRef(null);

  const onMapLoad = useCallback(() => {
    const map = mapRef.current.getMap();
    const deck = deckRef.current.deck;

    // You must initialize an empty deck.gl layer to prevent flashing
    map.addLayer(
      // This id has to match the id of the deck.gl layer
      new MapBoxLayer({ id: "my-scatterplot",deck })
    );
  },[]);

  const layers = [
    new ScatterplotLayer({
      id: 'my-scatterplot',data,getPosition: d => d.position,geTradius: d => d.size,getFillColor: [255,0]
    })
  ];

  const minimapView = () => {
    return new MapView({
      id: 'minimap',x: '0%',y: '65%',width: '17%',height: '35%',clear: true,zoom: 4,controller: null,});
  }
  const mainview = () => {
    return new MapView({
      id: 'main',repeat: false,controller: true
    });
  }

  return (
    <DeckGL
      ref={deckRef}
      views = { [mainview(),minimapView() ]}
      layers={layers}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      onWebGLInitialized={setGLContext}
      glOptions={{
        /* To render vector tile polygons correctly */
        stencil: true
      }}
    >
      {glContext && (
        /* This is important: MapBox must be instantiated after the WebGLContext is available */
      <MapView id="mainview">
        <StaticMap
          ref={mapRef}
          mapStyle="mapBox://styles/mapBox/light-v9"
          gl={glContext}
          mapBoxApiAccesstoken={mapBoxApiAccesstoken}
          onLoad={onMapLoad}
        />
        </MapView>
      )}
      <MapView id="minimap">
        <StaticMap key={"minimapmapBox"}
          attributionControl={false}
          reuseMaps 
          mapStyle = "mapBox://styles/mapBox/satellite-v9"
          mapBoxApiAccesstoken={mapBoxApiAccesstoken}>
        </StaticMap>
      </MapView>
    </DeckGL>
  );
}

export function renderTodoM(container) {
    render(<App />,container);

    load(DATA_URL.STATIONS,CSVLoader,{csv: {delimiter: '\t',skipEmptyLines: true}}).then(data => {
      render(<App data={data} />,container);
    });
}

和我的 index.html

<!doctype html>
<html lang="en">
<head>
  <Meta charset="utf-8">
  <title>deck.gl Example</title>
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
  </style>
</head>
<body>
<div id="app"></div>
</body>
   <script type="text/javascript" src="app.js"></script>
   <script type="text/javascript">
     App.renderTodoM(document.getElementById('app'));
   </script>
</html>

在我的主视图中，如果未设置 minimap，则显示底图和我的 gl。但是，如果 gl 设置为 (gl={glContext})，则显示底图但不显示 minimap。有人有想法吗？

提前致谢