Consulta a servicios WFS mediante PHP y AJAX

PHP es un lenguaje de código abierto muy popular, especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML. Es un lenguaje de programación que trabaja del lado del servidor, generando un texto plano que se puede insertar en un documento HTML. En lugar de llamar a un archivo externo que se encargue de procesar los datos, el código se interpreta en el servidor por un procesador de PHP que es el que se encarga de ejecutar el código. Utilizaremos esta cualidad para construir un código muy sencillo que nos permita consumir servicios WFS en formato JSON. A continuación escribiremos el código equivalente utilizando AJAX. Esto nos permitirá comparar ambas herramientas.

WFS y GeoJSON

Un servicio WFS es un estándar creado por el OGC para crear, modificar e intercambiar formato vectorial de información geográfica en Internet utilizando HTTP. Es decir es un formato que nos permite acceder a los datos de un mapa. Además tiene la posibilidad de elegir el formato de salida de los datos. En nuestro caso utilizaremos el formato GeoJSON porque es muy utilizado para publicar mapas en la web.

GeoJSON es uno de los formatos vectoriales más utilizados en GIS, es un estándar abierto diseñado para representar elementos geográficos sencillos, junto con sus atributos no espaciales, basado en Javascrip. Soporta los tipos de geometrías: Point, LineString, Polygon, MultiPoint, MultiLineString y MultiPolygon.

Consulta a un servicio WFS mediante PHP

Una consulta a un servicio WFS mediante PHP tiene la siguiente forma:

<?php
$url= 'https://ahocevar.com/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typeName=usa%3Astates&OUTPUTFORMAT=json';
$result = file_get_contents($url); //Capturo la respuesta 
echo "var geojson= [" .$result ."];";
?>

Como vemos es muy sencillo. Entre las marcas de PHP creamos la variable $url que contiene la dirección al servicio WFS. Se realiza una petición de tipo GetFeature a la capa usa:states especificando que la salida sea en formato JSON.

La función file_get_contents()  transmite un fichero completo a una cadena. Esta función devuelve los datos leídos o False en caso de error.  Guardamos el resultado en la variable $result. Como último paso utilizamos la función echo() para añadir a la cadena de texto el nombre de una variable así como una «[»  al inicio de la cadena y otra al final «]», para componer un archivo GeoJSON.

Una vez realizada la petición WFS solo tenemos que crear el mapa a partir de los datos obtenidos. Para esto utilizamos una librería Javascript como Leaflet.

var map = L.map('map').setView([40, -100], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var myStyle = {
	"color": "#ff7800",
	"weight": 5,
        "opacity": 0.65
};

var geoJsonLayer = L.geoJSON(geojson,{
		style: myStyle,
		onEachFeature: function(feature, layer) {
		layer.bindPopup ("<ul><h3>" +feature.properties.STATE_NAME+" </h3><li>Población: " +feature.properties.PERSONS+" Hab</li><li>Superficie: "+feature.properties.LAND_KM+" km2</li></ul>");
	}
}).addTo(map);

En el código anterior realizamos una instancia a la clase L.map y añadimos una capa base con el mapa de OpenStreetMap. A continuación creamos un estilo y la capa geojson a partir de los datos que habíamos obtenido con la consulta PHP al servicio WFS.

Como vemos, es una aplicación muy sencilla que no requiere casi nada. Utilizando el intérprete de PHP del servidor podemos acceder a los datos del mapa y procesarlos, como en este ejemplo asignándole un estilo y un popup:

Consulta a un servicio WFS mediante AJAX

AJAX (Asynchronous JavaScript And XML) es una aplicación que se ejecuta del lado del cliente (en el navegador) mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. Esto quiere decir que en una página web solo se cambia la parte de la página que es necesario actualizar y no toda la página completa. En resuman podemos decir que AJAX es capaz de:

• Leer los datos de un servidor web después de que la página se haya cargado.
• Actualizar una página web sin volver a cargar toda la página.
• Enviar datos a un servidor web  en segundo plano.

Se aconseja utilizar AJAX mediante jQuery por lo que tendremos que llamar a esta librería.

<head>
		
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			  crossorigin="anonymous"></script>
 
	<style>
		#map {
		width: 100%;
		height: 600px; 
		box-shadow: 5px 5px 5px #888;
		}
	</style>
</head>

Utilizamos leaflet para componer nuestro mapa web. En consecuencia utilizamos esta librería para realizar la petición al servicio WFS.

		var map = L.map('map').setView([40, -100], 4);
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
		var owsrootUrl = 'https://ahocevar.com/geoserver/wfs?';
		var defaultParameters = {
			service: 'WFS',
			version: '1.1.0',
		        request: 'GetFeature',
			typeName: 'usa:states',
			outputFormat: 'application/json',
		};
		var parameters = L.Util.extend(defaultParameters);
 
		var URL = owsrootUrl + L.Util.getParamString(parameters);

Ha llegado el momento de utilizar AJAX. Establecemos la url con la petición al servicio WFS y sus parámetros. Esta url es la que se proporciona a AJAX para que realice la petición de los datos.

$.ajax({
	url: URL,
	success: function (data) {
		var geoJsonLayer = L.geoJSON(data,{
		 style: myStyle,
		 onEachFeature: function(feature, layer) {
		 layer.bindPopup ("<ul><h3>" +feature.properties.STATE_NAME+" </h3><li>Población: " +feature.properties.PERSONS+" Hab</li><li>Superficie: "+feature.properties.LAND_KM+" km2</li></ul>");
			}
		}).addTo(map);
	}
});

En el código anterior podemos ver la forma de utilizar jQuery para aplicar AJAX ($.ajax). Una vez que hemos obtenido el resultado de la consulta (success) solo necesitamos crear la función que realice el tratamiento de los datos. En este ejemplo utilizamos la clase L.geoJson de Leaflet a la que pasamos los parámetros de style y onEachFeature,

El código completo es el siguiente:

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
	<head>
		
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
		<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			  crossorigin="anonymous"></script>
 
		<style>
			#map {
			width: 100%;
			height: 600px; 
			 box-shadow: 5px 5px 5px #888;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
		var map = L.map('map').setView([40, -100], 4);
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
		var owsrootUrl = 'https://ahocevar.com/geoserver/wfs?';
		var defaultParameters = {
			service: 'WFS',
			version: '1.1.0',
		    request: 'GetFeature',
			typeName: 'usa:states',
			outputFormat: 'application/json',
		};
		var parameters = L.Util.extend(defaultParameters);
 
		var URL = owsrootUrl + L.Util.getParamString(parameters);
		
		var myStyle = {
		    "color": "#ff7800",
		    "weight": 5,
		    "opacity": 0.65
		};
			
		$.ajax({
			url: URL,
			success: function (data) {
				var geoJsonLayer = L.geoJSON(data,{
		 		style: myStyle,
				onEachFeature: function(feature, layer) {
				layer.bindPopup ("<ul><h3>" +feature.properties.STATE_NAME+" </h3><li>Población: " +feature.properties.PERSONS+" Hab</li><li>Superficie: "+feature.properties.LAND_KM+" km2</li></ul>");
					}
				}).addTo(map);
			}
		});
			   
		</script>
	</body>
</html>

Conclusión

Como hemos visto consumir servicios WFS mediante PHP o AJAX es muy sencillo. Ambos ofrecen muy buen rendimiento por lo que combinándolos con una librería como Leaflet son una muy buena opción para crear mapas en la web.

Si quieres aprender más sobre PHP, AJAX y servicios WFS,  inscríbete en nuestro curso online de webmapping interactivo (Leaflet, MySQL y PostGIS)