问题描述
我正在使用此网站[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上)
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)