How to create circular polygon in openlayers 3?

Question

So i would really like to modify this example: http://openlayers.org/en/v3.0.0/examples/tissot.html?q=circle

Problem is that when I try to apply it to my map it doesn't work, probably because I use OSM style which is not spherical:

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
    new ol.layer.Vector({
      source: vectorSource
    })
  ],
  renderer: 'canvas',
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
    zoom: 2
  })
});

And for the question: how to create circular polygon? As I can see, there are two choices:

1. Somehow convert geom.Circle in geom.Polygon, which I can't do, based on my noob level

2. Create my own function to do that, something like openlayers 2:

   OpenLayers.Geometry.Polygon.createRegularPolygon = function(origin, radius, sides, rotation) {
   var angle = Math.PI * ((1/sides) - (1/2)); if(rotation) { angle += (rotation / 180) * Math.PI; } var rotatedAngle, x, y; var points = []; for(var i=0; i

Has anyone got to the same point in their GIS master life? Which one is better? or is there a hidden path, that only Wise and Strong ones can see? Help me please!

Answer 1

As others have correctly pointed out, the GeoJSON and WKT formats do not support circular geometries in any way. Circles are not in the KML specification either. This makes it a pain when trying to write out a map frame to KML, GeoJSON or WKT.

OpenLayers v3 does have a way to approximate a circle with a polygon, but it isn't pretty as it involves converting to great circle distance. See the API reference for the ol.geom.Polygon.circular method here: http://openlayers.org/en/v3.5.0/apidoc/ol.geom.Polygon.html#circular

An example of the ol.geom.Polygon.circular method is shown below, but can also be seen in this OpenLayers tissot indicatrix example.

 var lowpoly = ol.geom.Polygon.circular(
  /* WGS84 Sphere */
  new ol.Sphere(6378137),
  circle.getCenter(),
  circle.getRadius(),
  /* Number of verticies */
  12);

Alternatively, you can use fromCircle which, at the time of this post, is experimental.

var lowpoly = ol.geom.Polygon.fromCircle(
  circle,
  /* Number of verticies (optional) */
  12,
  /* Start angle (optional) */
  90
);

For something that you can play with, see my jsFiddle here: https://jsfiddle.net/a1syw4od/9/

Answer 2

If you are interested in creating a simple circular polygon then use:

new ol.geom.Circle(
            ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'),
            radius_meters),
            'XY'
        )

Source: http://openlayers.org/en/v3.0.0/apidoc/ol.geom.Circle.html (remove the stable tick at the top of the page)