React Mapbox-GL：无法将3D地形添加到地图中的Mapbox API中

Question

我正在使用 react-mapbox-gl 在我的下一个应用程序中，根据文档：

OnstyleLoad ：（ map，loadevent）=＆gt;用MAPBOX地图调用void 实例何时发射加载事件。您可以使用回调的 然后与Mapbox API交互的第一个参数。

这揭示了一个道具，该道具允许一个人直接与mapbox API进行交互，并且在添加a Geocoder 和地理位置控制，但对添加3D地形。

这是我的地图组件：

import { useCallback, useEffect, useRef } from 'react'
import ReactMapboxGl, { RotationControl, ZoomControl } from "react-mapbox-gl";

import mapboxgl from 'mapbox-gl';

import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

const mapAccess = {
  mapboxApiAccessToken: process.env.MAPBOX_ACCESS_TOKEN
}
const Map = ReactMapboxGl({
  accessToken: process.env.MAPBOX_ACCESS_TOKEN,
  logoPosition: 'bottom-right',
  pitchWithRotate: true
});

export default function MyMap() {
  return (
    <>
      <Map
        style="mapbox://styles/mapbox/streets-v9"
        onStyleLoad={(map) => {
          map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
          });

          map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

          map.addLayer({
            'id': 'sky',
            'type': 'sky',
            'paint': {
              'sky-type': 'atmosphere',
              'sky-atmosphere-sun': [0.0, 0.0],
              'sky-atmosphere-sun-intensity': 15
            }
          }); map.on('load', () => {
            console.log('load')
          });

          map.addControl(
            new MapboxGeocoder({
              accessToken: mapboxgl.accessToken,
              mapboxgl: mapboxgl,
              position: 'top-right'

            })
          );

          map.addControl(
            new mapboxgl.GeolocateControl({
              positionOptions: {
                enableHighAccuracy: true
              },

              trackUserLocation: true,
              showUserHeading: true,
              showAccuracyCircle: true,
              position: 'top-left'

            })
          );

        }}
      >
        <RotationControl className="mt-12" position="top-right" />
        <ZoomControl className="mt-[2.375rem]" position="top-left" />

      </Map>
    </>
  )
}

知道为什么这不起作用吗？

提前致谢！

Answer 1

抱歉，回复很晚，可以使用

export default class ThreeDBuilding extends React.Component {
  render() {
    return (
      <ReactMapboxGl
        style={style}
        accessToken={accessToken}
        containerStyle={styles.container}
      >
        <Layer
          id="3d-buildings"
          sourceId="composite"
          layerOptions={{
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15
          }}
          paint={{
            'fill-extrusion-color': '#aaa',
            'fill-extrusion-height': {
                'type': 'identity',
                'property': 'height'
            },
            'fill-extrusion-base': {
                'type': 'identity',
                'property': 'min_height'
            },
            'fill-extrusion-opacity': .6
          }}/>
      </ReactMapboxGl>
    );
  }
}

htttps： //github.com/alex3165/reeact-mapbox-gl/issues/79#issuecomment-267913558