Search code examples
javascriptopenlayers-3

ol.interaction.Draw: write unique text to every single feature drawn


I modified the "Draw features example" on OL 3.6.0 and want to let the user add his own annotations when he is drawing points, polygons, etc. by input-form (text).

I let jquery listen to the actual content in the input-form and return this value to the draw.interaction.

This part works.

But when the input text changes, the annotation on every single feature changes to this new value - not the behaviour I want. The annotations should keep their values.

var inputvalue = 'default description';
...
draw.on('drawend', function (evt) {
  console.log('input:' + inputvalue)
  var oldname = evt.feature.get(name);
  evt.feature.set(name, inputvalue);
  var newname = evt.feature.get(name);
  inputvalue = newname;
  vector.setStyle(personalmarker(inputvalue));
return inputvalue;
});

and the important part in the stylefunction

function personalmarker(text) {
  ... 
  var higlighttext = new ol.style.Text({
    text: text,
  });

return new ol.style.Style({
  text: higlighttext,
  fill: fill,
  stroke: stroke,
  image: image

});

DEMO: http://jsfiddle.net/wx7p40dc/2/

So I guess i need to handle with some feature-ID? Or is the problem the drawend-event?


Solution

  • Set your style to the feature itself. Use this way:

    draw.on('drawend', function (evt) {
        console.log('input:' + inputvalue)
        evt.feature.setStyle(personalmarker(inputvalue));
        evt.feature.set(name, inputvalue);
    });