Can't save features of drawn Circle to JSON in Openlayers 3

Question

So, here's the thing: I want to draw a circle on my map in OL3 and then save it to a JSON file. As I understood you can't write circular geometry to JSON (https://github.com/openlayers/ol3/issues/3552). I used the OL3 example to draw shapes and changed it to use ol.geom.Polygon.circular method to avoid using circle geometry. When I try to save it I get "TypeError: cyclic object value".

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

That's how I save JSON:

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

I'm pretty sure there must be a way to draw and save circles to JSON using ol.geom.Polygon.fromCircle or ol.geom.Polygon.circular. Any ideas?

Do you store any complex properties (i.e. other than strings or numbers) on your features, e.g. using `feature.set()`? Hard to guess what's going on without seeing your application live. — ahocevar, Dec 21 '16 at 09:33
This is what I have: http://jsfiddle.net/px6ks0am/ Because JSON can't get circular geometry, the written features are empty. How can I avoid using the circle at all or transform it to polygon? — thebat93, Dec 21 '16 at 12:19

score 2 · Accepted Answer · answered Dec 22 '16 at 14:09

When using a custom geometryFunction, you must use the existing geometry that is passed as 2nd argument to the geometry function, if it is available. I updated your fiddle: http://jsfiddle.net/px6ks0am/1/.

The key to success is the following geometryFunction, which also takes care of reprojecting the circular polygon properly:

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

Thanks so much! This is a valueable answer! I could find some some examples of esage of ol.geom.Polygon.circular, but none of them dealt with the actual drawing. Appreciate it! — thebat93, Dec 23 '16 at 06:20

Can't save features of drawn Circle to JSON in Openlayers 3

1 Answers1

Linked