Mapbox地图未显示react-map-gl

如何解决Mapbox地图未显示react-map-gl

我正在使用此网站[http://vis.academy/#/building-a-geospatial-app/1-starting-with-a-map]学习如何使用react和mapBox.gl可视化数据，但是我遇到了一些问题。

我正在localhost：8080上运行该应用程序，而我看到的只是一个空白的空白屏幕。即使我已将代码与学院的代码进行了匹配，但我没有地图。

这是我的app.js代码（其他所有内容都没有更改，您可以从其网站克隆代码）。

import React,{ Component } from 'react';
import MapGL from 'react-map-gl';
import {MapStylePicker} from './controls';

export default class App extends Component {
    state = {
      style: 'mapBox://styles/light-v9',viewport: {
        width: window.innerWidth,height: window.innerHeight,longitude: -74,latitude: 40.7,zoom: 11,maxZoom: 16
      }
    };
  

  onStyleChange = (style) => {
    this.setState({style});
  }

  _onViewportChange = (viewport) => {
    this.setState({
      viewport: {...this.state.viewport,...viewport}
    });
  }

  componentDidMount() {
    window.addEventListener('resize',this._resize);
    this._resize();
  }

  componentwillUnmount() {
    window.removeEventListener('resize',this._resize);
  }

  _resize = () => {
    this._onViewportChange({
      width: window.innerWidth,height: window.innerHeight
    });
  }

  render() {
    <MapStylePicker onStyleChange={this.onStyleChange} currentStyle={this.state.style}/>
    return (
      <div>
        <MapGL
        
          {...this.state.viewport}
          mapStyle={this.state.style}
          // Callback for viewport changes (below)
          onViewportChange={viewport => this._onViewportChange(viewport)}

        ></MapGL>
      </div>
    );
  }
}

对于mapBox令牌，我按照指南的指示进行了操作，即转到〜/ .bash_profile文件并添加export MAPBox_TOKEN="py........" and then I updated it in terminal using 源〜/ .bash_profile`

在本指南中，它还有另外两件事可以导出mapBox令牌，因此这是我的〜/ .bash_profile

代码。

# >>> conda initialize >>>
# !! Contents within this block are managed by 'conda init' !!
__conda_setup="$('/opt/anaconda3/bin/conda' 'shell.bash' 'hook' 2> /dev/null)"
if [ $? -eq 0 ]; then
    eval "$__conda_setup"
else
    if [ -f "/opt/anaconda3/etc/profile.d/conda.sh" ]; then
        . "/opt/anaconda3/etc/profile.d/conda.sh"
    else
        export PATH="/opt/anaconda3/bin:$PATH"
    fi
fi
unset __conda_setup
# <<< conda initialize <<<

export MapBoxAccesstoken="pk.eyJ1IjoidmVyYTFrIiwiYSI6ImNrZjZ5bWZ3YzBhNDEycWxiZHBycDFrZnoifQ.hVFCurngFTtg2R0ivt-zyg"

export MAPBox_TOKEN="pk.eyJ1IjoidmVyYTFrIiwiYSI6ImNrZjQ3aWJoczA4ZGQydm43cXFjcW5peTkifQ.sYJ99dX7B8QyPgV_-TszTA"

export mapBoxApiAccesstoken="pk.eyJ1IjoidmVyYTFrIiwiYSI6ImNrZjQ3aWJoczA4ZGQydm43cXFjcW5peTkifQ.sYJ99dX7B8QyPgV_-TszTA"

非常感谢您的宝贵时间！我超级困惑（顺便说一句，我在Mac上）