将geoJSON添加到this.map mapbox-gl-js
提问于 2017-12-25 17:54:10
我已经包含了源代码的摘录以及下面的完整源代码。
我正在尝试将geoJSON添加到React中的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;
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-27 15:37:49
由于您使用的是function，因此第二个this与第一个不同，并且不包含您预先设置的map
this.map.on('load', function() {
this.map.addSource("points", {
type: "geojson",
"data": nightlife_data,
})
...
}您可以尝试使用箭头函数，因为它保留了外部this (lexical scoping)：
this.map.on('load', () => {
this.map.addSource("points", {
type: "geojson",
"data": nightlife_data,
})
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47970880
复制相关文章
腾讯云开发者
