react-mapbox-gl 事件多边形点击答案

【问题标题】：react-mapbox-gl event polygon clickreact-mapbox-gl 事件多边形点击
【发布时间】：2017-03-20 08:24:02
【问题描述】：

我正在尝试使用 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")
)

【问题讨论】：

嘿 Yasin，你找到解决办法了吗？
嗨@romeboards，如下所示，我将尝试 react-mapbox-gl ^2.3。现在，它们支持 GeoJson 组件的鼠标事件处理程序。

标签： javascript reactjs mapbox-gl-js

【解决方案1】：

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

【讨论】：