react-mapbox-gl事件多邊形單擊

Question

我正在嘗試使用https://github.com/alex3165/react-mapbox-gl編寫的此React友好包裝器。

我對如何將事件添加到使用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

react-mapbox-gl ^ 2.3現在包含針對GeoJson組件不同形狀的鼠標事件處理程序，請查看文檔https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API .MD＃geojsonlayer