Блог

Я использовал этот веб-сайт [http://vis.academy/#/building-a-geospatial-app/1-starting-with-a-map ] чтобы узнать, как визуализировать данные с помощью react и mapbox.gl но я столкнулся с некоторыми проблемами.

Я запускаю приложение на localhost: 8080, и все, что я вижу, это пустой белый экран. Несмотря на то, что я сопоставил свой код с кодом vis academy, у меня нет карты.

Вот мой код для 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)