Cómo cargar un TMS en API-CNIG como capa independiente

Para añadir una capa TMS en la API-CNIG como capa independiente partimos del siguiente ejemplo. Sobre ese código vamos a introducir la constante para añadir una layer del tipo TMS.

Puedes consultar todas las propiedades sobre capas TMS en la documentación de la API-CNIG. En este caso vamos a utilizar el servicio de TMS de Cartografía Ráster de España, porque el PNOA-MA ya está incluido como capa base. Cambiando los parámetros url, name y projection se puede añadir cualquier otro servicio TMS.

// Configuración de la capa TMS 'Mapa raster'

const tms = new M.layer.TMS({
        url: 'https://tms-mapa-raster.ign.es/1.0.0/mapa-       raster/{z}/{x}/{-y}.jpeg',
        name: 'Mapa ráster',
        projection: 'EPSG:3857',    
        minZoom: 6,
        maxZoom: 20,
        visibility: true,
        }, {});

mapjs.addLayers([tms]);

Al ser una capa independiente, si añadimos el control selector de capas podemos controlar desde el navegador si está visible o no. Vamos a añadir también las librerías y controles para poder activarla o desactivarla:

• Añadimos el estilo para el plugin:

<!-- Estilos de los plugins añadidos -->

<link href="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.css" rel="stylesheet" />

• Añadimos el Javascript para el plugin TOC:

<!-- Ficheros javascript de los plugins añadidos-->

<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.js"></script>

• Y por último, en la sección <script> se introduce el código que añade el plugin

// Configuración de los plugins

    const mp8 = new M.plugin.TOC({
    collapsed: true,
    collapsible: true,
    });

mapjs.addPlugin(mp8);

El resultado es el siguiente.

El código completo del ejemplo lo puedes encontrar aquí: ejemplo TMS.

Si quieres aprender más sobre cómo utilizar los servicios TMS en diferentes librerías consulta esta entrada del blog (ver entrada).

Publicado por A^2, Cecilia Poyatos Hernández.