Onclick显示geoJSON数据弹出窗口react-mapbox-gl

时间:2018-08-27 22:28:14

标签: reactjs geojson mapbox-gl-js

我正在使用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>
    );
  }

0 个答案:

没有答案