从 Google Maps 绘图管理器多边形获取 GeoJSON

Question

我正在构建一个 React 应用程序，它允许用户通过绘制叠加多边形来通过 Google Maps 组件定义绘图。每次用户绘制多边形时，我都想向上推一个 GeoJSON。

文档在这一点上含糊不清。我正在使用这种功能：

onPolygonComplete={polygon => {
                console.log(JSON.stringify(polygon.getPaths().b[0].b));
            }}

...产生这样的事情：

[{"lat":32.22020791674245,"lng":35.22491455078125},{"lat":31.98754909816049,"lng":35.20294189453125},{"lat":32.0201569982896,"lng":35.43365478515625},{"lat":32.22485504316297,"lng":35.30731201171875}]

一个好的开始——但是有什么内置的东西会产生一个实际的 GeoJSON 吗？

我总是可以使用 .map 来遍历这个数组并从中取出一个 GeoJSON 对象……但想问问是否有人知道 API 中已经包含的东西。

Answer 1

好的，我已经想通了。

首先，声明一个 GeoJSON 模板变量：

let GeoJSON = {
    type: 'Feature',
    geometry: {
        type: 'Polygon',
        coordinates: []
    },
    properties: {}
};

然后，在您的绘图管理器中，执行以下操作：

onPolygonComplete={polygon => {
                for (let point of polygon.getPath().getArray()) {
                    GeoJSON.geometry.coordinates.push([point.lng(), point.lat()]);
                }

现在，您拥有了一个完美的 GeoJSON 多边形对象。瞧！

Answer 2

根据 @Boris_K 的回答，这里有一个更强大的解决方案：

1. 延伸google.maps.Polygon。
2. 符合 rfc7946，第一个点和最后一个点相同。
3. 也适用于带孔的多边形。

google.maps.Polygon.prototype.getGeoJSON = function()  {
    let geoJSON = {
        type: "Polygon",
        coordinates: []
    };

    let paths = this.getPaths().getArray();

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

        for (point of points)  {
            if (firstPoint === false)  {
                firstPoint = point;
            }

            pathArray.push([point.lng(), point.lat()])
        }

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

        geoJSON.coordinates.push(pathArray);
    }

    return geoJSON;
};