Question

我正在构建一个React应用程序，允许用户通过绘制叠加多边形来定义Google地图组件中的绘图。每次用户绘制多边形时，我都想推送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

您可以使用转化库（例如fiddle）在Google重叠对象和geojson有效文字之间进行转换。（免责声明：我过去曾为Wicket做过一些贡献，以适应我自己的使用案例）

我根据示例Simple Polygons

显示了Kotlin Reference

var triangleCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757},
  {lat: 25.774, lng: -80.190}
];


var bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

 var wicket=new Wkt.Wkt(),
     wktpolygon= wicket.fromObject(bermudaTriangle);

 console.log(wktpolygon.toJson());

确保打开控制台以查看转换后的多边形

Answer 3

基于@Boris_K的答案，这是一个更可靠的解决方案，该解决方案：

扩展google.maps.Polygon。
符合rfc7946，因此第一个点和最后一个点相同。
也应适用于带孔的多边形。

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;
};

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

3 个答案: