La manera más sencilla que os proponemos es utilizar la API-CNIG, un proyecto del O.A. Centro Nacional de Información Geográfica (CNIG) que sirve de tecnología común a todos los visualizadores del IGN y el CNIG de uso libre.
Para ponerlo en marcha, vamos a entrar en la galería de ejemplos:
Buscamos el ejemplo de «Visualizador base» y lo abrimos en un navegador: https://plataforma.idee.es/resources/GaleriaEjemplos_APICNIG/ejemplos/visualizadorBase01.html
El servicio TMS del PNOA-MA está ya configurado en el control «backgroundlayers» que añadimos al mapa en la línea 34.
Haciendo clic sobre el botón «Imagen», visualizaremos el servicio TMS del PNOA-MA directamente.
Para poder consumirlo desde un HTML en local, copiamos y pegamos el código en un archivo nuevo con extensión HTML.
Añadimos en la línea 34 «M.proxy(false)», quedando el código de la siguiente manera:
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="cnig" content="yes">
<title>Visor base</title>
<!-- Estilo de la API -->
<link type="text/css" rel="stylesheet" href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css">
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Contenedor principal del mapa -->
<div id="mapjs" class="m-container"></div>
<!-- Ficheros javascript de la API -->
<script type="text/javascript" src="https://componentes.cnig.es/api-core/vendor/browser-polyfill.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script>
<script type="text/javascript">
// Configuración del mapa
M.proxy(false)
const mapjs = M.map({
container: 'mapjs', //id del contenedor del mapa
controls: ['panzoom', 'scale*true', 'scaleline', 'rotate', 'location', 'backgroundlayers'],
zoom: 5,
maxZoom: 20,
minZoom: 4,
center: [-467062.8225, 4683459.6216],
});
</script>
</body>
</html>
Podemos abrirlo con un navegador para ver el resultado:
La API CNIG permite controlar el aspecto del visualizador; zoom, centrar el mapa en un punto determinado, añadir una herramienta de búsqueda y otro elementos. Si quieres saber más consulta la documentación completa y la galería de ejemplos.
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.
No hay comentarios:
Publicar un comentario