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

react-mapbox-gl ^ 2.3现在包含用于GeoJson组件的不同形状的鼠标事件处理程序，请查看文档https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md#geojsonlayer

react-mapbox-gl事件多边形单击

1 个答案: