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

【问题标题】：Correct Self-Intersecting Polygons in Google-Maps React在 Google-Maps React 中正确的自相交多边形
【发布时间】：2020-11-11 22:51:35
【问题描述】：

我正在开发我的野火跟踪应用程序 (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>
    )
  }
}

【问题讨论】：

我在 GeoJSON 数据中看不到任何自相交的多边形：fiddle。您的处理是否结合了单独多边形的路径？
它没有组合多边形，但是火灾出现了主要的拓扑错误，我不知道如何纠正。 firewild.netlify.app 这是它目前在我的机器上运行的方式。为什么它们会自相交？我绘制多边形的方式一定有问题，或者他们试图从最后一个点连接到第一个点？
我在映射环之前从每个坐标中切出了最后一个坐标，这修复了一些但不是全部。
@geocodezip 我认为这是正确的，因为当我尝试使用 slice 方法时，我只是注意到它从地图中删除了很多多边形。

标签： reactjs google-maps-api-3 polygon geojson google-maps-react

【解决方案1】：

解决了问题！非常简单的修复，从 Medium 上的 Matthew Welch 那里得到了这个想法。将坐标推入数组以映射每个多边形，这解决了它们“自相交”的问题，正如@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 在 Medium 上

【讨论】：