OpenLayers 3 i les IDE

 

Aquest exemple pretén mostrar com es pot emprar OpenLayers 3 com a llibreria Javascript per a consumir cartografia provinent de les IDEs. En aquest cas, consultarem la cartografia base de l'Institut Geogràfic Nacional (IGN) i el traçat del camí de cavalls (IDE Menorca). A continuació es desglossa el codi font de la nostra pàgina web. Primer de tot, cal fer una crida a la llibreria JavaScript OpenLayers 3 i els seus estils:

 

							<script src="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol.js"></script>
							<link rel="stylesheet" href="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol.css" type="text/css">
						
 

Crearem un <DIV> a la pàgina amb el nom 'map' i amb les dimensions que volguem on hi inserirem el mapa:

 

							<div id="map"  style="width: 980px; height: 400px"></div>
						
 

Crearem una vista del mapa, l'objecte mapa i les coordenades de la vista inicial:

 

						<script type="text/javascript">
							var vista= new ol.View({
								projection: "EPSG:4326",
							});
							
							var map = new ol.Map({
								target: 'map',
								view: vista,
							});
							  
							vista.fit([3.7, 39.77, 4.36, 40.13], map.getSize());
						</script>
						
 

Crearem les capes WMS (Web Map Service) de l'IGN i de la IDE menorca i les afegirem al mapa, sempre dins el tag "script":

 

							var wmsIGN = new ol.layer.Tile({
								type:'base',
								title:'IGN Base',
								source: new ol.source.TileWMS({
									url: 'http://www.ign.es/wms-inspire/ign-base',
									params: {'LAYERS': 'IGNBaseTodo', format: 'image/png'},
								})
							});
							map.addLayer(wmsIGN);		

							var wmsLayerCavalls = new ol.layer.Tile({
								title:'Camí de cavalls',
								source: new ol.source.TileWMS({
									url: 'http://ide.cime.es/menorca/wms/turisme/',
									params: {'LAYERS': 'TU007RTS_ccavalls'},
								})
							});
							map.addLayer(wmsLayerCavalls);	
						
 

I finalment, afegirem un selector de capes per tal de poder activar o desactivar les capes visibles. Primer afegir la llibreria del control i el seu estil al header de la pàgina:

 

							<script src="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol3-layerswitcher.js"></script>
							<link rel="stylesheet" href="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol3-layerswitcher.css" type="text/css">
						
 

I afegirem el control al mapa:

 

							var layerSwitcher = new ol.control.LayerSwitcher({
								tipLabel:'Llegenda'
							});
							map.addControl(layerSwitcher);
						
 

I aquí teniu el codi agrupat:

 

						<html>
						<head>
							<script src="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol.js"></script>
							<link rel="stylesheet" href="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol.css" type="text/css">
							<script src="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol3-layerswitcher.js"></script>
							<link rel="stylesheet" href="http://cartografia.cime.es/WebEditor/Pagines/file/ol3-3.7.0/ol3-layerswitcher.css" type="text/css">
						</head> 

						<body > 
							<div id="map"  style="width: 100%; height: 100%;"></div>
</body> <script type="text/javascript"> var vista= new ol.View({ projection: "EPSG:4326", }); var map = new ol.Map({ target: 'map', view: vista, }); vista.fit([3.7, 39.77, 4.36, 40.13], map.getSize()); var wmsIGN = new ol.layer.Tile({ type:'base', title:'IGN Base', source: new ol.source.TileWMS({ url: 'http://www.ign.es/wms-inspire/ign-base', params: {'LAYERS': 'IGNBaseTodo', format: 'image/png'}, }) }); map.addLayer(wmsIGN); var wmsLayerCavalls = new ol.layer.Tile({ title:'Camí de cavalls', source: new ol.source.TileWMS({ url: 'http://ide.cime.es/menorca/wms/turisme/', params: {'LAYERS': 'TU007RTS_ccavalls'}, }) }); map.addLayer(wmsLayerCavalls); var layerSwitcher = new ol.control.LayerSwitcher({ tipLabel:'Llegenda' }); map.addControl(layerSwitcher); </script> </html>