• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
logo web Geoinnova

Geoinnova

Consultoría y Formación en SIG y Medio Ambiente

  • Geoinnova
    • Asociación
    • Equipo
    • Visor de proyectos Geoinnova
    • Geolibrería
    • Alianzas Estratégicas
  • Consultoría
    • Consultoría y Desarrollo en Sistemas de Información Geográfica
    • Consultora Ambiental
    • Turismo sostenible
    • Planificación urbana y ordenación del territorio
    • Planes Urbanos de Actuación Municipal – PUAM
    • Geomarketing
  • Servicios
    • Planero Web
    • QElectricGIS
    • Plugins
  • Formación
    • Todos los cursos
    • Webinars
    • Máster y Diplomas
    • Cursos de ArcGIS
    • Cursos de QGIS
    • Cursos de Teledetección
    • Cursos de Medioambiente
  • Medio Ambiente
    • Consultora Ambiental
    • Estudios ambientales para proyectos de energías renovables
    • Estudios de Impacto e Integración Paisajística
    • Evaluación Ambiental Estratégica de planes y programas
    • Estudio de Impacto Ambiental para proyectos
    • Cálculo huella de carbono
    • Educación Ambiental
    • Cursos de Medioambiente
  • Coworking
  • Blog
    • SIG
    • Medio Ambiente
    • Teledetección
    • Programación y Desarrollo SIG
    • Corporativo
  • Contacto
    • Soporte de Clientes – Tickets
Programación y Desarrollo SIG SIG

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

20/07/2021 Deja un comentario

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.

Esri-Leaflet

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
Añadir Leaflet y Esri Leaflet al proyecto
Estilo del mapa (CSS)
Situando el mapa
Carga del mapa
Añadir Capa Base
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/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.2/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) .

L.esri.DynamicMapLayer

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/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.2/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 .

Apúntate a nuestra newsletter semanal

"*" señala los campos obligatorios

Consentimiento*
*
Este campo es un campo de validación y debe quedar sin cambios.

Información legal

Cumplimos el RGPD (Reglamenteo General de Protección de Datos) y esta en la primera información que debes saber. Responsable: Asociación Geoinnova. Finalidad: Apuntarte en nuestra base de datos para poder enviarte nuestra newsletter y cualquier otra información de interes. Legitimidad: Nos das tu consentimiento para comunicarnos contigo. Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos. Para una información más ampliada entra a nuestra política de privacidad.

Artículos relacionados

Cómo crear un modelo digital del terreno a partir de múltiples bloques LIDAR con CloudCompare
24/01/2023
Cómo documentar proyectos en QGIS con el complemento ‘Project Reports’
17/01/2023
¿Qué es la Agenda Urbana Española?
12/01/2023

Eva Rabasco

Full Stack Developer. Comprometida con el diseño y desarrollo de materiales innovadores basados en la Web. Amplia experiencia en tecnologías específicas del lado cliente y del servidor. Actualmente forma parte del equipo de Programación y Desarrollo SIG de la Asociación Geoinnova. Además desarrolla su labor como docente en algunos de los cursos de bases de datos y de programación SIG del catálogo de cursos de Geoinnova.

Interacciones con los lectores

¿Quieres comentarnos algo? Adelante! Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Footer

Menú Legal

  • Aviso Legal
  • Política de privacidad
  • Política de cookies
  • Términos y condiciones

Otras páginas de interes

  • Promociones y descuentos en formación
  • Formación bonificada FUNDAE

Contacto

Calle Luis Morondo Urra nº 8 Bajo A
31006 Pamplona (Navarra)
info@geoinnova.org
+34 948 117 137

Horario de atención

Lunes a Viernes - 09:00 a 14:00 y de 16:00 a 19:00.
Fines de semana y Festivos - Exclusivamente por mail.
Horario de Verano (01 de julio al 30 de agosto): De lunes a viernes de 8 a 15h.
Entidad adherida a Confianza Online Certificado de inscripción en el Registro de huella de carbono, compensación y proyectos de absorción Logo Plazox

© 2023 · Desarrollada por Geoinnova en colaboración con OikosMSP

Gestionar el Consentimiento de las Cookies
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Preferencias
{title} {title} {title}