如何对复杂的谷歌多边形坐标进行排序？

问题描述

这是我的第一个问题，所以我会尽力解释我自己?

我在一家餐厅外卖公司担任前端开发人员，使用 ReactJS。

我正在展示商店在确定城市的覆盖范围。因此显示了两个多边形：

1. 商店覆盖面
2. 城市覆盖面

现在为了做到这一点，我使用了“google-maps-react”库。我从服务接收商店和城市覆盖面的坐标。商店覆盖面的多边形适用于给定的坐标，但城市覆盖面的情况并非如此。城市的坐标使多边形边界相互交叉，因此我必须对它们进行排序。

我在这里找到了关于如何对坐标进行排序的答案...How to create Polygon by joining outer points in Google Maps。我试过这个答案，但事实证明，它对简单的多边形最有效。

我会保留坐标，因为它们在视觉上确实代表了覆盖范围，但是，当我为商店创建覆盖多边形时，我必须验证城市多边形内是否有覆盖。我使用 google.maps.geometry.poly.containsLocation() 方法执行此操作。由于边界相互交叉，因此会产生覆盖范围存在但实际上不存在的效果。这是一个问题，因为它使用户感到困惑。我找到的最佳解决方案是对坐标进行排序，使多边形边界线不会相互交叉。

我用来获取坐标并对它们进行排序的代码

// receive coordinates
  const getRappiCoverageCoordinates = allZones => {
    const storeCityRappiCoverageZones = allZones
      .filter(rappiZone => rappiZone.city_id === storetoEdit.storeCityId)
      .map(rappiZone => {
        return { ...rappiZone,zone: JSON.parse(rappiZone.zone) };
      });

    let cityCoordinates = [];
    storeCityRappiCoverageZones.forEach(rappiZone => {
      cityCoordinates = [...cityCoordinates,...rappiZone.zone];
    });

    cityCoordinates = getSortedCityCoordinates(cityCoordinates);

    setStoreCityRappiCoverageCoordinates(cityCoordinates);
  };

// sort coordinates
  const getSortedCityCoordinates = cityCoordinates => {
    const sortCityCoordinates = (a,b) => {
      const beara = google.maps.geometry.spherical.computeheading(centerPt,a);
      const bearB = google.maps.geometry.spherical.computeheading(centerPt,b);
      return beara - bearB;
    };

    const bounds = new google.maps.LatLngBounds();

    const googleLatLngCityCoordinates = cityCoordinates.map(coordinate => {
      const { lat,lng } = coordinate;
      const googleMapsLatLingCoordinate = new google.maps.LatLng(lat,lng);
      bounds.extend(googleMapsLatLingCoordinate);
      return googleMapsLatLingCoordinate;
    });

    const centerPt = bounds.getCenter();
    const sortedCityCoordinates = googleLatLngCityCoordinates
      .sort(sortCityCoordinates)
      .map(googleCoordinate => {
        const coordinate = {
          lat: googleCoordinate.lat(),lng: googleCoordinate.lng(),};
        return coordinate;
      });

    console.log(sortedCityCoordinates);
    return sortedCityCoordinates;
  };

我认为这种坐标排序应该在后端完成，因为它是繁重的逻辑，但上面的顺序是在前端弄清楚。

这是不排序城市多边形坐标的样子：

这是对城市多边形的坐标进行排序时的样子：

我如何对这些坐标进行排序以创建一个完美的多边形，即使它是 5000 多个坐标？谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）