In my api.py file, I have defined some points like this:
(...)
@app.route('/api/pontos/', methods=['GET'])
def get_pontos():
return jsonify({
'pontos': [
[-44.3001,-2.52001, 3, "name1"],
[-44.309468, -2.509284, 4, "name2"],
[-44.307802, -2.557744, 5, "name3"],
(...)
These points can be selected and their characteristics are displayed in the browser.
var selec = new ol.interaction.Select()
selec.getFeatures().on('add', function(e){
var label = typeof (e.element.getProperties().text) != 'undefined' ? e.element.getProperties().text : ''
if(label != ''){
alert(e.element.getProperties().text)
}
})
(...)
function loadPoints(){
axios.get(`/api/pontos`)
.then(function(response){
if(response.status === 200){
var coordsArray = response.data.pontos;
coordsArray.map(coords =>{
var point = new ol.Feature({
geometry : new ol.geom.Point(ol.proj.fromLonLat(coords)),
text : `Preco: ${coords[2]} reais, Bar:${coords[3]} `
});
point.setStyle(pointStyle);
vectorSource.addFeature(point)
});
//Fit nos pontos
map.getView().fit(vectorSource.getExtent());
}
})
}
loadShape('ma')
loadPoints()
Now, I am interested in clicking on two points to calculate the distance between them and display it in the browser.
Despite researching documentation and other questions, I have not been able to find a solution that fits my specific issue.