¿Cómo usar servicios WMTS de ArcGIS con ESRI Leaflet?

ESRI (Environmental Systems Research Institute), empresa líder en soluciones geoespaciales desde hace más de 50 años, nos proporciona un conjunto de plugins que nos permiten utilizar servicios de ArcGIS con Leaflet: Esri Leaflet. Esta librería, dispone de numerosos ejemplos y su API está muy bien documentada.

El objetivo de Esri Leaflet no es reemplazar la API de ArcGIS para JavaScript sino proporcionar plugins sobre algunos aspectos de ArcGIS Platform para los desarrolladores que prefieren crear aplicaciones de mapeo con Leaflet.

Dentro de los numerosos complementos y funcionalidades de Esri Leaflet, encontramos DynamicMapLayer, que nos va a posibilitar la carga de servicios WMTS.

WMTS (Web Map Tile Service) es un estándar definido por el OGC como un método sencillo para servir y obtener teselas de mapas georeferenciados. A diferencia del WMS (Web Map Service) WMTS entrega mosaicos, generalmente de tamaño de 256×256 píxeles, mientras que WMS entrega una imagen por solicitud.

La principal ventaja de WMTS es que se pueden pre-renderizar en el lado del servidor y almacenar en caché en el lado del cliente. Esto reducirá el tiempo de carga de los datos y el ancho de banda.

Leaflet trae de forma nativa la clase L.TileLayer.WMS para cargar un servicio WMS, sin embargo no ocurre lo mismo para servicios WMTS.

A continuación, vamos a mostrar un ejemplo de uso de dynamicMapLayer, que extiende de la clase L.esri.RasterLayer de la librería Esri Leaflet. Concretamente vamos a usar el servicio REST de Cartografía Básica del portal de Información Geográfica de la Xunta de Galicia.

Servicio REST de Cartografía Básica del portal de Información Geográfica de la Xunta de Galicia

Ejemplo de uso de dynamicMapLayer ocultar

1. Añadir Leaflet y Esri Leaflet al proyecto

2. Estilo del mapa (CSS)

3. Situando el mapa

4. Carga del mapa

5. Añadir Capa Base

6. Añadir el servicio WMTS

Añadir Leaflet y Esri Leaflet al proyecto

Antes de empezar a tocar código, debemos incluir las librerías javascript y el css tanto Leaflet como de Esri Leafltet. La forma más sencilla de cargar estas librerías es a través de CDN.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>DynamicMapLayer</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
    integrity="sha512-myckXhaJsP7Q7MZva03Tfme/MSF5a6HC2xryjAM4FxPLHGqlh5VALCbywHnzs2uPoF/4G/QVXyYDDSkp5nPfig=="
    crossorigin=""></script>
</head>

Estilo del mapa (CSS)

Configuraremos el mapa para que ocupe el ancho completo de la pantalla y no tenga ningún margin ni padding. Esto lo incluiremos después de la etiqueta añadida anteriormente y antes del cierre la etiqueta <head>.

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>

Situando el mapa

Para situar el mapa cuyo identificador ya hemos nombrado en la configuración de los estilos (id=’map’), debemos indicarlo mediante la etiqueta <div> e incluirla dentro del body.

<body>
  <div id="map"></div>
</body>

Carga del mapa

Para cargar el mapa, necesitamos indicarle a Leaflet que utilice el elemento con id «map». Las siguientes instrucciones se incluirán dentro de la etiqueta <script>.

const map = L.map('map').setView([42.8802625, -8.5797893], 9);

L.map es la clase que usaremos para crear y manipular el mapa. La función setView nos centrará el mapa en las coordenadas que se indiquen (lat, lng) y con el nivel de zoom que deseemos.

Añadir Capa Base

Aunque no sería necesario, podríamos añadir una capa base de OSM con L.tileLayer(). Crear un tileLayer conlleva establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa. Usaremos el método addTo() para añadir la capa al mapa

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors, CC-BY-SA</a>',
    maxZoom: 18
    }).addTo(map);

Añadir el servicio WMTS

Por último, cargaremos el servicio WMTS a través de la clase L.esri.DynamicMapLayer. Como opciones requeridas debemos indicar la url del servicio (puedes ver el listado completo de opciones, métodos y eventos en su documentación) .

En nuestro caso la url del servicio será la siguiente:

L.esri.dynamicMapLayer({
    url: 'https://ideg.xunta.gal/servizos/rest/services/MapasBase/MapaBase_2020/MapServer/WMTS',
    opacity: 0.7
  }).addTo(map);

Y con estas pocas líneas de código y gracias a Esri Leaflet ya tendríamos cargado nuestro servicio WMTS.

El código completo del proyecto es:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>DynamicMapLayer</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
    integrity="sha512-myckXhaJsP7Q7MZva03Tfme/MSF5a6HC2xryjAM4FxPLHGqlh5VALCbywHnzs2uPoF/4G/QVXyYDDSkp5nPfig=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; } 
  </style>
</head>
<body>

<div id="map"></div>

<script>
  const map = L.map('map').setView([42.8802625, -8.5797893], 9);

  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors, CC-BY-SA</a>',
    maxZoom: 18
    }).addTo(map);

  L.esri.dynamicMapLayer({
    url: 'https://ideg.xunta.gal/servizos/rest/services/MapasBase/MapaBase_2020/MapServer/WMTS',
    opacity: 0.7
  }).addTo(map);

</script>

</body>
</html>

Puedes ver el resultado del script y probar a modificar el código en el siguiente mapa.

Esta entrada está motivada por recientes trabajos de desarrollo de visores web. Para más información sobre este tipo de servicios puede consultar la web del Área de Sistemas de Información Geográfica y Desarrollo de Geoinnova .