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– MikeCommented Jul 16, 2020 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– BR75Commented Jul 16, 2020 at 21:12
-
2You could use your own function - I've removed the turf library and created a function based on the turf source code jsfiddle.net/Lmkq4yof– MikeCommented Jul 16, 2020 at 22:10
-
thanks, that works. Can I make this somehow for polygons too?– BR75Commented Jul 17, 2020 at 7:12
Add a comment
|
1 Answer
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);
geometry.setCoordinates([section.concat([section[0]])]);
return geometry;
};
