Google Maps React 多边形问题

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

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

我认为它应该是这样的：

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>
    )
  }
}

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

new Polygon() 和 <Polygon> 不是一回事。你应该 return 后者。 JSX 翻译成类似 React.createElement(Polygon,...) 的东西而不是 new Polygon(...)。好的，你已经解决了。

根据 docs and per source code，Polygon 应创建为

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

而不是

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

你的options被忽略了

this.displayFires() 在 componentDidMount 中没有任何作用，因此应将其删除。

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

Google Maps React 多边形问题

Google Maps React Polygon Issues

reactjs

google-maps

google-maps-api-3

geojson

google-maps-react