SITIBSA

 

La IDEIB en UN minut

CARREGAR I GESTIONAR CAPES TEMÀTIQUES

CERCA I MESURA

IMPRIMIR: Exportació a PDF i imatge

Generació de perfils

Incorporar gràfics al mapa

Gestionar la taula d'atributs i fer filtres

Comparar capes

Guardar i carregar sessió

Què és una IDE?

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)

Què ens ofereix la IDEIB?

La IDEIB ofereix els següents 3 tipus de clients:

  • LOCALITZACIÓ: on utilitzant l'estàndart WCS es possibilita la recerca de conjunts de dades i serveis a través del contingut de les seves metadades .
  • VISUALITZACIÓ:  permeten la visualització de les dades a través de serveis web WMS i, opcionalment , la seva consulta.
  • DESCÀRREGA: permeten descàrrega amb wfs de dades geogràfiques o la localització de fenomens (nomeclàtor) en un mapa.

Perquè serveixen els serveis de localització (discovery service)?

Permeten fer cerques de conjunts de dades espacials i serveis web a partir de les seves metadades.

  • Descobrir, recuperar i reutilitzar dades i serveis web.
  • Posar a disposició de l'usuari, dades en qualitat i quantitat suficients perquè pugui decidir si els productes disponibles s'ajusten a les seves necessitats.
  • Conèixer on aconseguir-los o adquirir-los.
  • Saber quins són els seus usos permesos.

Què és un servei de visualització 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

Què puc fer amb un WMS?

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).

Perquè serveixen el serveis de descàrrega?

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).

Exemple de la creació d'un visor amb Leaflet emprant els serveis de la IDEIB

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);

// 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.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>

Com carregar un WMS i un WMTS de la IDEIB amb OpenLayers 2.0

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>

Català - Castellano