Galería ejemplos API-CNIG

          
          
          <!DOCTYPE html>         
<html>
    <head>
        <title>visualizador ejemplo</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/toc/toc.ol.min.css" rel="stylesheet" />

        <style type="text/css">
            html,
            body {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }
        </style>

    </head>
    <body>
        
        <!-- Ficheros  javascript de TURF-->
        <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
        <!-- 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/toc/toc.ol.min.js"></script>
        
        <!-- Contenedor principal del mapa -->
        <div id="mapjs" class="m-container"></div>

        <script type="text/javascript">
            // Configuración del mapa
            M.proxy(false)
            const mapjs = M.map({
              container: 'mapjs', //id del contenedor del mapa
              controls: ['scale*true', 'scaleline', 'rotate', 'location', 'backgroundlayers'],
              zoom: 8,
              maxZoom: 20,
              minZoom: 4,
              center: ol.proj.fromLonLat([2.7, 42]),
             });

            // Configuración de las capas
            const geodesia = new M.layer.GeoJSON({
                name: "vértices", 
                url: "https://www.ign.es/wfs/redes-geodesicas?service=WFS&version=1.0.0&request=GetFeature&typename=RED_REGENTE&outputFormat=application%2Fjson&srsname=EPSG%3A3857&",        
                extract: false
            });
        

            // Configuracion de estilos
            let estilo1 = new M.style.Point({
                radius: 2, 
                fill: {  
                    color: 'black',
                    opacity: 0.8
                }
            });
            
            mapjs.addLayers(geodesia);
            geodesia.setStyle(estilo1);

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

            // A partir del evento on load de la capa, obtenemos el geojson de la capa para aplicar el análisis espacial
            geodesia.on(M.evt.LOAD, function(features) {
                var voronoiPolygonsGJSON = turf.voronoi(geodesia.toGeoJSON());
                
                const voronoiPolygons = new M.layer.GeoJSON({
                    name: "Poligonización", 
                    source: voronoiPolygonsGJSON,
                    extract: true
                });
                mapjs.addLayers(voronoiPolygons);

                let estilo2 = new M.style.Polygon({
                    fill: {
                        color: 'blue',
                        opacity: 0.1,
                    },
                    stroke: {
                        color: 'orange',
                        width: 2
                    }
                });
                voronoiPolygons.setStyle(estilo2);
            });
        
        </script>

    </body>
</html>




  
          

        