是否可以设置坐标数组的半径？

Question

我仍然是使用谷歌地图和 ReactJS 的初学者。我正在使用google-maps-react 绘制我的地图。

我有一个在地图上呈现的属性。该属性是一组多边形，所有这些多边形共同构成属性（农场）。

当我点击一个特定的多边形时，我会得到被点击的那个多边形的所有坐标：

我想知道，是否可以显示被选定多边形包围的10公里半径？

根据我的研究，可以通过单个点显示半径，即单个纬度和单个经度。 在我的例子中，一个多边形可以有数百个纬度和数百个经度。如上图所示。

您能告诉我如何根据选择的多边形配置 10 公里半径吗？

我将代码放入codesandbox

我在这里绘制地图：

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

const Colors = {
  SELECTED: "blue",
  DEFAULT: "#02482b",
  OVER: "red"
};

const Maps = () => {
  const [poligons, setPoligons] = useState([]);
  const [selected, setSelected] = useState([]);
  const [polygonOptions, setPolygonOptions] = useState({
    strokeColor: Colors.DEFAULT,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: Colors.DEFAULT,
    fillOpacity: 0.35,
    polygonKey: 1
  });
  const [areaPosition, setAreaPosition] = useState({
    lat: -22.735840991240327,
    lng: -47.574046945850164
  });

  const reduceMap = () => {
    const _poligons = data.reduce((acc, [coords]) => {
      const paths = coords.map(([lng, lat]) => ({ lng, lat }));
      acc.push(paths);
      return acc;
    }, []);
    setPoligons(_poligons);
  };

  useEffect(() => {
    reduceMap();
  }, []);

  const selectedArea = (polygon) => {
    for (let i = 0; i < selected.length; i++) {
      const _polygon = selected[i];
      _polygon.setOptions({ fillColor: Colors.DEFAULT });
    }
    setSelected([polygon]);
    polygon.setOptions({ fillColor: Colors.SELECTED });
  };

  const handleClick = (props, polygon, event) => {
    setAreaPosition({ lat: event.latLng.lat(), lng: event.latLng.lng() });
    const paths = polygon.getPaths().getArray();
    const coordinates = paths.map((path) => {
      const points = path.getArray();
      return points.map((point) => [point.lng(), point.lat()]);
    });

    selectedArea(polygon);
    console.log("polygon selected: ", coordinates);
  };

  const handleMouseOver = (props, polygon) => {
    polygon.setOptions({
      fillColor:
        polygon.fillColor !== Colors.SELECTED ? Colors.OVER : Colors.SELECTED
    });
  };

  const handleMouseOut = (props, polygon) => {
    polygon.setOptions({
      fillColor:
        polygon.fillColor !== Colors.SELECTED ? Colors.DEFAULT : Colors.SELECTED
    });
  };

  return (
    <>
      <Map
        google={google}
        style={{ width: "90%", height: "70%", marginTop: "10px" }}
        zoom={13}
        initialCenter={{
          lat: `${areaPosition.lat}`,
          lng: `${areaPosition.lng}`
        }}
        clickableIcons={false}
        className={"map"}
        center={{ lat: `${areaPosition.lat}`, lng: `${areaPosition.lng}` }}
      >
        {poligons.map((coord, i) => (
          <Polygon
            key={`polygon-${i}`}
            onMouseover={handleMouseOver}
            onMouseout={handleMouseOut}
            paths={coord}
            options={polygonOptions}
            onClick={handleClick}
          />
        ))}
      </Map>
    </>
  );
};

export default GoogleApiWrapper({
  apiKey: ""
})(Maps);

提前谢谢你。

Answer 1

1. 您可以获得多边形的边界
2. 将边界的中心设置为半径的起点
3. 获取边界中心与边界东北或西南点之间的距离，以获得多边形的最大半径
4. 将此距离添加到您的 10 公里半径中

单击多边形时，这是我的函数的代码 sn-p：

onPolyClick = (props, polygon, e) => {
    console.log("onclick:");

    //getting the bounds of my polygon
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < props.paths.length; i++) {
      bounds.extend(props.paths[i]);
    }

    //getting the distance of the edge of the polygon bounds
    let boundsEdgeDistance = google.maps.geometry.spherical.computeDistanceBetween(
      bounds.getCenter(),
      bounds.getNorthEast()
    );

    //setting center of the bounds as polygonCenter and adding the calculated distance to the 10km radius
    this.setState({
      polygonCenter: bounds.getCenter(),
      radius: 10000 + boundsEdgeDistance
    });
  };

这是working code 和整个代码sn-p：

import React, { Component } from "react";
import { Map, GoogleApiWrapper, Polygon, Circle } from "google-maps-react";
import data from "./data.json";
const dataArray = [];
const polygonPath = [];
//putting my json data in an array
dataArray.push(data.coordinates);

//formatting the json data to have lat and lng
for (let x = 0; x < dataArray[0].length; x++) {
  let coords = { lat: dataArray[0][x][0], lng: dataArray[0][x][1] };
  polygonPath.push(coords);
}

export class MapContainer extends Component {
  state = {
    center: { lat: 32.321, lng: -64.757 },
    polygonCenter: null,
    radius: null
  };

  onPolyClick = (props, polygon, e) => {
    console.log("onclick:");

    //getting the bounds of my polygon
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < props.paths.length; i++) {
      bounds.extend(props.paths[i]);
    }

    //getting the distance of the edge of the polygon bounds
    let boundsEdgeDistance = google.maps.geometry.spherical.computeDistanceBetween(
      bounds.getCenter(),
      bounds.getNorthEast()
    );

    //setting center of the bounds as polygonCenter and adding the calculated distance to the 10km radius
    this.setState({
      polygonCenter: bounds.getCenter(),
      radius: 10000 + boundsEdgeDistance
    });
  };

  onPolyHover = (props, polygon, e) => {
    console.log("onHover:");
    console.log(polygon.getPaths());
    polygon.setOptions({ fillColor: "#ff00ff" });
  };

  onPolyHoverOut = (props, polygon, e) => {
    console.log("onHover:");

    polygon.setOptions({ fillColor: "#0000FF" });
  };
  render() {
    if (!this.props.loaded) return <div>Loading...</div>;

    return (
      <div>
        <Map
          className="map"
          google={this.props.google}
          onClick={this.onMapClicked}
          initialCenter={{
            lat: -47.7027099655629,
            lng: -22.26485424139211
          }}
          style={{ height: "100%", position: "relative", width: "100%" }}
          zoom={15}
        >
          <Polygon
            paths={polygonPath}
            strokeColor="#0000FF"
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor="#0000FF"
            fillOpacity={0.35}
            onClick={this.onPolyClick}
            onMouseover={this.onPolyHover}
            onMouseout={this.onPolyHoverOut}
          />

          {this.state.radius !== null && (
            <Circle
              radius={this.state.radius}
              center={this.state.polygonCenter}
              onMouseover={() => console.log("mouseover")}
              onClick={(props, circle) => console.log(circle.getRadius())}
              onMouseout={() => console.log("mouseout")}
              strokeColor="transparent"
              strokeOpacity={0}
              strokeWeight={5}
              fillColor="#FF0000"
              fillOpacity={0.2}
            />
          )}
        </Map>
      </div>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: "YOUR_API_KEY",
  libraries: ["geometry"]
})(MapContainer);