javascript - 将 Google map 中的折线提取为 GeoJSON

Question

我有一张 Google map 。当用户单击时，它会放置一个“开始”标记。第二次单击会在第一次单击和第二次单击之间生成一条折线，并添加“结束”标记。第三次单击将另一个数据点添加到折线，并将“结束”标记移动到最近的单击。没什么特别的:

map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 13
});
map.addListener('click', insertDataPoint);

polyline = new google.maps.Polyline({
            strokeColor: '#000000',
            strokeOpacity: 0.7,
            strokeWeight: 3
}); 
polyline.setMap(map);

plots = [];

... // Bunch of other code that isn't important

function insertDataPoint(e) {   
    var path = polyline.getPath();
    path.push(e.latLng);

    // Logic to set up marker or circle 
    if (plots.length == 0) {
        // Case: first click
        startMarker.setPosition(e.latLng);
        startMarker.setMap(map);
        plots.push(startMarker);                        

    } else {
        if (plots.length != 1) {
            // Case: we have intermediate points between start and end
            var plot = plots.pop();

            var marker = new google.maps.Marker({
                position: plot.getPosition(),
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    fillColor: '#ffffff',
                    fillOpacity: 0.6,
                    strokeColor: '#ffffff',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    scale: 3
                }
            });
            marker.setMap(map);
            plots.push(marker);
        }
        // Case: add an end marker
        endMarker.setPosition(e.latLng);
        if (plots.length == 1) {
            endMarker.setMap(map);
        }
        plots.push(endMarker);
    }
}

我想获取 GeoJSON 格式的标绘点。我知道 Google 最近通过 .toGeoJson() 调用发布了数据层 API，但是，数据自然是空的，因为它没有添加到数据层:

map.data.toGeoJson( function(data) {
    alert(JSON.stringify(data)); // {"type":"FeatureCollections", "features":[]}

所以问题是如何将我的数据(标记和折线)添加到数据层，以便获得甜蜜的 GeoJSON？

注意 - 我知道数据层具有允许用户在 map 上绘图的功能，但我需要按照自己的方式进行操作。

Answer 1

这将创建表示折线的 geoJSON 并将其添加到数据层:

function exportGeoJson() {
    var geoJson = {
        "type": "FeatureCollection",
            "features": []
    };
    var polylineFeature = {
        "type": "Feature",
            "geometry": {
            "type": "LineString",
                "coordinates": []
        },
            "properties": {}
    };
    for (var i = 0; i < polyline.getPath().getLength(); i++) {
        var pt = polyline.getPath().getAt(i);
        polylineFeature.geometry.coordinates.push([
        pt.lng(), pt.lat()]);
    }
    geoJson.features.push(polylineFeature);
    document.getElementById('geojson').value = JSON.stringify(geoJson);
    polyline.setPath([]);
    map.data.addGeoJson(geoJson);
    // Set the stroke width, and fill color for each polygon
    map.data.setStyle({
        strokeColor: 'green',
        strokeWeight: 2
    });
    map.data.toGeoJson( function(data) {
      document.getElementById('exported').value=JSON.stringify(data)
    });

}

proof of concept fiddle

代码片段:

var polyline, map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 13
  });
  map.addListener('click', insertDataPoint);

  polyline = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 0.7,
    strokeWeight: 3
  });
  polyline.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
plots = [];

// Bunch of other code that isn't important

function insertDataPoint(e) {
  var path = polyline.getPath();
  path.push(e.latLng);

  // Logic to set up marker or circle 
  if (plots.length == 0) {
    // Case: first click
    startMarker.setPosition(e.latLng);
    startMarker.setMap(map);
    plots.push(startMarker);

  } else {
    if (plots.length != 1) {
      // Case: we have intermediate points between start and end
      var plot = plots.pop();

      var marker = new google.maps.Marker({
        position: plot.getPosition(),
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: '#ffffff',
          fillOpacity: 0.6,
          strokeColor: '#ffffff',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          scale: 3
        }
      });
      marker.setMap(map);
      plots.push(marker);
    }
    // Case: add an end marker
    endMarker.setPosition(e.latLng);
    if (plots.length == 1) {
      endMarker.setMap(map);
    }
    plots.push(endMarker);
  }
}

function exportGeoJson() {
  var geoJson = {
    "type": "FeatureCollection",
    "features": []
  };
  var polylineFeature = {
    "type": "Feature",
    "geometry": {
      "type": "LineString",
      "coordinates": []
    },
    "properties": {}
  };
  for (var i = 0; i < polyline.getPath().getLength(); i++) {
    var pt = polyline.getPath().getAt(i);
    polylineFeature.geometry.coordinates.push([
      pt.lng(), pt.lat()
    ]);
  }
  geoJson.features.push(polylineFeature);
  document.getElementById('geojson').value = JSON.stringify(geoJson);
  polyline.setPath([]);
  map.data.addGeoJson(geoJson);
  // Set the stroke width, and fill color for each polygon
  map.data.setStyle({
    strokeColor: 'green',
    strokeWeight: 2
  });
  map.data.toGeoJson(function(data) {
    document.getElementById('exported').value = JSON.stringify(data)
  });

}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?"></script>
<input type="button" onclick="exportGeoJson()" value="export GeoJson" />
<div id="map" style="border: 2px solid #3872ac;"></div>
<textarea id="geojson" rows="10" cols="70"></textarea>
<br><b>Exported</b>
<br>
<textarea id="exported" rows="10" cols="70"></textarea>