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

如何解决是否可以设置坐标数组的半径？

我仍然是使用Google地图和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);

谢谢。

解决方法

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

这是单击多边形时我的函数的代码片段：

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 和整个代码片段：

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,radius: 10000 + boundsEdgeDistance
    });
  };

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

  onPolyHoverOut = (props,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);

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

如何解决是否可以设置坐标数组的半径？

解决方法

相关推荐