Как динамически изменить меру, ранее сделанную элементом управления мерой?

Question

Используя OpenLayers 4.6.5, я создал карту с помощью пользовательского инструмента измерения с рисованием, изменением, выбором и привязкой взаимодействий на основе примеров Openlayers и qgis2web кода.

См. Этот кодовый блок https://codepen.io/agiudiceandrea/pen/xeEbzv

var draw;
function addDrawInteraction() {
  draw = new ol.interaction.Draw({
    source: measureSource,
    type: 'Polygon'
    // a style: ...//
  });

  var listener;
  draw.on('drawstart',
    function(evt) {
      selectAltClick.getFeatures().clear();
      sketch = evt.feature;
      var tooltipCoord = evt.coordinate;
      listener = sketch.getGeometry().on('change', function(evt) {
        var geom = evt.target;
        var output;
        output = formatArea((geom));
        tooltipCoord = geom.getInteriorPoint().getCoordinates();
        measureTooltipElement.innerHTML = output;
        measureTooltip.setPosition(tooltipCoord);
      });
    }, this);
  draw.on('drawend',
    function(evt) {
      measureTooltipElement.className = 'tooltip tooltip-static';
      measureTooltip.setOffset([0, -7]);
      sketch = null;
      measureTooltipElement = null;
      createMeasureTooltip();
      ol.Observable.unByKey(listener);
    }, this);
}

Для изменения и выбора взаимодействий следует использовать ранее выбранный многоугольник меры, а затем изменять его, обновляя отображаемое значение меры.

function createHelpTooltip() {
  if (helpTooltipElement) {
    helpTooltipElement.parentNode.removeChild(helpTooltipElement);
  }
  helpTooltipElement = document.createElement('div');
  helpTooltipElement.className = 'tooltip hidden';
  helpTooltip = new ol.Overlay({
    element: helpTooltipElement,
    offset: [15, 0],
    positioning: 'center-left'
  });
  map.addOverlay(helpTooltip);
}
function createMeasureTooltip() {
  if (measureTooltipElement) {
    measureTooltipElement.parentNode.removeChild(measureTooltipElement);
  }
  measureTooltipElement = document.createElement('div');
  measureTooltipElement.className = 'tooltip tooltip-measure';
  measureTooltip = new ol.Overlay({
    element: measureTooltipElement,
    offset: [0, -15],
    positioning: 'bottom-center'
  });
  map.addOverlay(measureTooltip);
}

Я не могу понять, как сделать так, чтобы значение меры для выбранного многоугольника меры изменилось в соответствии с новой измененной площадью поверхности многоугольника.

Может кто-нибудь дать мне несколько советов?

EDIT:

Благодаря пользовательскому взаимодействию Modify (имитируя пользовательское взаимодействие с Draw), теперь мне удавалось создавать новый всплывающий подсказок для измерения каждый раз, когда я изменяю ранее созданный многоугольник меры (см. Этот новый кодовый блок * 1022). *https://codepen.io/agiudiceandrea/pen/xeEEox), но ... как удалить ранее созданную всплывающую подсказку, связанную с этим многоугольником?

var modifyInteraction;
function addModifyInteraction() {
  modifyInteraction = new ol.interaction.Modify({
    features: selectAltClick.getFeatures(),
  });

  var listener;
  modifyInteraction.on('modifystart',
      function(evt) {
        sketch = evt.features.item(0);
        var tooltipCoord = evt.coordinate;
        listener = sketch.getGeometry().on('change', function(evt) {
          var geom = evt.target;
          var output;
          output = formatArea((geom));
          tooltipCoord = geom.getInteriorPoint().getCoordinates();
          measureTooltipElement.innerHTML = output;
          measureTooltip.setPosition(tooltipCoord);
        });
      }, this);
  modifyInteraction.on('modifyend',
      function(evt) {
        measureTooltipElement.className = 'tooltip tooltip-static';
        measureTooltip.setOffset([0, -7]);
        sketch = null;
        measureTooltipElement = null;
        createMeasureTooltip();
        ol.Observable.unByKey(listener);
      }, this);
}

Answer 1

Я смог найти способ решить проблему сам ... Хитрость заключалась в том, чтобы назначить уникальный прогрессивный идентификатор многоугольнику меры, а также тот же идентификатор для наложения всплывающей подсказки меры. Затем можно извлечь и изменить ранее созданную всплывающую подсказку по идентификатору многоугольника выбора меры.

Соответствующие модификации находятся в отрисовке и модифицируют взаимодействия и функцию createMeasureTooltip (). Посмотреть этот код https://codepen.io/agiudiceandrea/pen/GLjWro

var draw;
function addDrawInteraction() {
  draw = new ol.interaction.Draw({
    source: measureSource,
    type: 'Polygon'
    // a style: ...//
  });

  var listener;
  draw.on('drawstart',
      function(evt) {
      //[...]unchanged
      }, this);

  draw.on('drawend',
      function(evt) {
        evt.feature.setId(measureIndex++); //adding an index to the measure polygon
        measureTooltipElement.className = 'tooltip tooltip-static';
        measureTooltip.setOffset([0, -7]);
        sketch = null;
        measureTooltipElement = null;
        createMeasureTooltip();
        ol.Observable.unByKey(listener);
      }, this);
}

var modifyInteraction;
function addModifyInteraction() {
  modifyInteraction = new ol.interaction.Modify({
    features: selectAltClick.getFeatures(),
  });

  var listener;
  modifyInteraction.on('modifystart',
      function(evt) {
        sketch = evt.features.item(0);
        modifiedMeasureIndex = sketch.getId(); //retrieves the id of measure polygon to be modified
        measureTooltip = map.getOverlayById(modifiedMeasureIndex); //the related measure tooltip overlay...
        measureTooltipElement = measureTooltip.getElement(); //...and measure tooltip Element
        measureTooltipElement.className = 'tooltip tooltip-measure'; //apply the tooltip-measure stile

        var tooltipCoord = evt.coordinate;

        listener = sketch.getGeometry().on('change', function(evt) {
        //[...]unchanged
        });
      }, this);

  modifyInteraction.on('modifyend',
      function(evt) {
        measureTooltipElement.className = 'tooltip tooltip-static';
        measureTooltip.setOffset([0, -7]);
        sketch = null;
        measureTooltipElement = null;
        measureTooltip = map.getOverlayById(measureIndex); //restores the new overlay yet created...
        measureTooltipElement = measureTooltip.getElement(); //...and the related Element...
        //createMeasureTooltip(); //...so we can avoid to create a new one
        ol.Observable.unByKey(listener);
      }, this);
}

function createMeasureTooltip() {
  if (measureTooltipElement) {
    measureTooltipElement.parentNode.removeChild(measureTooltipElement);
  }
  measureTooltipElement = document.createElement('div');
  measureTooltipElement.className = 'tooltip tooltip-measure';
  measureTooltip = new ol.Overlay({
    element: measureTooltipElement,
    id: measureIndex, //ads an index to the measure tooltip overlay
    offset: [0, -15],
    positioning: 'bottom-center'
  });
  map.addOverlay(measureTooltip);
}