Soy nuevo en el mundo de los SIG y busco obtener las coordenadas del polígono dibujado en el mapa de mapbox, para poder pasar las coordenadas a mi programa python. En el siguiente programa estoy tratando de capturar todas las coordenadas en la matriz "polyCoord" y mostrar el primer valor cuando se pulsa el botón calcular, sólo para ver si los datos se capturan
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.calculation-box {
height: 140px;
width: 150px;
position: absolute;
top: 210px;
left: 10px;
background-color: rgba(255, 255, 255, .9);
padding: 15px;
text-align: center;
}
#calculate {
min-height: 20px;
background-color: #3887be;
color: #fff;
font-family: 'Open Sans';
border-radius: 5px;
padding: 10px;
cursor: pointer;
margin: 10px 0;
}
p {
font-family: 'Open Sans';
margin: 0;
font-size: 13px;
}
</style>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.16.0/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.16.0/mapbox-gl-draw.css' type='text/css'/>
<div id='map'></div>
<div class='calculation-box'>
<p>Draw a polygon using the draw tools.</p>
<div id='calculate' class='button button'>Calculate area</div>
<div id='calculated-area'></div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicnVjaGl0Z2FyZyIsImEiOiJlMGE3MDc1NjYyYjViYzk0ZWViNzJjNzg4MjZmYjc2OCJ9.FTIkEHn2TR64Ndim1tgL2Q';
/* eslint-disable */
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/satellite-v9', //hosted style id
center: [-91.874, 42.760], // starting position
zoom: 12 // starting zoom
});
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
}
});
map.addControl(draw);
var calcButton = document.getElementById('calculate');
calcButton.onclick = function() {
var data = draw.getAll();
var polyCoord = turf.coordAll(data);
if (data.features.length > 0) {
var area = turf.area(data);
// restrict to area to 2 decimal points
var rounded_area = Math.round(area*100)/100;
var answer = document.getElementById('calculated-area');
answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>'+ 'first co-ordinate' +polyCoord[0];
} else {
alert("Use the draw tools to draw a polygon!");
}
};
</script>
</body>
</html>Por el momento, al hacer clic en calcular no aparece nada, probablemente la declaración "var polyCoord = turf.coordAll(data);" no es válida.
