Блог

Мне нужно определить, когда вершина была добавлена в строку, когда она рисуется или редактируется. То, как я делаю это сейчас, работает, но кажется довольно неуклюжим, поэтому мне интересно, пропускаю ли я «наблюдаемое» событие или есть более элегантный способ захвата новых вершин.

Сейчас я добавляю свое собственное свойство к функции, которая отслеживает, сколько было вершин, а затем проверяет его на фактическое количество вершин в каждом событии «изменения», в основном:

 draw.on('drawstart',
  function(evt) {
    var sketch = evt.feature;
    var sketchGeom = sketch.getGeometry();
    // the 'change' event will will fired by mouse move or mouse click
    sketchGeom.on('change', function(evt) {
      // check the actual number of verticies against
      // my 'nodeCount' to see if the 'change' event
      // has created a vertex
    });
    sketchGeom.set('nodeCount', 1);  // add my own property to track the number of verticies
  },
  this);
  

Другой подход, который я видел, заключается в том, чтобы следить за щелчками по карте, а не следить за изменениями в функции, но это не вписывается в мой поток, а также наблюдение за событием ‘change’.

Итак, есть ли событие ‘vertexAdded’ или что-то подобное, что я упустил из виду?

РЕДАКТИРОВАТЬ: основываясь на предложении Майка, я немного изменил свой код ниже, он по-прежнему кажется запутанным. Я добавляю свое собственное свойство ‘nodeCount’ к геометрии, которое я увеличиваю при щелчках мыши. Затем я могу проверить свое свойство ‘nodeCount’ на соответствие фактической длине геометрии. Если OL добавил вершину из-за перемещения мыши, тогда длина геометрии будет больше моего количества, и я знаю, что имею дело с перемещением мыши, в противном случае они равны, и я знаю, что имею дело с щелчком.

 var draw = new Draw({  // import Draw from 'ol/interaction/Draw.js';
  source: source,
  type: 'LineString',
  condition: function(evt) {
    var res = noModifierKeys(evt);  // import {noModifierKeys} from 'ol/events/condition.js';
    var features = draw.getOverlay().getSource().getFeatures();
    if (res amp;amp; features.length) {
      let geom = features[0].getGeometry();
      geom.set('nodeCount', geom.getCoordinates().length); // add my own property
    }
    return res;
  }
});

draw.on('drawstart',
  function(evt) {
    var sketchGeom = evt.feature.getGeometry();
    // the 'change' event will be fired by mouse-move or mouse-click
    sketchGeom.on('change', function(evt) {
      let geom = evt.target;
      let verticesLength = geom.getCoordinates().length;
      let nodeCount = geom.get('nodeCount') // fetch my property

      if (verticesLength === nodeCount) { // a new vertex has been created by a mouse click
        // handle a mouse-click
      } else if (verticesLength > nodeCount) { // a new vertex has been created by mouse move (not by a click, which would have incremented nodeCount)
        // handle a mouse-move
      }
      // do things that are common to mouse-move and mouse-click
    });
  },
this);
  

Вы можете обернуть функцию условия по умолчанию в свою собственную функцию, чтобы перехватывать любые клики, которые добавляют вершины. В OL5 объект эскиза можно получить с помощью getOverlay()

   var draw = new ol.interaction.Draw({
    source: source,
    type: 'LineString',
    condition: function(evt) {
      var res = ol.events.condition.noModifierKeys(evt);
      var features = draw.getOverlay().getSource().getFeatures();
      if (res amp;amp; features.length) {
        console.log(features[0].getGeometry().getCoordinates().length);
      }
      return res;
    }
  });