0

mi problema es que necesito poner en una web un mapa donde me permita seleccionar una parte y que me indique lo metros cuadrados.

He visto que con la api de google se puede pero es de pago.

Estoy intentando usar leaflet y he visto que tiene pluging como el draw que se supone deja hacer formas y otro que se llama measure o algo asi que te dice los metros cuadrados de zonas seleccionadas pero no consigo hacerlo funcionar mas alla del mapa normal de leaflet.

3
  • Publica el código de lo que has intentado, para saber donde puede estar el problema.
    – Candid Moe
    el 9 jul. 2020 a las 16:20
  • En realidad no tengo mucho hecho. Simplemente el codigo para que aparezca el mapa. He probado a poner estos plugins segun la web oficial pero no me aclaro. Si alguien me puede ayudar a poner esos 2 plugins se lo agradecería. el 9 jul. 2020 a las 18:27
  • Parece que leaflet.measure hace lo que necesitas, inténtalo y, si algo falla, edita la pregunta para agregar el código y explicar qué es lo que no funciona.
    – Triby
    el 10 jul. 2020 a las 16:57

1 respuesta 1

1

Es cierto con Leaflet Draw se puede crear un herramienta que mida el área de un polígono dibujado. Aqui va un ejemplo de código para dicha herramienta. Copialo y pruébalo en tu mapa.

<div id="map" style="width: 100%; height: 500px;"></div>

<script>
    var map = L.map('map', {
        center: [19.01, -71.22],
        zoom: 8,
    });
    const tileURL = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
    L.tileLayer(tileURL).addTo(map);

    var geometriasDibujadas = L.featureGroup().addTo(map);
    var controlDibujo = new L.Control.Draw ({
        edit: {
            featureGroup: geometriasDibujadas,
            edit: false,
        },
        draw: {
            polygon: true,
            rectangle: false,
            circle: false,
            circlemarker: false,
            polyline: false,
            marker: false,
        }
    });
    map.addControl(controlDibujo);

    var obtenerContenido = function(layer, type) {
        var contenido = null;
        var area = L.GeometryUtil.geodesicArea(layer._defaultShape()),
            areaLegible = L.GeometryUtil.readableArea(area, true),
            contenido = areaLegible;
        return contenido;
    };

    map.on(L.Draw.Event.CREATED, function(e) {
        var layer = e.layer,
            type = e.layerType;
        layer.bindTooltip(obtenerContenido(layer, type), {
            permanent: true,
            direction: 'bottom',
            offset: L.point(0, -10),
        }); 
        geometriasDibujadas.addLayer(layer);
    });

</script>

Procura usar estos cdn's para Draw:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.css" integrity="sha512-vJfMKRRm4c4UupyPwGUZI8U651mSzbmmPgR3sdE3LcwBPsdGeARvUM5EcSTg34DK8YIRiIo+oJwNfZPMKEQyug==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous"></script>

Con la herramienta se dibuja un polígono y de forma automática se inserta una etiqueta con el área en unidades de hectáreas. El valor del área no es exacta (leer documentación)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.