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