在Google Maps React中正确的自相交多边形

问题描述

我正在使用我的野火跟踪应用程序（firewild.netlify.app），除了我的应用程序显示难看的自相交多边形外，它还很不错。我正在尝试寻找一种方法来阻止这种情况的发生。

这是我当前的代码，也支持与此应用程序相关的最后一个stackOverflow答案，以帮助我正确渲染多边形。 （用户：x00）

/ This funciton reverses coordinates and makes them readable by GeoJSON
const coord_pair_to_latlng =  ([lng,lat]) => ({ lat,lng })

const convert_ring_coords = ring => ring.map(coord_pair_to_latlng)

const mapStyles = {
    margin: 30,width: '93.75%',height: '90%',border: '1px solid #3E1C18',display: 'inline-block'
};


class FireMap extends Component {
  
  constructor(props) {
    super(props)
    this.state = { fires: [] }
  }
  
  componentDidMount() {
    fetch('https://opendata.arcgis.com/datasets/f72ebe741e3b4f0db376b4e765728339_0.geojson')
      .then(res => res.json())
      .then(data => this.setState({ fires: data.features }))
  }

  displayFires = () => this.state.fires
    .filter(fire => fire.geometry !== null)
    .map(fire => fire.geometry.coordinates[0])
    .map(rings => <polygon 
      paths = { rings.reduce((acc,ring) => acc.concat(convert_ring_coords(ring)),[]) }
      fillColor     = "#BF5E4B"
      fillOpacity   = {0.45}
      strokeColor   = "#6B352A"
      strokeOpacity = {0.9}
      strokeWeight  = {1}
    />)


  render (){
    return (
      <div className="mapBox">
        <Map
          google        = {this.props.google}
          zoom          = {8}
          style         = {mapStyles}
          initialCenter = {{ lat: 37.7749,lng: -122.4149 }}
        >
          {this.displayFires()}
        </Map>
      </div>
    )
  }
}

解决方法

解决了问题！非常简单的解决方法，是马修·韦尔奇（Matthew Welch）在Medium上提出的。将坐标推入数组以映射每个多边形，这解决了它们“自相交”的问题，正如@geocodezip建议的那样，这可能是因为我的displayFires函数试图将多边形合并在一起。感谢您的帮助，也感谢Matthew Welch的精彩文章！ （旁注：他在示例中使用react-google-maps，与我在使用的google-maps-react不同。）在设计应用程序样式和添加新功能方面将做更多工作。

https://medium.com/@dmw9400/using-geojson-with-google-maps-api-5127f7498a33

这是我更新的displayFires函数：

  displayFires() {
    return this.state.fires.map (fire => {
      let coordinates = fire.geometry.coordinates[0][0]
      let coordArr = []
      coordinates.map(coordinate => coordArr.push({lat:coordinate[1],lng:coordinate[0]} ))
      return ( 
        <Polygon 
          paths = {coordArr}
          fillColor     = "#BF5E4B"
          fillOpacity   = {0.45}
          strokeColor   = "#6B352A"
          strokeOpacity = {0.9}
          strokeWeight  = {1}
        />
      )
    })
  }

再次感谢迄今为止帮助过我的每个人！ @ x00 @geocodezip和Matthew Welch（中等）