Recinto

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento HTML</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.1.0/ol.css"/>

.map {
  width: 100%;
  height: 100%;
}
  
</style>

</head>
<body>
<div id="map" class="map"></div>
<script>

const ogcApiUrl = "https://sigpac-hubcloud.es/ogcapi/collections/recintos/items?f=json&bbox=-3.7,40.4,-3.6,40.5&limit=100";

const ignBaseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
      url: 'https://tms-ign-base.idee.es/1.0.0/IGNBaseTodo/{z}/{x}/{-y}.jpeg'
  })
});

const vectorSource = new ol.source.Vector({
    loader: function (extent, resolution, projection) {
        fetch(ogcApiUrl)
            .then(response => response.json())
            .then(data => {
                if (!data.features) {
                    console.error("No se encontraron 'features'");
                    return;
                }

const features = new ol.format.GeoJSON().readFeatures(data, {
                    dataProjection: 'EPSG:4326',  
                    featureProjection: 'EPSG:3857' 
                });

vectorSource.addFeatures(features);
            })
            .catch(error => console.error("Error al cargar los datos", error));
    }
});

const ocgApiLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.3)'
        })
    })
});

const map = new ol.Map({
    target: 'map',
    layers: [ignBaseLayer,ocgApiLayer],
    view: new ol.View({
        center: ol.proj.fromLonLat([-3.62, 40.49]),
        zoom: 14
    })
});

</script>
</body>
</html>