CODEWITHSUNDEEP
javascriptopenlayers
Geographos
Geographos

Reputation: 1456

OpenLayers - Circle coordinates are missing

I would like to have an option to export my drawings as geoJSON files. So far I've managed perfectly with all of them except for the circle, which comes admittedly with no geometries at all!

enter image description here

I know, that GeoJSON format can render a pure circle, and we need to model it as the points as per this thread:

How to define a circle using GeoJson? https://docs.mongodb.com/manual/tutorial/query-a-2dsphere-index/

I am fully aware of it, that's why I started to modify my code in order to make the circle physically visible.

My problem is very similar to this one:

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

and similar to the solution below:

http://geoadmin.github.io/ol3/apidoc/sphere.js.html

After amending the code:

   var wgs84Sphere = new ol.sphere(6378137);

   var circleInteraction = new ol.interaction.Draw({
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);
  var circle = ol.geom.Polygon.circular(wgs84Sphere, ol.proj.toLonLat(center), radius);
  circle.transform('EPSG:4326', 'EPSG:3857');
  geometry.setCoordinates(circle.getCoordinates());
  return geometry;
  },
  type: 'Circle',
  source: vectorLayer.getSource()
  });
  circleInteraction.setActive(false);
  circleInteraction.on('drawend', onDrawend );

I have received an error:

Uncaught TypeError: ol.sphere is not a constructor

which is caused by the OpenLayers library upgrade and is not been valid anymore since version 5.0.0. https://github.com/openlayers/openlayers/issues/9046

regarding this situation, I've tried to change the wgs84Sphere variable

  var polygon_geometry = new ol.geom.Polygon;

  var wgs84Sphere = ol.sphere.getArea(polygon_geometry, projection='EPSG:4326', radius=6378137)

but it didn't work either

Uncaught TypeError: Cannot read properties of undefined (reading SimpleGeometry.js:170

pointing the line

    if (coordinates.length === 0) {

Is it possible to generate the .geoJSON geometries for circle then?

My full JSFiddle is here:

https://jsfiddle.net/pet6h30d/

Upvotes: 1

Views: 651

Answers (1)

Mike
Mike

Reputation: 17897

The parameters for ol.geom.Polygon.circular have also changed so you do not need to construct a sphere, see https://openlayers.org/en/latest/examples/draw-and-modify-geodesic.html If you are not need to modify you only need a polygon

geometryFunction: function(coordinates, geometry, projection) {
  if (!geometry) {
    geometry = new ol.geom.Polygon([]);
  }
  var center = ol.proj.transform(coordinates[0], projection, 'EPSG:4326');
  var last = ol.proj.transform(coordinates[1], projection, 'EPSG:4326');
  var radius = ol.sphere.getDistance(center, last);
  var circle = ol.geom.Polygon.circular(center, radius);
  circle.transform('EPSG:4326', projection);
  geometry.setCoordinates(circle.getCoordinates());
  return geometry;
},

Upvotes: 1

Related Questions