谷歌地图反应多边形问题

Question

我正在创建一个应用程序，它使用来自 API 的野火数据并翻转它，以便使用 google-maps-react 包在 Google 地图上显示多边形。我已经弄清楚了一切，直到使用地图组件中内置的函数返回和显示多边形。有人想插话可能是什么问题吗？我真的很感激一些帮助。谢谢。

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Polygon } from 'google-maps-react';



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: [],
            polygons: []
        }
    }
    

    componentDidMount() {
        fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
            .then(res => res.json())
            .then(data => {
                this.setState({ fires: data.features })
                this.state.fires.map((fire) =>{
                    if (fire.geometry !== null){
                        let fireCoords = fire.geometry.rings
                        let trueCoords = []
                        fireCoords.map((coords) => {
                            coords.map((pair) => {
                                let newPair = {lat: pair[1], lng: pair[0]}
                                return trueCoords.push(newPair)
                            })
                        })
                        this.state.polygons.push(trueCoords);
                        console.log(this.state.polygons)
                     }
                 })
            })
    }

    showPolygons = () => {
        this.state.polygons.map((polygon) => {
            let firePoly=  <Polygon paths={polygon} options={{
                fillColor: "#BF5E4B",
                fillOpacity: 0.45,
                strokeColor: "#6B352A",
                strokeOpacity: 0.9,
                strokeWeight: 1
            }}/>
            return firePoly
        })
    }
    
    render(){
        return(
            <div className="mapBox">
                <Map
                    google={this.props.google}
                    zoom={8}
                    style={mapStyles}
                    initialCenter={{ lat: 37.7749, lng: -122.4149 }}
                >
                    {this.showPolygons()}
                </Map>
            </div>
        );
    }
}

Answer 1

如果您尝试了我建议的操作，我还没有从您的评论中发现...但是您编辑了您的帖子，并进行了一些随机（且不正确）的更改。好的，我会尝试发布答案。这是一个与原始代码相关的答案，因为它看起来更简单并且包含的​​错误更少。

我认为它应该是这样的：

const coord_pair_to_latlng =  ([lat,lng]) => ({ lat, lng })
const convert_ring_coords = ring => ring.map(coord_pair_to_latlng)

class FireMap extends Component {
  constructor(props) {
    super(props)
    this.state = { fires: [] }
  }
  componentDidMount() {
    fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
      .then(res => res.json())
      .then(data => this.setState({ fires: data.features }))
  }
  displayFires = () => this.state.fires
    .filter(fire => fire.geometry !== null)
    .map(fire => fire.geometry.rings)
    .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>
    )
  }
}

除了更实用的代码风格（你可以忽略），基本上我改变的只是：

1. new Polygon() 和 <Polygon> 不是一回事。你应该返回后者。 JSX 转换为 React.createElement(Polygon,...) 而不是 new Polygon(...)。好的，你已经解决了。

2. 根据docs 和source code，Polygon 应创建为

   <Polygon
     paths         = {coords}
     fillColor     = "#BF5E4B"
     fillOpacity   = {0.45}
     strokeColor   = "#6B352A"
     strokeOpacity = {0.9}
     strokeWeight  = {1}
   />
   

   而不是像

   <Polygon
     paths         = {coords}
     options       = {{...}}
   />
   

   您的 options 将被忽略

3. componentDidMount 中的this.displayFires() 不执行任何操作，因此应将其删除。

   ^{附带说明：在this.displayFires() 调用this.state is not changed yet 时也是如此。但它不应该改变结果，因为正如我所说，this.displayFires() 在componentDidMount 中没有效果......但是你的新版本代码中的this.state.polygons.push 可以产生效果......或者我最好说将引入错误。你永远不应该那样做。}