我正在使用react-mapbox-gl
,并用一些geoJSON
来表示城市的天气数据。现在,我有了一个带有圆圈的地图,单击每个圆圈时,我需要显示带有geoJSON
属性的弹出窗口。所以我不知道如何实现此功能。
...
getAllWeather () {
console.log(cities);
var geojson = {
"type":"FeatureCollection",
"features": []
};
cities.forEach((elem) => {
fetch("http://api.openweathermap.org/data/2.5/weather?id="+elem.id+"&APPID="*MY_ID*")
.then(result => result.json())
.then (value => {
geojson.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [elem.coord.lon, elem.coord.lat],
},
"properties": {
"title": elem.ua_name,
"description": "TEMP: " + value.main.temp
}
});
});
});
console.log(geojson);
return geojson;
}
componentWillMount() {
this.setState({weatherData:this.getAllWeather()});
}
componentDidMount() {
const { center, zoom, minZoom } = this.state;
Map = ReactMapboxGl({
center: center,
zoom,
minZoom
});
}
render() {
const {center, zoom, minZoom, weatherData } = this.state;
console.log(weatherData);
return (
<Map
style= *MY-STYLE*
containerStyle={{height: "100vh", width: "100vw", }}
zoom={zoom}
minZoom={minZoom}
center={center}>
<GeoJSONLayer data = {weatherData} circleLayout = {circleLayout} circlePaint = {circlePaint} circleOnClick= {this.onClickCircle}>
</GeoJSONLayer>
</Map>
);
}