1

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

Improve this question

1 Answer 1

Reset to default
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
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.