Javascript 将geoJSON添加到此.map mapbox gl js

我已经包括了源代码的摘录以及下面的完整源代码

我试图在React中将geoJSON添加到我的mapbox gl js

Map

类组件中，当运行下面显示的函数时，我收到一个错误

无法读取未定义的属性addSource

。我相信这是因为我使用了

this.map

，但我不确定。我哪里出了问题

摘录 全源

mapboxgl.accessToken=accessToken；
类映射扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
获取位置(
（用户位置）=>{
this.map=new mapboxgl.map({
容器：this.mapContainer，
缩放：11.5，
中心：用户位置，
样式：“mapbox://styles/mapbox/light-v9"
})
此为.map.addControl(
地理编码器，
“左上角”
)
此为.map.addControl(
定位者，
“右上角”
)
const nightlife_data=请求({
url:“https://api.foursquare.com/v2/venues/search",
方法：“GET”，
qs:{
客户id:foursquareID，
客户机密：foursquareSecret，
LH:userLocation[0]+“，”+userLocation[1]，
类别ID：“4d4b7105d754a06376d81259”，
v:‘20170801’，
限额：1
}，函数（错误、恢复、正文）{
如果（错误）{
控制台错误（err）；
}否则{
控制台日志（主体）；
}
}
})
this.map.on（'load'，function（））{
this.map.addSource（“点”{
键入：“geojson”，
“数据”：夜生活数据，
})
this.map.addLayer({
“id”：“点数”，
“类型”：“符号”，
“来源”：“点数”，
“布局”：{
“图标图像”：“{icon}-15”，
“文本字段”：“{title}”，
“文本字体”：[“Open Sans Semibold”，“Arial Unicode MS Bold”]，
“文本偏移量”：[0,0.6]，
“文本锚定”：“顶部”
}
})
}
)
//在地图上自动显示用户位置
setTimeout（locater.\u onclickgeologite.bind（locater），5）
})
}
组件将卸载（）{
this.map.remove（）；
}
render（）{
返回this.mapContainer=el}/>；
}
}
导出默认地图；

由于您使用的是

功能，因此第二个
此
与第一个不同，并且不包含您事先设置的
映射

this.map.on('load', function() {

    this.map.addSource("points", {
      type: "geojson",
      "data": nightlife_data,
    })

    ...
}

您可以尝试使用箭头函数，因为它保留外部
this
（）：

请查看mapbox gl react包装器。有一个在repo中添加geojson层的示例。
mapboxgl.accessToken = accessToken;

class Map extends React.Component {
  constructor(props){
    super(props);
  }

  componentDidMount() {
    getLocation(
      (userLocation) => {
        this.map = new mapboxgl.Map({
          container: this.mapContainer,
          zoom: 11.5,
          center: userLocation,
          style: "mapbox://styles/mapbox/light-v9"
        })
          this.map.addControl(
            geocoder,
            "top-left"
          )

          this.map.addControl(
            locater,
            "top-right"
          )

          const nightlife_data = request({
            url: "https://api.foursquare.com/v2/venues/search",
            method: 'GET',
            qs: {
              client_id: foursquareID,
              client_secret: foursquareSecret,
              ll:  userLocation[0] + "," + userLocation[1],
              categoryId: "4d4b7105d754a06376d81259",
              v: '20170801',
              limit: 1
            }, function(err, res, body) {
                if(err) {
                  console.error(err);
                } else {
                  console.log(body);
                }
            }
          })

          this.map.on('load', function() {

            this.map.addSource("points", {
              type: "geojson",
              "data": nightlife_data,
            })

            this.map.addLayer({
              "id": "points",
              "type": "symbol",
              "source": "points",
                  "layout": {
                    "icon-image": "{icon}-15",
                    "text-field": "{title}",
                    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                    "text-offset": [0, 0.6],
                    "text-anchor": "top"
                  }
            })
      }
    )
      // automatically show the user location on map
      setTimeout(locater._onClickGeolocate.bind(locater), 5)
   })
  }

  componentWillUnmount() {
    this.map.remove();
  }

  render() {
      return <div className="map" ref={el => this.mapContainer = el} />;
  }
}

export default Map;

this.map.on('load', function() {

    this.map.addSource("points", {
      type: "geojson",
      "data": nightlife_data,
    })

    ...
}

this.map.on('load', () => {

    this.map.addSource("points", {
      type: "geojson",
      "data": nightlife_data,
    })

    ...
}