En este blog, exploraremos cómo construir un geovisor web utilizando Leaflet y GeoServer para visualizar capas geoespaciales. Implementaremos capas base como Google Earth y OpenStreetMap, y agregaremos capas WMS desde un servidor GeoServer local, incluyendo la funcionalidad de obtener información emergente (popup) al hacer clic en polígonos.

1. Requisitos previos

Antes de empezar, asegúrate de tener instalado y configurado:

  • GeoServer corriendo en http://localhost:8080/geoserver
  • Capas publicadas en GeoServer con los nombres trigal:parcelas y trigal:vertices
  • Un servidor web o simplemente abrir el HTML en un navegador

2. Estructura del proyecto

El proyecto estará compuesto por tres archivos:

  • index.html → Estructura del visor
  • styles.css → Estilos del mapa
  • script.js → Código Leaflet para manejar las capas y eventos

3. Código del Geovisor

Archivo index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geovisor Parcelas</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="script.js"></script>
</body>
</html>

Archivo styles.css

#map {
    height: 600px;
    width: 100%;
}

Archivo script.js

var map = L.map('map').setView([-17.8, -63.2], 14);

// Capas base
var googleSat = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
});

// Capas WMS desde GeoServer
var parcelas = L.tileLayer.wms("http://localhost:8080/geoserver/trigal/wms", {
    layers: "trigal:parcelas",
    format: "image/png",
    transparent: true
});

var vertices = L.tileLayer.wms("http://localhost:8080/geoserver/trigal/wms", {
    layers: "trigal:vertices",
    format: "image/png",
    transparent: true
});

// Control de capas
var baseMaps = {
    "Google Earth": googleSat,
    "OpenStreetMap": osm
};

var overlayMaps = {
    "Parcelas": parcelas,
    "Vértices": vertices
};

L.control.layers(baseMaps, overlayMaps).addTo(map);
googleSat.addTo(map);

// Obtener información de parcelas al hacer clic
map.on('click', function (e) {
    var url = "http://localhost:8080/geoserver/trigal/wms?service=WMS&version=1.1.1&request=GetFeatureInfo" +
        "&layers=trigal:parcelas&query_layers=trigal:parcelas&bbox=" + map.getBounds().toBBoxString() +
        "&width=" + map.getSize().x + "&height=" + map.getSize().y + "&x=" +
        Math.floor(map.latLngToContainerPoint(e.latlng).x) + "&y=" +
        Math.floor(map.latLngToContainerPoint(e.latlng).y) +
        "&info_format=application/json";
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.features.length > 0) {
                var feature = data.features[0];
                var idpredio = feature.properties.idpredio;
                L.popup()
                    .setLatLng(e.latlng)
                    .setContent("<b>ID Predio:</b> " + idpredio)
                    .openOn(map);
            }
        });
});

4. Explicación del código

  1. Se crea el mapa con Leaflet y se define su centro y nivel de zoom inicial.
  2. Se añaden capas base como Google Earth y OpenStreetMap.
  3. Se agregan capas WMS desde GeoServer para mostrar parcelas y vértices.
  4. Se implementa un control de capas para alternar entre bases y overlays.
  5. Se usa un evento click en el mapa para obtener información de los polígonos mediante una petición WMS GetFeatureInfo.
  6. Se muestra un popup con el idpredio del polígono clicado.

5. Prueba y despliegue

Para probar el visor, solo necesitas abrir index.html en un navegador. Si deseas desplegarlo en un entorno web real, puedes usar un servidor local como XAMPP, WAMP o Python HTTP Server.

Conclusión

Este geovisor permite visualizar información geográfica interactiva a partir de capas publicadas en GeoServer. Leaflet proporciona una solución ligera y flexible para la visualización de datos espaciales en la web. Con más personalización, puedes mejorar este visor añadiendo controles adicionales, estilos personalizados y más capas geoespaciales.

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios! 🚀