#StackBounty: #javascript #openlayers Openlayers can't modify drawn features

Bounty: 50

I would like to make a chance for modifying my features in OpenLayers. So far I can only drag them across the map, but I can’t change their shapes at all when drawn.

enter image description here

In the picture above you can spot the blue dot, which just moves along the shape border but is not able to modify it.

I tried to modify my code by using this example:

https://openlayers.org/en/latest/examples/draw-and-modify-geodesic.html

and my piece of code looks like this:

var modifyInteraction = new ol.interaction.Modify({
 features: selectInteraction.getFeatures({
   if (modifyPoint[0] === center[0] && modifyPoint[1] === center[1]) {
    first = transform(polygon[0], projection, 'EPSG:4326');
    last = transform(
      polygon[(polygon.length - 1) / 2],
      projection,
      'EPSG:4326'
    );
     radius = getDistance(first, last) / 2;
   } else {
     first = transform(center, projection, 'EPSG:4326');
     last = transform(modifyPoint, projection, 'EPSG:4326');
     radius = getDistance(first, last);
   }
   const circle = circular(
    transform(center, projection, 'EPSG:4326'),
    radius,
    128
   );
   circle.transform('EPSG:4326', projection);
   geometries[0].setCoordinates(circle.getCoordinates());
   // save changes to be applied at the end of the interaction
   modifyGeometry.setGeometries(geometries);
  ),
  });
   var translateInteraction = new ol.interaction.Translate({
   features: selectInteraction.getFeatures()
  });
  var setActiveEditing = function(active) {
  selectInteraction.getFeatures().clear();
  selectInteraction.setActive(active);
  modifyInteraction.setActive(active);
  translateInteraction.setActive(active);
};
setActiveEditing(true);

and the full fiddle is available here:

https://jsfiddle.net/2yj1ae04/

How can I make these features editable after drawing them in OpenLayers Map?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.