Search code examples
openlayers-3

How to get coordinates of a user-drawn circle in Openlayers 3?


I have a static image layer in Openlayers3 where user can draw features like circle, point and polygon.

I can get coordinates of Point, Polygon and LineString with this code:

draw_interaction.on('drawend', function(event) {
    var geoJsonGeom = new ol.format.GeoJSON();    
    var pp = geoJsonGeom.writeGeometry(event.feature.getGeometry());
    console.log(pp);
});

This outputs coordinates as expected:

"{"type":"Point","coordinates":[1441.9187662124637,1365.3125032424925]}"

However, I can't figure out how to get coordinates of a Circle. The output in the case of Circle looks like this:

"{"type":"GeometryCollection","geometries":[]}"

Openlayers version is v3.5.0.

EDIT: in order to get center and radius you must use feature itself, not its GeoJSON output (since GeojSON does not have circle):

var circle = event.feature.getGeometry();
console.log('radius:' + circle.getRadius());
console.log('center:' + circle.getCenter());

Solution

  • GeoJSON does not have circle geometries. The proper solution would be to approximate the circle with a polygon before serialisation. You might be able to achieve this with the new geometry option of ol.interaction.Draw see: https://github.com/openlayers/ol3/pull/3673 See also this github issue for some deeper discussion on the subject: https://github.com/openlayers/ol3/pull/3434