Skip to content
gdtel-cnig-develop edited this page Jun 5, 2023 · 76 revisions

5

¿Qué es la API-CNIG?

La API CNIG es una herramienta que permite integrar de una forma sencilla un visualizador de mapas interactivo en cualquier página web y configurarlo consumiendo servicios web WMS, WFS, ficheros KML, etc. Además, provee la capacidad de añadir una gran cantidad de herramientas y controles.

Para adaptarse a las necesidades de los usuarios y ser mucho más flexible, la API CNIG cuenta con dos APIs. De esta manera, es el propio usuario el que escoge la que más se adapte a sus necesidades:

  • Una API REST muy sencilla y documentada que permite incluir un visualizador interactivo en cualquier página web sin necesidad de disponer de conocimientos específicos en programación ni de SIG (Sistemas de Información Geográfica).

  • Una API JavaScript que permite crear desde visualizadores de mapas básicos hasta otros de mayor complejidad.

La API CNIG se presenta como una solución gratuita para la incorporación de clientes de mapas interactivos en nuestras páginas web muy fácilmente.

A continuación se muestra un ejemplo base completo de la explotación de la API JavaScript. Puede verse funcionando en el siguiente enlace.

<!DOCTYPE html>
<html lang="en">

<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">
    <!-- Estilos de los plugins añadidos -->
    <link href="https://componentes.cnig.es/api-core/plugins/ignsearch/ignsearch.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/attributions/attributions.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/xylocator/xylocator.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/mousesrs/mousesrs.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/zoomextent/zoomextent.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.css" rel="stylesheet" />
    <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>
    <!-- Ficheros  javascript de los plugins añadidos-->
    <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/ignsearch/ignsearch.ol.min.js"></script>
    <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/attributions/attributions.ol.min.js"></script>
    <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/xylocator/xylocator.ol.min.js"></script>
    <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.ol.min.js"></script>
    <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/zoomextent/zoomextent.ol.min.js"></script>
    <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/mousesrs/mousesrs.ol.min.js"></script>
    <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.js"></script>

    <script type="text/javascript">
        // Configuración del mapa
        const mapjs = M.map({
            container: 'mapjs', //id del contenedor del mapa
            // Controles para añadir al mapa
            controls: ['panzoom', 'scale*true', 'scaleline', 'rotate', 'location', 'backgroundlayers', 'getfeatureinfo'],
            // Gestión de zoom (zoom, maxZoom y minZoom)
            zoom: 5,
            maxZoom: 20,
            minZoom: 4,
            // Realiza un centrado en el mapa
            center: [-467062.8225, 4683459.6216],
        });
        // Configuración de las capas para añadir al mapa
        const layerinicial = new M.layer.WMS({
            url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
            name: 'AU.AdministrativeBoundary',
            legend: 'Limite administrativo',
            tiled: false,
        }, {});

        const layerUA = new M.layer.WMS({
            url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
            name: 'AU.AdministrativeUnit',
            legend: 'Unidad administrativa',
            tiled: false
        }, {});

        const ocupacionSuelo = new M.layer.WMTS({
            url: 'https://wmts-mapa-lidar.idee.es/lidar',
            name: 'EL.GridCoverageDSM',
            legend: 'Modelo Digital de Superficies LiDAR',
            matrixSet: 'GoogleMapsCompatible',
            visibility: false,
        }, {});

        const kml = new M.layer.KML('KML*Delegaciones IGN*https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml*false*false*true');

        // Se añaden las capas al mapa
        mapjs.addLayers([ocupacionSuelo, layerinicial, layerUA, kml]);
        
        // Configuración de los plugins para añadir al mapa
        const mp = new M.plugin.IGNSearch({
            servicesToSearch: 'gn',
            maxResults: 10,
            isCollapsed: false,
            noProcess: 'municipio,poblacion',
            countryCode: 'es',
            reverse: true,
        });
        const mp2 = new M.plugin.Attributions({
            mode: 1,
            scale: 10000,
        });

        const mp3 = new M.plugin.ShareMap({
            baseUrl: 'https://componentes.cnig.es/api-core/',
            position: 'BR',
        });
        const mp4 = new M.plugin.XYLocator({
            position: 'TL',
        });
        const mp6 = new M.plugin.ZoomExtent();
        const mp7 = new M.plugin.MouseSRS({
            srs: 'EPSG:4326',
            label: 'WGS84',
            precision: 6,
            geoDecimalDigits: 4,
            utmDecimalDigits: 2,
        });

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

        mapjs.addPlugin(mp);
        mapjs.addPlugin(mp2);
        mapjs.addPlugin(mp3);
        mapjs.addPlugin(mp4);
        mapjs.addPlugin(mp6);
        mapjs.addPlugin(mp7);
        mapjs.addPlugin(mp8);
    </script>
</body>

</html>

1.INICIO
   1.1. Componentes de la API-CNIG
   1.2. Documentación y Puntos de acceso
   1.3. Primeros pasos
   1.4. Diagrama API CNIG

2. MAPA
2.1. Capas

 ■ 2.1.1. Fuentes
   • 2.1.1.1. Capas vectoriales
     + Vector
     + WFS
     + GeoJSON
     + KML
     + MVT
     + OGCAPIFeatures
     + MBTilesVector
     + GenericVector
   • 2.1.1.2. Capas ráster
     + WMS
     + WMTS
     + TMS
     + XYZ
     + OSM
     + MBTiles
     + GenericRaster
   • 2.1.1.3. Capas rápidas

 ■ 2.1.2. Simbolización
   • 2.1.2.1. Genérica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.2. Básica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.3. Avanzada
     + Coropletas
     + Proporcional
     + Categorías
     + Estadísticos
     + Mapas de Calor
     + Cluster
     + Línea de flujo
     + Composición

 ■ 2.1.3. Filtros

    2.3. Plugins

2.4. Paneles

  ■ Creación de panel desde cero sin controles

  ■ Tutorial Panel de un único control

  ■ Tutorial Panel de un único control con más de un botón

  ■ Tutorial Panel con más de un control

2.5. Eventos

  ■ Gestión de eventos
  ■ Gestión de eventos en controles personalizados

    2.6. Internacionalización

    2.7. Configuración

    2.8. Acceso librerías base

3. UTILIDADES

4. PROXY

5. API REST
 5.1. Parametrización API-REST
 5.2. Base de Datos API-REST
 5.3. API REST Actions
 5.4. Servicio de correos electrónicos
 5.5. Capas rápidas

6. PARAMETRIZACIÓN VISUALIZADORES

7. SOLUCIÓN DE PROBLEMAS

8. PROCESO DE VERSIONADO

9. GUÍA DE DESARROLLO
  > Guía de desarrollo de plugins
  > Guía de desarrollo de visualizadores con React
  > Guía de desarrollo de componentes
  > Guía para el desarrollo de API-CNIG
  > Compilación proyecto API-CNIG

Clone this wiki locally