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.
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.
