0

I'm trying to add the measure function to the map but I want to active/deactivate the function on a value.

This is the measure code:

    function measure() {

    var sketch;
    var helpTooltipElement;
    var helpTooltip;
    var measureTooltipElement;
    var measureTooltip;

    var continueLineMsg = 'Click to continue drawing the line';

    var pointerMoveHandler = function(evt) {
      if (evt.dragging) {
      return;
    }

    var helpMsg = 'Click to start drawing';

    if (sketch) {
      var geom = (sketch.getGeometry());
      helpMsg = continueLineMsg;
    }

    helpTooltipElement.innerHTML = helpMsg;
    helpTooltip.setPosition(evt.coordinate);

    helpTooltipElement.classList.remove('hidden');
    };

    map.on('pointermove', pointerMoveHandler);

    map.getViewport().addEventListener('mouseout', function() {
      helpTooltipElement.classList.add('hidden');
    });

    var typeSelect = document.getElementById('ruler');

    var draw;

    var formatLength = function(line) {
      var length = ol.Sphere.getLength(line);
      var output;

      if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km';
      } else {
        output = (Math.round(length * 100) / 100) + ' ' + 'm';
      }
      return output;
    };

    function addInteraction() {
      var type = 'LineString';

    draw = new ol.interaction.Draw({
      source: source,
      type: type,
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(0, 0, 0, 0.5)',
          lineDash: [10, 10],
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 5,
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.7)'
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          })
        })
      })
    });

      map.addInteraction(draw);

      createMeasureTooltip();
      createHelpTooltip();

      var listener;
      draw.on('drawstart', function(evt) {

        sketch = evt.feature;

        var tooltipCoord = evt.coordinate;

        listener = sketch.getGeometry().on('change', function(evt) {
        var geom = evt.target;
        var output;
        if (geom instanceof ol.geom.Polygon) {
          output = formatArea(geom);
          tooltipCoord = geom.getInteriorPoint().getCoordinates();
        } else if (geom instanceof ol.geom.LineString) {
          output = formatLength(geom);
          tooltipCoord = geom.getLastCoordinate();
        }
        measureTooltipElement.innerHTML = output;
        measureTooltip.setPosition(tooltipCoord);
        });
      }, this);

        draw.on('drawend',
        function() {
          measureTooltipElement.className = 'tooltip tooltip-static';
          measureTooltip.setOffset([0, -7]);
          sketch = null;
          measureTooltipElement = null;
          createMeasureTooltip();
          ol.Observable.unByKey(listener);
        }, this);

    } //end addInteraction function


    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);
    } // end createHelpTooltip


    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);
    } // end createMeasureTooltip


      if ($("#ruler").val() == "LineString") {
        addInteraction();
      } else if ($("#ruler").val() == "none") {
        map.removeInteraction(draw);
      }

    } // end measure function


    $("#ruler").change( function() {
      if ($("#ruler").val() == "LineString") {
        measure();
      }
    });

Take directly from OL4 examples:

https://openlayers.org/en/latest/examples/measure.html?mode=raw

At the moment the map load without the measure function and when I change to LineString the function start, now how can I stop the measure function to work and remove all the functionality of this layer?

  • you can remove draw interaction from map to stop drawing – Chase Choi Nov 14 '17 at 1:38
  • I found a way (see my answer below) however, I need to think about a better way. I need to add more than one interaction, so I need a simple way to switch between them. – Sebastiano Nov 15 '17 at 8:40
0

At the end I found a solution, I don't know if there are simple ways but for me, it works.

$("#ruler").change( function() {
  if ($("#ruler").val() == "LineString") {
    addInteraction();
  }
  if ($("#ruler").val() == "none") {
    map.removeInteraction(draw);
    vector.getSource().clear(true);
    map.removeLayer(vector);
    $(".tooltip ").remove();
  }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.