如何动态修改度量值控件以前创建的度量值？

问题描述

我使用OpenLayers 4.6.5创建了一个带有自定义测量工具的地图，该工具基于Openlayers examples和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);
}

我想不出如何使所选测量多边形的度量值根据新修改的多边形表面积进行相应更改。

有人能给我一些建议吗？

编辑：

使用自定义修改交互组件(模拟自定义绘制交互组件)，现在我已设法在每次修改以前创建的测量多边形时创建新的测量工具提示(请参阅此新代码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);
}

推荐答案

我自己找到了解决问题的方法...诀窍是将唯一的渐进式ID分配给测量多边形，并将相同的ID分配给测量工具覆盖。然后，可以通过选择度量面的ID来检索和修改以前创建的度量值工具提示。

相关修改包含在Draw和Modify交互组件和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);
}

这篇关于如何动态修改度量值控件以前创建的度量值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！