0

I add the function drag on a feature that I draw, but OpenLayers 4 seems that when you modify a feature, the new index of the one you modify now is different.

How can I remove that function from the core? or exist an alternative to prevent this?

This is what I use to add the drag function.

$("#markdrag").click(function(e) {

  e.preventDefault();

  var sel = document.getElementById('tlfeature');
  // get ID of the current marker
  var ids = sel[sel.selectedIndex].id;
  var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([Msource.getFeatures()[ids]]),
    style: null
  });
});

Where IDS is the index of the feature, but if I draw 2 features and drag the 1st at the end of the interaction the index is now 1 and not 0.

I need to work on Index because when I draw a marker I have a function that:

populates the drop-down menu with the marker (name = Marker + source index) add a Textarea (bind to the marker ID(source index) so when you change the marker you have a related Textarea) I'm working on this events to create all of these.

drawLayer.on("change", function(){
  // remove the interaction when you plot one marker
  map.removeInteraction(draw); 
});

// occurs when you finish to draw the current element
draw.on("drawend", function(){
  // function to create everything
  drawing();
})

here a screenshot of how it looks enter image description here

0

At the end, I approach the problem with another method: I'm using a var counter to prevent launching the function when I use the remove button (When I delete a feature the source change, so execute the function even if i'm not adding but removing), assign an ID at the features and call them by ID

drawLayer.on("change", function(){
  map.removeInteraction(draw);

  if (counter == "true") {
    counter = "false";
    var ind = Msource.getFeatures().length - 1;
    Msource.getFeatures()[ind].setId(MarkId - 1);
  }
});

var MarkId = 0;

function drawing(){

  counter = "true";
  MarkId += 1;

  $('<option>', { 'value': (MarkId -1), 'text': 'Marker ' +(MarkId) }).attr('id', MarkId - 1).appendTo('#tlfeature');

  $('<textarea>', { 'name': 'Marker ' +MarkId, 'rows': '4', 'class': (MarkId -1), 'placeholder': "enter text..." }).appendTo('.textDiv');

} // end drawing

// drag button
$("#markdrag").click(function(e) {

  e.preventDefault();

  // prevent error enabling the click just if the value of the option selected is not empty
  if ($('#tlfeature').val() != null) {

    var sel = document.getElementById('tlfeature');
    // get ID of the current marker
    var ids = sel[sel.selectedIndex].id;

    //var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
    var dragInteraction = new ol.interaction.Modify({
        features: new ol.Collection([Msource.getFeatureById(parseInt(ids))]),
        style: null
    });

    map.addInteraction(dragInteraction);


    // remove the interaction when the translate of the feature end
    dragInteraction.on("modifyend", function(){
      map.removeInteraction(dragInteraction);

    }); // end dragInteraction.on

  }

}); // end #markdrag click

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.