2

我正在创建一个应用程序，它使用来自 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>
        );
    }
}
4

1 回答 1

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,...)not to的东西new Polygon(...)。好的，你已经解决了。

  2. 根据文档和源代码，Polygon应创建为

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

    而不是作为

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

    你options被忽略了

  3. this.displayFires()incomponentDidMount什么都不做，所以它应该被删除。

    附带说明：在this.displayFires()通话时还this.state 没有改变。但它不应该改变结果，因为正如我所说，this.displayFires()在...中没有效果，componentDidMount但this.state.polygons.push在您的新版本代码中可能会产生效果...或者我最好说会引入错误。你不应该那样做。

于 2020-09-09T07:25:06.650 回答