I'm trying to draw a Bezier curve in OpenLayers (geometryFunction2) but there is something wrong with my approach I don't get. The first line seems fine but I can't place the next one. It work's fine with turf.js (geometryFunction). I'm trying that with a LineString geometry but I would also like to know if I could do that with Polygon lines also?


  • See github.com/openlayers/openlayers/issues/896 Here is the draw interaction fiddle linked there updated to OpenLayers 6 jsfiddle.net/79n4ockt – Mike Jul 16 '20 at 21:03
  • I’m aware of that thread but that solution you mentioned uses turf js. I would like to know how I can apply a custom mathematical Formular – R. Kut Jul 16 '20 at 21:12
  • 2
    You could use your own function - I've removed the turf library and created a function based on the turf source code jsfiddle.net/Lmkq4yof – Mike Jul 16 '20 at 22:10
  • thanks, that works. Can I make this somehow for polygons too? – R. Kut Jul 17 '20 at 7:12

For a polygon you would need a smooth transition at the start/end of the ring, which you could get by wrapping the line coordinates three times (increasing the default resolution used in the calculation to match) then taking the middle section of the curve

var geometryFunction = function(coordinates, geometry) {
        if (!geometry) {
          geometry = new ol.geom.Polygon([]);
        var extendedCoordinates = bezier(coordinates.concat(coordinates,coordinates,[coordinates[0]]), {resolution: 30000});
        var length = extendedCoordinates.length / 3;
        var section = extendedCoordinates.slice(length, length * 2);
        return geometry;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.