从多边形获取 GeoJSON

Question

I am building a ReactJS application that allows users to define plots in a map using an array of coordinates with latitudes and longitudes. I would like to return the GeoJSON of the polygon that the user clicks.

I couldn't find in the documentation how to return the coordinate data when we have multiple arrays.

As I am doing, it always returns the array with all the coordinates. And not just the coordinates of the clicked polygon.

My code I put in CodeSandBox

Here's the simulation data come from API

 { "coordinates": [ [ [ [25.774, -80.19], [18.466, -66.118], [32.321, -64.757], [25.774, -80.19] ] ], [ [ [25.774, -50.32], [18.466, -36.118], [32.321, -34.757], [25.774, -50.32] ] ] ] }

My function that get click events:

 handleClick = (props, polygon, e) => { let geoJSON = { type: "Polygon", coordinates: [] }; const paths = polygon.getPaths().getArray(); for (let path of paths) { let pathArray = []; let points = path.getArray(); let firstPoint = false; for (let point of points) { if (firstPoint === false) { firstPoint = point; } pathArray.push([point.lng(), point.lat()]); } pathArray.push([firstPoint.lng(), firstPoint.lat()]); geoJSON.coordinates.push(pathArray); } console.log("geoJSON", geoJSON); return geoJSON; };

Answer 1

You need to set the value of your coords state to auxCoords.auxCoords since checking the return of your auxCoords, there is another auxCoords that hold the array value of your coordinates.

this.setState({ coords: auxCoords.auxCoords }); Remove the const { coords } = this.state; in your render and the {coords && ()} function that enclose your map object.

Then, since the array that hold the polygon coordinates are now in this.state.coords, you need to map each array data to the polygon object. This will create an individual Polygon object for each polygon array. This will then return the specific polygon in the handleclick function.

Here is a sample code and code snippet below:

import React, { Component } from "react";
import { Map, Polygon, GoogleApiWrapper } from "google-maps-react";
import data from "./api/coordinates.json";

export class MapContainer extends Component {
  state = {
    coords: []
  };

  componentDidMount() {
    this.reduceMap();
  }

  reduceMap = () => {
    let auxCoords = {
      auxCoords: data.coordinates.reduce(
        (a, [c]) => a.concat([c.map(([lat, lng]) => ({ lat, lng }))]),
        []
      )
    };
    this.setState({
      coords: auxCoords.auxCoords
    });
  };

  handleClick = (props, polygon, e) => {
    let geoJSON = {
      type: "Polygon",
      coordinates: []
    };

    const paths = polygon.getPaths().getArray();

    for (let path of paths) {
      let pathArray = [];
      let points = path.getArray();
      let firstPoint = false;

      for (let point of points) {
        if (firstPoint === false) {
          firstPoint = point;
        }
        pathArray.push([point.lng(), point.lat()]);
      }

      pathArray.push([firstPoint.lng(), firstPoint.lat()]);
      geoJSON.coordinates.push(pathArray);
    }

    console.log("geoJSON", geoJSON);

    return geoJSON;
  };

  render() {
    return (
      <div>
        <Map
          google={this.props.google}
          style={{ width: "80%", height: "80%", position: "relative" }}
          zoom={3}
          initialCenter={{ lat: 32.321, lng: -64.757 }}
          clickableIcons={false}
          className={"map"}
          center={{ lat: 32.321, lng: -64.757 }}
        >
          {this.state.coords.map((poly, key) => (
            <Polygon
              key={key}
              paths={poly}
              strokeColor="#0000FF"
              strokeOpacity={0.8}
              strokeWeight={2}
              fillColor="#0000FF"
              fillOpacity={0.35}
              onClick={this.handleClick}
            />
          ))}
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "YOUR_KEY"
})(MapContainer);