将geoJSON添加到this.map mapbox-gl-js

Question

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

我正在尝试在React中将geoJSON添加到我的mapbox-gl-js Map类组件中，并且在运行如下所示的函数时，我收到错误消息cannot read property addSource of undefined 。 我相信是因为我使用了this.map ，但是我不确定。 我在哪里错了？

提取

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"
              }
        })

全源

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;

Answer 1

由于采用了这样function ，第二个this是第一个不同，不包含map您事先设置好的

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

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

    ...
}

您可以尝试使用箭头函数，因为它使外部保持this （ 词法作用域 ）：

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

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

    ...
}