OpenLayers 3 plugins

 

Les funcionalitats inicials d'OpenLayers 3 poden ampliar-se a partir de plugins externs. Són trossos de codi JavaScript que afegeixen noves capacitats interessants. Podeu trobar-se alguns al següent enllaç:

 

 

L'exemple següent estira dos serveis web de mapes (WMS) de la IDE Nacional corresponents als anys 1956 i 2015. El control "SWIPE" d'OpenLayers 3 permet comparar-les. El codi següent mostra com fer-ho. Primer vincularem les llibreries OpenLayers 3, jQuery Mobile i el control Swipe:

 

							<!--JQuery Mobile-->
							<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
							
							<!--OpenLayers 3-->
							<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">
							
							<!--Control Swipe-->
							<link rel="stylesheet" href="http://cartografia.cime.es/WebEditor/Pagines/file/ol-ext-master/dist/ol-ext.css" />
							<script type="text/javascript" src="http://cartografia.cime.es/WebEditor/Pagines/file/ol-ext-master/dist/ol-ext.js"></script>						</pre>	
					
 

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, les coordenades de la vista inicial i el zoom:

 

						<script type="text/javascript">
							var vista= new ol.View({
								projection: "EPSG:4326",
								zoom: 17,
								center: [4.149343, 39.933892],
							});
							
							var map = new ol.Map({
								target: 'map',
								view: vista,
							});							
						</script>
						
 

Crearem les capes WMS (Web Map Service) de l'IGN dels anys 1956 i 2015 i les afegirem al mapa, sempre dins el tag "script":

 

							//WMS 1956
							var wmsLayer1956 = new ol.layer.Tile({
								type:'base',
								title:'PNOA 1956',
								source: new ol.source.TileWMS({
									url: 'http://www.ign.es/wms/pnoa-historico',
									params: {'LAYERS': 'AMS_1956-1957'},
								})
							});
							map.addLayer(wmsLayer1956);		

							//WMS 2015
							var wmsLayer2015 = new ol.layer.Tile({
								type:'base',
								title:'PNOA 2015',
								source: new ol.source.TileWMS({
									url: 'http://www.ign.es/wms/pnoa-historico',
									params: {'LAYERS': 'PNOA2015'},
								})
							});
							map.addLayer(wmsLayer2015);		
						
 

I finalment, afegirem el control Swipe:

 

							//Control Swipe
							var ctrl = new ol.control.Swipe();
							map.addControl(ctrl);
							ctrl.addLayer(wmsLayer2015);
							ctrl.addLayer(wmsLayer1956, true);
						
 

I aquí teniu el codi agrupat:

 

						<html>
						<head>
							<!--JQuery Mobile-->
							<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
							
							<!--OpenLayers 3-->
							<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">
							
							<!--Control Swipe-->
							<link rel="stylesheet" href="http://cartografia.cime.es/WebEditor/Pagines/file/ol-ext-master/dist/ol-ext.css" />
							<script type="text/javascript" src="http://cartografia.cime.es/WebEditor/Pagines/file/ol-ext-master/dist/ol-ext.js"></script>						</pre>	
						</head> 

						<body > 
							<!--Mapa-->
							<div id="map"  style="width: 100%; height: 100%;"></div>
</body> <script type="text/javascript"> //Vista var vista= new ol.View({ projection: "EPSG:4326", zoom: 17, center: [4.149343, 39.933892], }); //Mapa var map = new ol.Map({ target: 'map', view: vista, }); //WMS 1956 var wmsLayer1956 = new ol.layer.Tile({ type:'base', title:'PNOA 1956', source: new ol.source.TileWMS({ url: 'http://www.ign.es/wms/pnoa-historico', params: {'LAYERS': 'AMS_1956-1957'}, }) }); map.addLayer(wmsLayer1956); //WMS 2015 var wmsLayer2015 = new ol.layer.Tile({ type:'base', title:'PNOA 2015', source: new ol.source.TileWMS({ url: 'http://www.ign.es/wms/pnoa-historico', params: {'LAYERS': 'PNOA2015'}, }) }); map.addLayer(wmsLayer2015); //Control Swipe var ctrl = new ol.control.Swipe(); map.addControl(ctrl); ctrl.addLayer(wmsLayer2015); ctrl.addLayer(wmsLayer1956, true); </script> </html>