[GIS] How to create circular polygon in openlayers 3

circlejavascriptopenlayers

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!

Best Answer

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/

Related Question