從 Google 地圖繪圖管理器多邊形獲取 GeoJSON

Question

我正在構建一個 React 應用程序，它允許用戶通過繪制覆蓋多邊形通過 Google 地圖組件定義繪圖。 每次用戶繪制多邊形時，我都想推送一個 GeoJSON。

文檔在這一點上含糊不清。 我正在使用這種 function：

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 到 go 並從中 vivsect 一個 GeoJSON object ...但想問問是否有人知道已經烘焙到 API 中的東西。

Answer 1

基於@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;
};

Answer 2

好吧，我已經明白了。

首先，聲明一個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 3

您可以使用轉換庫（如Wicket）在Google重疊對象和geojson有效文字之間進行轉換。 （ 免責聲明 ：我過去為Wicket做了一些貢獻，以適應我自己的用例）

我根據Simple Polygons示例做了一個小提琴

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 4

值得一提的是，上述帶有自定義代碼的解決方案有效，但它們並未真正經過生產測試。 有一個基於現有 Google 代碼的解決方案，因此我認為沒有必要在這里重新發明輪子。