SITIBSA

 

La IDEIB en UN minuto

CARGAR Y GESTIONAR CAPAS TEMÁTICAS

BUSQUEDA Y MEDICIÓN

IMPRIMIR: exportar a PDF o imagen

GENERAR PERFILES

INCORPORAR GRÁFICOS AL MAPA

GESTIONAR LA TABLA DE ATRIBUTOS Y FILTROS

COMPARAR CAPAS

CARGAR Y GUARDAR SESIÓN

QUE ES UNA IDE?

Una Infraestructura de Datos Espaciales (IDE) es un sistema informático integrado por un conjunto de recursos (catálogos, servidores, programas, aplicaciones, páginas web,...) que permite el acceso y la gestión de conjuntos de datos y servicios geográficos (descritos a través de sus metadatos), disponibles en Internet, que cumple una serie normas, estándares y especificaciones que regulan y garantizan la interoperabilidad de la información geográfica. (fuente: IGN)

Que nos ofrece la IDEIB?

La IDEIB ofrece los siguientes 3 clientes: visualización (que permite la visualización de los datos a través de servicios web WMS y, opcionalmente, su consulta), localización (que posibilita la búsqueda de conjuntos de datos y servicios a través del contenido de las sus metadatos utilizando el WCS) y nomenclátor (que gracias al WFS, permite la localización en un mapa mediante un texto).

Para que sirven los servicios de localización (discovery service)?

Permiten realizar búsquedas de conjuntos de datos espaciales y servicios web a partir de sus metadatos.

  • Descubrir, recuperar y reutilizar datos y servicios web.
  • Poner a disposición del usuario, datos en calidad y cantidad suficientes para que pueda decidir si los productos disponibles se ajustan a sus necesidades.
  • Conocer dónde conseguirlos o adquirirlos.
  • Saber cuáles son sus usos permitidos.

QUÈ ÉS UN WMS?

El servei Web Map Service (WMS) definit per l`OGC (Open Geospatial Consortium) produeix mapes de dades espacials referits de forma dinàmica a partir d`informació geogràfica. Amb el servei WMS el client no obté pròpiament les dades originals, sinó un fitxer d`imatge digital que permet la representació dinàmica en la pantalla del seu ordinador d`aquestes mateixes dades espacials. A aquesta representació l`anomenem "mapa". Els mapes produïts per WMS es generen normalment en un format d`imatge com PNG, SVG, GIF o JPEG.

QUE PUEDO HACER CON EL WMS?

Se pueden realizar tres tipos de operaciones con el wms. En primer lugar consultar los metadatos del servicio (Get Capabilities). En segundo lugar, obtener en el cliente un mapa según unos parámetros geográficos y dimensiones definidas (Get Map). Finalmente se puede conseguir información de un punto definido referido a una capa de información que forma parte del wms(Get Feature Info).

Para que sirven los servicios de descarga?

Fundamentalmente, permiten descargar copias completas de conjuntos de datos espaciales o partes de ellos y devuelve la descripción de todos los tipos de objeto espacial contenidos en un conjunto de datos espaciales.
Se distingue entre servicios de descarga de ficheros predefinidos, cuando es posible tener preparados y almacenados metadatos que los describan, y servicios de descarga de acceso directo WFS.

Ejemplo de la creación de un visor con Leaflet usando los servicios de la IDEIB

Para crear visores que empleen los servicios de la IDEIB puede utilizar la librería de Leaflet que encontrará en http://ideib.caib.es/api_ideib/ y que ya incluye la librería "Proj4Leaflet" que nos permite cargar capas en el sistema de referencia que emplea la IDEIB: ETRS89 FUS 31N (EPSG 25831).

También encontrará el archivo "conf_ideib.js" que configura las escalas adecuadas para poder cargar los servicios tileados de la IDEIB (WMTS)

Para este ejemplo que os mostramos es necesario que creeis los siguientes dos archivos:

1.- "mapa_goib.js" donde se configura el mapa, acciones y capas que se cargan. Contiene el siguiente código:

/////////////////// DEFINICIÓ VARIABLES INICI DEL MAPA /////////////////////////////


var zoomInici = 2;
var coordInici = [39.4,2.8];

/////////////////// DEFINICIÓ CAPES BASE amb SERVEIS TESELATS //////////////////////


var paramServeisWMTS = "?SERVICE: WMTS&VERSION=1.0.0&REQUEST=GetTile&STYLE=default&TILEMATRIXSET=default028mm&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"

var Relleu = new L.tileLayer('https://ideib.caib.es/geoserveis/rest/services/public/GOIB_Relleu_IB/MapServer/WMTS' + paramServeisWMTS,
{layer:'public_GOIB_Relleu_IB', crs: crs25831,attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>' });

var Ortofoto = new L.tileLayer('https://ideib.caib.es/geoserveis/rest/services/imatges/GOIB_Orto_IB/MapServer/WMTS' + paramServeisWMTS,
{layer:'imatges_GOIB_Orto_IB', crs: crs25831,attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>' });

var mapaBase = new L.tileLayer('https://ideib.caib.es/geoserveis/rest/services/public/GOIB_MapaBase_IB/MapServer/WMTS' + paramServeisWMTS,
{layer:'public_GOIB_MapaBase_IB', crs: crs25831,attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>' });

var LlistaMapesFons = {
"Mapa Base": mapaBase,
"Ortofoto": Ortofoto,
"Relleu": Relleu
};

/////////////////// DEFINICIÓ DEL MAPA//////////////////////////////////
var map = L.map('map', {
layers: [mapaBase],
crs: crs25831,
continuousWorld: true,
worldCopyJump: false,
center: coordInici,
zoom: zoomInici,
});

L.control.layers(LlistaMapesFons).addTo(map);

// DEFINICIÓ EINA DE RESPOSTA AL FER CLIC SOBRE EL MAPA////////////////
function onMapClick(e) {
alert("Punt: " + e.latlng);
}
map.on('click', onMapClick);


/////////////////// AFEGIR CAPES TEMÀTIQUES ////////////////////


// Per afegir capes temàtiques descomentau el següent bloc

// i modificau la url i resta de paràmetres segons sigui la capa que volgueu carregar

// trobareu les url dels WMS a http://ideib.caib.es/cataleg
/*
var Cadastre = new L.tileLayer.wms('http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx',
{ layers: 'CATASTRO',
format: 'image/png',
transparent: true,
crs: crs25831,
attribution: 'DG Catastro',
});
Cadastre.addTo(map); // Si volem afegir el cadastre

var MUIB = new L.tileLayer.wms('https://ideib.caib.es/geoserveis/services/public/GOIB_MUIB/MapServer/WMSServer',
{ layers: '1,2',
format: 'image/png',
transparent: true,
crs: crs25831,
attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>',
});
MUIB.addTo(map); // Si volem afegir el MUIB ( qualificacions i categories)

*/

// MOSTRAR COORDENADES DEL CURSOR SOBRE EL MAPA

// En format projectat (metres)
L.control.coordinates({
position:"topright",
useM:true,
decimals:0,
decimalSeperator:","
}).addTo(map);

//Si les volem amb un altre format hem de descomentar
/*

//En format graus decimals
L.control.coordinates({
position:"topright",
decimals:4,
decimalSeperator:",",
labelTemplateLat:"Lat: {y}",
labelTemplateLng:"Long: {x}",
useLatLngOrder:true
}).addTo(map);


// En format graus, minuts i segons
L.control.coordinates({
position:"topright",
useDMS:true,
labelTemplateLat:"N {y}",
labelTemplateLng:"E {x}",
useLatLngOrder:true
}).addTo(map);
*/


2.- "index.html" donde se referencian las librerías, título, etc. También incluye como incluir un marcador indicando las coordenadas (en latitud/longitud en grados decimales) y un texto. Es importante que tengáis en cuenta que si estáis en un entorno en https deberéis llamar las librerías modificando "http" por "https" ("http://ideib.caib.es/..." por "https://ideib.caib.es/..."). Contiene el siguiente código:

<!DOCTYPE html>
<html>
<head>
<title>IDEIB LEAFLET</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Càrrega dels CSS i JS necessaris -->
<link rel="stylesheet" href="http://ideib.caib.es/api_ideib/leaflet.css" />
<link rel="stylesheet" href="http://ideib.caib.es/api_ideib/coor/Leaflet.Coordinates_ideib.css"/>

<script src="http://ideib.caib.es/api_ideib/leaflet.js"></script>
<script src="http://ideib.caib.es/api_ideib/Proj4Leaflet/lib/proj4-compressed.js"></script>
<script src="http://ideib.caib.es/api_ideib/Proj4Leaflet/src/proj4leaflet.js"></script>
<script src="http://ideib.caib.es/api_ideib/conf_ideib.js"></script>
<script type="text/javascript" src="http://ideib.caib.es/api_ideib/coor/Leaflet.Coordinates_ideib.js"></script>

<!-- Ajustar per a mòbils -->
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<h2>Exemple Leaflet: Carregar serveis IDEIB (ETRS89)</h2>

<!-- div per incloure el mapa (el id del mapa ha de ser "map"). Al width i height definirem el tamany del mapa -->
<div id="map" ></div>
<!-- aquí incloem el js amb la configuració concreta del nostre mapa.-->
<script src="mapa_goib.js"></script>

<!-- Exemple de com podem incloure un marker sobre el mapa -->

<script>

// Indicau les coordenades en graus decimals (són les que necessita el mapa)
var coordenades = [39.5733,2.6558];

// Descomentau les dues línies següents si voleu indicar les coordenades projectades en metres
//var coorMetres = L.point(470437,4380455);
//var coordenades = crs25831.unproject(coorMetres);//LA VARIABLE crs25831 s'ha definit a conf_ideib.js

// Descomentau les tres línies següents si voleu indicar les coordenades projectades en graus,minuts i segons i punt cardinal
//var coorLat = L.NumberFormatter.toDD(39,34,23.88,"N")
//var coorLong = L.NumberFormatter.toDD(2,39,20.88,"E")
//var coordenades = [coorLat,coorLong];

var nomUA = 'SITIBSA';
var direccio = 'Alexandre Rosselló, 13-B';
var poblacio = 'Palma';
var contentString = '<div id="content">'+
'<div id="siteNotice"></div>'+
'<h2 id="firstHeading" style="color: black">' + nomUA + '</h2>'+
'<div id="bodyContent" style="color: black">'+
'<p>' + direccio + '</p>' +
'<p>' + poblacio + '</p>' +
'</div>'+
'</div>';

L.marker(coordenades).addTo(map)
.bindPopup(contentString)
.openPopup();

map.flyTo(coordenades, 10);

</script>

</body>
</html>

Como cargar un WMS y un WMTS de la IDEIB con OpenLayers 2.0


Aquí os dejamos un ejemplo de como cargar un WMS y un WMST con la nueva IDEIB con Openlayers 2.0 en ETRS89 FUS 31N (EPSG 25831)


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemple Openlayers 2.0: Carregar serveis IDEIB</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">

function init(){
var map = new OpenLayers.Map('mapa',
{
maxExtent: new OpenLayers.Bounds(342789.370900, 4278110.916100, 613552.495000, 4438808.196200),
resolutions: new Array( 793.7515875031751,
529.1677250021168,
264.5838625010584,
211.66709000084668,
132.2919312505292,
105.83354500042334,
52.91677250021167,
26.458386250105836,
13.229193125052918,
6.614596562526459,
5.291677250021167,
3.9687579375158752,
2.6458386250105836,
1.3229193125052918,
0.5291677250021167,
0.26458386250105836,
0.13229193125052918,
0.06614596562526459
),
maxResolution: 'auto',
tsize : new OpenLayers.Size(256,256),
projection: new OpenLayers.Projection("EPSG:25831"),
units: 'm'
} );

var transport = new OpenLayers.Layer.WMS( "Xarxa de transport",
"https://ideib.caib.es/geoserveis/services/public/GOIB_Xarxa_de_transports_IB/MapServer/WMSServer",
{
//Si voleu totes les capes:
//layers: 'Aeroport,Port,Ruta,Xarxa,Estació,PK,Vial,Portal,Zona',
layers: 'Vial,Portal',
transparent: 'true'
},
{
maxExtent: new OpenLayers.Bounds(342789.370900, 4278110.916100, 613552.495000, 4438808.196200),
maxResolution: 'auto',
projection:new OpenLayers.Projection("EPSG:25831"),
units: 'm',
isBaseLayer:false,
visibility:true
}
);

var mapaBase = new OpenLayers.Layer.WMTS({
name: "Mapa Base",
url: "https://ideib.caib.es/geoserveis/rest/services/public/GOIB_MapaBase_IB/MapServer/WMTS",
layer: "public_GOIB_MapaBase_IB",
matrixSet: "default028mm",
tileOrigin: new OpenLayers.LonLat(-5120900, 9998100),
format: "image/jpg",
style: 'default',
isBaseLayer: true
});

var orto = new OpenLayers.Layer.WMTS({
name: "Ortofotografia",
url: "https://ideib.caib.es/geoserveis/rest/services/imatges/GOIB_Orto_IB/MapServer/WMTS",
layer: "imatges_GOIB_Orto_IB",
matrixSet: "default028mm",
tileOrigin: new OpenLayers.LonLat(-5120900, 9998100),
format: "image/jpg",
style: 'default',
isBaseLayer: true
});

map.addLayers([transport,mapaBase,orto]);

var layerSwitcher = new OpenLayers.Control.LayerSwitcher();
map.addControl(layerSwitcher);

map.zoomToMaxExtent();
}

</script>
</head>
<body onload="init()">
<h2>Exemple Openlayers 2.0: Carregar serveis IDEIB</h2>
<div style="width:1200; height:650" id="mapa"></div>
</body>
</html>

Català - Castellano