如何动态修改先前由度量控件进行的度量?

时间:2019-04-07 14:21:37

标签: openlayers

我使用OpenLayers 4.6.5创建了一个带有自定义测量工具的地图,该工具具有基于Openlayers examplesqgis2web代码的绘制,修改,选择和捕捉交互的功能。

请参见此密码笔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);
}

我无法弄清楚如何使所选量度多边形的量度值更改为新的修改后的多边形表面积。

有人可以给我一些提示吗?

编辑:

使用自定义的Modify交互(模仿自定义的Draw交互),现在,每次修改先前创建的测量多边形时,我已经设法创建了一个新的测量工具提示(请参阅此新的Codepen { {3}}),但是... 如何删除与该多边形相关的先前创建的测量工具提示?

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);
}

1 个答案:

答案 0 :(得分:0)

我能够自己找到解决问题的方法... 诀窍是为度量多边形分配唯一的渐进ID,并为度量工具倾斜叠加层分配相同的ID。 然后,可以通过选择度量多边形的ID来检索和修改先前创建的度量工具提示。

相关的修改在绘图和修改交互以及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);
}