Una Infraestructura de Dades Espacials (IDE) és un sistema informàtic integrat per un conjunt de recursos (catàlegs, servidors, programes, aplicacions, pàgines web, ...) que permet l'accés i la gestió de conjunts de dades i serveis geogràfics (descrits a través de les seves metadades), disponibles a Internet, que compleix una sèrie normes, estàndards i especificacions que regulen i garanteixen la interoperabilitat de la informació geogràfica. Així mateix cal establir un marc legal que asseguri que les dades produïdes per les institucions seran compartits per tota l'administració i que potenciï que els ciutadans els facin servir. (font: IGN)
La IDEIB ofereix els següents 3 tipus de clients:
Permeten fer cerques de conjunts de dades espacials i serveis web a partir de les seves metadades.
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
Es poden realitzar tres tipus d`operacions amb el wms. En primer lloc consultar les metadades del servei (Get Capabilities). En segon lloc, obtenir en el client un mapa segons uns paràmetres geogràfics i dimensions definides (Get Map). Finalment es pot aconseguir informació d`un punt definit referit a una capa d`informació que forma part del wms (Get Feature Info).
Fonamentalment, permeten descarregar còpies completes de conjunts de dades espacials o parts d'elles i retorna la descripció de tots els tipus d'objecte espacial continguts en un conjunt de dades espacials.
Es distingeix entre serveis de descàrrega de fitxers predefinits, quan és possible tenir preparats i emmagatzemats les metadades que els descriguin i serveis de descàrrega d'accés directe (WFS 2.0).
Per crear visors que emprin els serveis de la IDEIB podeu emprar la llibreria de Leaflet que trobareu a http://ideib.caib.es/api_ideib/ i que ja inclou la llibreria "Proj4Leaflet" que ens permet carregar capes en el sistema de referència que empra la IDEIB: ETRS89 FUS 31N (EPSG 25831).
També hi trobareu l'arxiu "conf_ideib.js" que configura les escales adequades per poder carregar els serveis tilejats de la IDEIB (WMTS)
En aquest exemple que vos mostram cal que creeu els següents dos arxius:
1.- "mapa_goib.js" on es configura el mapa, accions i capes que es carreguen. Conté el següent codi:
/////////////////// 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);
map.attributionControl.setPrefix('<a href="https://ideib.caib.es" title="IDEIB-SITIBSA">IDEIB</a>');
// 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" on es referencien les llibreries, es crea el títol, etc. Hi trobareu també com incloure un marcador indicant les coordenades (en latitud/longitud en graus decimals) i un text. És important que tengueu en compte que si estau en un entorn en https haureu cridar les llibreries modificant "http" per "https" ("http://ideib.caib.es/..." per "https://ideib.caib.es/..."). Conté el següent codi:
<!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.573213,2.655952];
// 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>
Aquí vos deixam un exemple de com carregar un WMS i un WMST amb a la nova IDEIB amb Openlayers 2.0 amb 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>