Tuesday 23 June 2015

javascript - OpenLayers4 stop interaction


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?




Answer



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

No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...