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