react-mapbox-glイベントポリゴンをクリック

Question

私はhttps://github.com/alex3165/react-mapbox-glによって書かれたこの反応に優しいラッパーを使って作業しようとしています。

私は、react-mapbox-glを使ってgeojsonから生成されたポリゴンにイベントリスナーを追加する方法については問題があります。

が

import React from 'react' 
import ReactDOM from 'react-dom' 
import ReactMapboxGl, { GeoJSONLayer, Layer, Feature } from "react-mapbox-gl" 

const position = [106.822700,-6.174500] 

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

    this.state = { 
     geojson: {} 
    }; 
    } 

    _onClick =() => { 
    console.log('polygon click') 
    } 

    componentDidMount() { 
    let url = './json/poly.json' 
    fetch(url) 
    .then((response) => { 
    return response.json() 
    }) 
    .then((json) => { 
    this.setState({ 
     geojson: json 
    }) 
    }) 
    .catch((err) => { 
    //error 
    }) 
    } 

    render() { 
    <div> 
     <ReactMapboxGl 
      style="mapbox://styles/mapbox/streets-v8" 
      accessToken="YOUR-ACCESS-TOKEN" 
      center={position} 
      containerStyle={{ height: "100vh", width: "100%" }}> 

      <GeoJSONLayer 
       data={this.state.geojson} 
       fillPaint={{ 
       "fill-color": "#ff0000" 
       }}/> 
     </ReactMapboxGl> 
    </div> 
    } 
} 

ReactDOM.render(
    <MapView />, 
    document.getElementById("root") 
) 

Answer 1

反応-mapbox-GL^2.3は今、あなたにGeoJSONコンポーネントの異なる形状のマウスイベントハンドラを含めるドキュメントを見てhttps://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md#geojsonlayer