React-mapbox-gl：无法连接到 Mapbox API 以将 3D 地形添加到地图

Question

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

onStyleLoad: (map, loadEvent) => 用 Mapbox Map 调用 void 触发加载事件时的实例。您可以使用回调的 然后与 Mapbox API 交互的第一个参数。

这公开了一个允许直接与 Mapbox API 交互的道具，并且在添加 Geocoder 和 GeoLocation Control 方面有效，但在 添加 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>
    );
  }
}

https://github.com/alex3165/react-mapbox-gl/issues/79#issuecomment-267913558