javascript - 无法在 Openlayers 3 中将绘制的圆的特征保存为 JSON

Question

所以，事情是这样的:我想在 OL3 中的 map 上画一个圆圈，然后将其保存到 JSON 文件中。据我了解，您无法将圆形几何图形写入 JSON ( https://github.com/openlayers/ol3/issues/3552 )。我使用 OL3 示例来绘制形状，并将其更改为使用 ol.geom.Polygon.circular 方法以避免使用圆形几何图形。当我尝试保存它时，我收到“TypeError:循环对象值”。

if (value) {
var geometryFunction, maxPoints;
    if (value === 'Circle') {
        value='Circle';
        maxPoints=2;
        geometryFunction = function (coordinates, geometry) {
        if (!geometry) {
        geometry = new ol.geom.Polygon(null);
                    }
      var center = coordinates[0];
      var last = coordinates[1];
      var dx = center[0] - last[0];
      var dy = center[1] - last[1];
      var radius = Math.sqrt(dx * dx + dy * dy);
      geometry = ol.geom.Polygon.circular(wgs84Sphere, center, radius);
      return geometry;
                }; 
            draw = new ol.interaction.Draw({
                features:features,
                type: value,
                geometryFunction: geometryFunction,
                maxPoints: maxPoints
            });
            map.addInteraction(draw);

这就是我保存 JSON 的方式:

var writer = new ol.format.GeoJSON();
var geojsonStr = writer.writeFeatures(source.getFeatures());
alert(geojsonStr);

我很确定一定有一种方法可以使用 ol.geom.Polygon.fromCircle 或 ol.geom.Polygon.circular 绘制圆并将其保存为 JSON。有什么想法吗？

Answer 1

使用自定义geometryFunction时，您必须使用作为第二个参数传递给几何函数的现有geometry(如果可用)。我更新了你的 fiddle :http://jsfiddle.net/px6ks0am/1/ .

成功的关键是以下geometryFunction，它还负责正确地重新投影圆形多边形:

var wgs84Sphere = new ol.Sphere(6378137);
function geometryFunction(coordinates, geometry) {
  if (!geometry) {
    geometry = new ol.geom.Polygon(null);
  }
  var center = coordinates[0];
  var last = coordinates[1];
  var dx = center[0] - last[0];
  var dy = center[1] - last[1];
  var radius = Math.sqrt(dx * dx + dy * dy);
  var circle = ol.geom.Polygon.circular(wgs84Sphere, ol.proj.toLonLat(center), radius);
  circle.transform('EPSG:4326', 'EPSG:3857');
  geometry.setCoordinates(circle.getCoordinates());
  return geometry;
}