Ejemplo I: Uso de OpenLayer
Visualización de los aparcamientos públicos de la ciudad sobre la cartografía base de Zaragoza mediante el acceso al WMS de IDEZar (en ETRS89 UTM30N) y al API del Ayuntamiento de Zaragoza (en ETRS89 UTM30N)
Código Fuente
<html> <head> <meta charset="utf-8"> <title>Visor OpenLayers WMS</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script> <script src="http://epsg.io/25830.js" type="text/javascript"></script> <script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css"> <style type="text/css"> #mapa-ol-wms, #mapa-ol-wmts{ width:100%; height:100%; max-height:1024px; max-width:1024px; } #map{ width:100%; height:100%; box-shadow: 5px 5px 5px #888; } .ol-popup { position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 300px; font: 12px Tahoma !important; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: ""; } </style> </head> <body> <div id="mapa-ol-wms"> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> </div> <script> var mapInitialZoom = 10; var mapMinZoom = 8; var mapMaxZoom = 18; var projectionOLWMS = new ol.proj.Projection({ code: 'EPSG:25830', extent: [225370.7346, 3849419.9580, 774629.2654, 6914547.3835], units: 'm' }); var projectionOLExtent = projectionOLWMS.getExtent(); var projection23030 = new ol.proj.Projection({ code: 'EPSG:23030', extent: [229395.8528, 3982627.8377, 770604.1472, 7095075.2268], units: 'm' }); var projection23030Extent = projection23030.getExtent(); var wmsOLExtent = [629949.7794757624, 4587449.336237153, 706278.4667166389, 4652449.906897099]; var attributionOLWMS = new ol.Attribution({ html: '© <a href="http://idezar.zaragoza.es">IDEZar</a> contributors, ' + ' © <a href="http://www.zaragoza.es/">Ayuntamiento de Zaragoza</a>' }); var vectorSource = new ol.source.Vector({ url: "http://www.zaragoza.es/api/recurso/urbanismo-infraestructuras/equipamiento/aparcamiento-publico.geojson?rf=html&srsname=etrs89", format: new ol.format.GeoJSON({ defaultDataProjection: projection23030 }) }); var clusterSource = new ol.source.Cluster({ distance: 60, source: vectorSource }); var styleCache = {}; var gjsonFileCluster = new ol.layer.Vector({ source: clusterSource, style: function(cluster, resolution) { var size = cluster.get('features').length; var style = styleCache[size]; if (!style) { if (size == 1) { var src = cluster.getProperties().features[0].getProperties().icon; if (!src) { src = "http://www.zaragoza.es/contenidos/iconos/location.png"; } style = [new ol.style.Style({ image: new ol.style.Icon(({ src: src })) })]; } else { style = [new ol.style.Style({ image: new ol.style.Circle({ radius: (parseInt(size/10)+3)*5, stroke: new ol.style.Stroke({ color: '#FFFFFF', width: 2 }), fill: new ol.style.Fill({ color: '#CC0000' }) }), text: new ol.style.Text({ text: size.toString(), font: "14px Tahoma", fill: new ol.style.Fill({ color: '#FFFFFF' }) }) })]; } styleCache[size] = style; } return style; } }); var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); closer.onclick = function() { popups.setPosition(undefined); closer.blur(); return false; }; var popups = new ol.Overlay({ element: container, autoPan: true, autoPanAnimation: { duration: 250 } }); var mapOLWMS = new ol.Map({ layers: [ new ol.layer.Image({ opacity: 1.0, extent: wmsOLExtent, source: new ol.source.ImageWMS({ attributions: [attributionOLWMS], url: 'http://idezar.zaragoza.es/wms/IDEZar_base/IDEZar_base', params: {'LAYERS':'base', 'FORMAT':'image/png'}, style: 'default', minZoom: mapMinZoom, maxZoom: mapMaxZoom }) }), gjsonFileCluster ], overlays: [popups], target: 'mapa-ol-wms', controls: ol.control.defaults({ attributionOptions: ({ collapsible: false }) }), view: new ol.View({ projection: projectionOLWMS, center: [676746.6711199884, 4613850.153614396], extent: wmsOLExtent, minZoom: mapMinZoom, zoom: mapInitialZoom, maxZoom: mapMaxZoom, }) }); mapOLWMS.on('singleclick', function(evt) { var cluster = mapOLWMS.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (cluster) { if (cluster.getProperties().features.length == 1) { // Popup de la feature var feature = cluster.getProperties().features[0]; var coord = feature.getGeometry().getCoordinates(); var props = feature.getProperties(); var title = props.title; var description = props.description; if (title || description) { var info = (title ? "<b>" + title + "</b>" : ""); info += (description ? "<p>" + description + "</p>" : ""); popups.setOffset([0, -10]); content.innerHTML = info; popups.setPosition(coord); } } else { // Eliminar popup si lo hay document.getElementById(mapOLWMS.getTarget()).style.cursor = 'default'; popups.setPosition(undefined); closer.blur(); // Desclusterizar var clusterFeatures = cluster.getProperties().features; var clusterExtent = ol.extent.createEmpty(); for (var j = 0, jj = clusterFeatures.length; j < jj; ++j) { ol.extent.extend(clusterExtent, clusterFeatures[j].getGeometry().getExtent()); } mapOLWMS.getView().fit(clusterExtent, mapOLWMS.getSize()) } } else { popups.setPosition(undefined); closer.blur(); } }); mapOLWMS.on('pointermove', function(e) { var pixel = mapOLWMS.getEventPixel(e.originalEvent); var hit = mapOLWMS.hasFeatureAtPixel(pixel); document.getElementById(mapOLWMS.getTarget()).style.cursor = (hit ? 'pointer' : 'default'); }); </script> </body> </html>