Personalizando los sistemas de coordenadas en Leaflet

por

Leaflet en una popular librería JavaScript ampliamente utilizada para publicar mapas en la WEB.

Sin embargo Leaflet soporta muy pocos sistemas de coordenadas:

  • Leaflet por defecto emplea el EPSG:3857 (Proyección WGS84 / Pseudo-Mercator). Este es el Sistema de Referencia Coordenadas más comúnmente utilizado para crear mapas online y es utilizado por casi todos los proveedores de teselas libres y comerciales. Utiliza la proyección esférica de Mercator.
  • EPSG:4326. (Coordenadas geográficas WGS84). Un Sistema de Referencia de Coordenadas de uso habitual en la comunidad de los SIG. Utiliza una proyección cilíndrica equidistante sencilla.
  • EPSG:3395. Utilizado por algunos proveedores comerciales de teselas. Utiliza la proyección elíptica de Mercator.
  • L.CRS.Simple. Representar una cuadrícula de píxeles. Sirve para representar mapas de juegos, por ejemplo.

Nota

El WGS84 es un sistema de coordenadas geográficas mundial que permite localizar cualquier punto de la Tierra. WGS84 son las siglas en inglés de World Geodetic System 84 (que significa Sistema Geodésico Mundial 1984).

Por lo tanto si queremos utilizar otros sistemas de coordenadas en Leaflet necesitaremos recurrir al plugin Proj4Leaflet.

sistemas de coordenadas en Leaflet

Este complemento de Leaflet añade soporte para el uso de proyecciones tomando como base Proj4js, que es una biblioteca JavaScript que permite transformar las coordenadas de un punto, de un sistema de coordenadas a otro, incluyendo las transformaciones de datum.

Además Proj4Leaflet también añade soporte para las capas GeoJSON en cualquier proyección, mientras que Leaflet por defecto asume que GeoJSON siempre usa WGS84 como su proyección.

Instalación del plugin Proj4Leaflet

En primer lugar tendremos que acudir a la página del plugin Proj4Leaflet y descargarlo. A continuación incluiremos los archivos correspondientes en nuestro código:

<script src="Proj4Leaflet-leaflet-proj-refactor/lib/proj4-compressed.js"></script>
<script src="Proj4Leaflet-leaflet-proj-refactor/src/proj4leaflet.js"></script>

Creación de un CRS (Sistema de Referencia de Coordenadas)

El uso de este complemento comienza con la creación de un L.Proj.CRS para representar la proyección y el CRS que deseamos utilizar.

Su construcción sigue el esquema que mostramos a continuación:

new L.Proj.CRS(<String> código, <String> proj4def,{options})

El código se refiere al nombre del EPSG (European Petroleum Survey Group) de la proyección y que es usado internamente por Proj4js.

Por otro lado Proj4def: es la definición en formato Proj4js del SRC. Estos datos los podemos encontrar el la página web de spatialreference.org , que nos permite realizar búsquedas de cada EPSG.

Puedes obtener más detalles de como consultar un EPSG/SRID en línea en este enlace del blog de MappingGIS.

Por ejemplo si buscamos el EPSG 25830 veremos lo siguiente:

sistemas de coordenadas en Leaflet Spatial reference

Veremos que hay una ventana en que se muestran los formatos disponibles.

Seleccionamos el formato Proj4js format y nos mostrará el texto que tendremos que utilizar:

+proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs

Lo entenderemos mejor con un ejemplo.

Vamos a cargar un servicio WMS del IGN que está en ETRS89/UTM 30 (EPSG 25830):

// Obtención del CRS EPSG:25830.
var crs25830 = new L.Proj.CRS('EPSG:25830',
 '+proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs', //http://spatialreference.org/ref/epsg/25830/proj4/
            {
                resolutions: [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5],
		//Origen de servicio teselado
		//origin:[0,0]
            });

Dependiendo de la configuración de las teselas del servicio WMS, también puede ser necesario indicar algunas opciones adicionales para el CRS. Lo más común es definir un origen para las teselas y la escala o resolución que se usará para los niveles de zoom.

Opciones del plugin

  • origin: Es la coordenada proyectada que usamos como origen del píxel del mapa. Sustituye a la opción de transformación si se establece.
  • transformation: Es una L.tranformation que se utiliza para transformar las coordenadas proyectadas en coordenadas de píxeles. Por defecto es L. Transformación (1, 0, -1, 0).
  • scales: Es una matriz de escales (píxeles por unidad de coordenadas proyectada) con un valor para cada nivel de zoom. Por defecto usa las escalas nativas de Leaflet. Debes usar escalas o resoluciones, no ambas.
  • resolutions: Es una matriz de resoluciones (unidades de coordenadas proyectadas por píxel) para cada nivel de zoom correspondiente. Por defecto utiliza las resoluciones nativas de Leaflet.
  • bound: Un L.Bounds que proporcionan los límites de CRS en coordenadas proyectadas. Si se define, Proj4Leaflet lo utilizará en el método getSize, de lo contrario volverá al tamaño predeterminado de Leaflet para Spherical Mercator.

Una vez que hemos personalizado el CRS lo utilizaremos a continuación para crear el mapa y el servicio WMS:

var map = new L.map('map',
    {
       crs: crs25830,
       minZoom: 0,
       maxZoom: 12,
       center: [40.965, -5.664],
       zoom: 9
});

var layerRasterIgn = new L.tileLayer.wms("http://www.ign.es/wms-inspire/mapa-raster",
    {
       layers: 'mtn_rasterizado',
       crs: crs25830,
       format: 'image/png',
       continuousWorld: true,
       transparent: true,
       attribution: '© Instituto Geográfico Nacional de España'
}).addTo(map);

Sistemas de coordenadas en Leaflet con capas GeoJSON

GeoJSON es un formato estándar abierto diseñado para representar elementos geográficos sencillos que es ampliamente utilizado por Leaflet al permitir el intercambio de datos de manera rápida, ligera y sencilla.

Para utilizar otros sistemas de coordenadas en Leaflet con capas en formato GeoJSON necesitamos utilizar la clase L.Proj.GeoJson.

L.Proj.GeoJson extiende la clase L.GeoJSON para agregar soporte de CRS.

A diferencia de lo que ocurre con la extensión TileLayer, el CRS se define mediante la propiedad name del fenómeno crs que es definido directamente en un objeto GeoJSON. Veamos como hacerlo:

1.- Definimos el sistema de referencia de coordenadas que vamos a utilizar, que es nuevamente el ETRS89/UTM30.

proj4.defs('EPSG:25830', '+proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs');

2.- Creamos el objeto GeoJSON. En este caso contiene las coordenadas de un punto. La parte importante es la que se refiere al fenómeno crs, que como propiedad contiene el nombre del crs que hemos creado anteriormente.

var geojson = {
	  'type': 'Feature',
	  'geometry': {
		'type': 'Point',
		'coordinates': [275815,4538291],
	  },
	  'properties': {
		'name': 'Plaza Mayor de Salamanca'
	  },
	  'crs': {
		'type': 'name',
		'properties': {
			'name': 'urn:ogc:def:crs:EPSG::25830'
		  }
		}
	  };

3.- Por ultimo utilizamos L.Proj.geoJson para insertar el objeto en nuestro mapa:

L.Proj.geoJson(geojson, {
	  'pointToLayer': function(feature, latlng) {
		Las opciones son:return L.marker(latlng).bindPopup(feature.properties.name);
	  }
	}).addTo(map);

Aquí vemos el mapa creado con Leaflet que utiliza como capa base el Mapa Topográfico Nacional con una geometría GeoJSON en el Sistema de Referencia de Coordenadas 25830:

Ver en una página independiente: https://mappinggis.com/visores_webmapping/LeafletProj4_utm30.html

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de webmapping interactivo con Leaflet.