Ejemplo II: Uso de OpenLayer
Visualización de los monumentos de la ciudad sobre la cartografía base de Zaragoza mediante el acceso al WMST (servicio de mapas tileado) de IDEE (en WGS84) y al API del Ayuntamiento de Zaragoza (en WGS84)
Código Fuente
<html> <head> <meta charset="utf-8"> <title>Visor OpenLayers WMTS</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:600px; height:30em; } #map{ width:100%; height:500px; 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-wmts"></div> <div id="popup-wmts" class="ol-popup"> <a href="#" id="popup-closer-wmts" class="ol-popup-closer"></a> <div id="popup-content-wmts"></div> </div> <script> var mapInitialZoom = 14; var mapMinZoom = 12; var mapMaxZoom = 19; var projectionOLWMTS = ol.proj.get('EPSG:4326'); var projectionOLWMTSExtent = projectionOLWMTS.getExtent(); var sizeWMTS = ol.extent.getWidth(projectionOLWMTSExtent) / 512; var resolutionsWMTS = new Array(19); var matrixIdsWMTS = new Array(19); for (var z = 0; z < 19; ++z) { // generate resolutions and matrixIds arrays for this WMTS resolutionsWMTS[z] = sizeWMTS / Math.pow(2, z); matrixIdsWMTS[z] = z; } var attributionWMTS = new ol.Attribution({ html: 'Teselas de PNOA cedido por © Instituto Geográfico Nacional de España' }); var vectorSourceWMTS = new ol.source.Vector({ url: "http://www.zaragoza.es/api/recurso/turismo/monumento.geojson?srsname=wgs84&rows=2000&fl=id,title,description,geometry", format: new ol.format.GeoJSON(), useSpatialIndex: true }); var clusterSource = new ol.source.Cluster({ distance: 60, source: vectorSourceWMTS, useSpatialIndex: true }); var styleCacheWMTS = {}; var gjsonFileWMTSCluster = new ol.layer.Vector({ source: clusterSource, style: function(cluster, resolution) { var size = cluster.get('features').length; var style = styleCacheWMTS[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' }) }) })]; } styleCacheWMTS[size] = style; } return style; } }); var containerPopupWMTS = document.getElementById('popup-wmts'); var contentPopupWMTS = document.getElementById('popup-content-wmts'); var closerPopupWMTS = document.getElementById('popup-closer-wmts'); closerPopupWMTS.onclick = function() { popupPopupWMTS.setPosition(undefined); closerPopupWMTS.blur(); return false; }; var popupPopupWMTS = new ol.Overlay({ element: containerPopupWMTS, autoPan: true, autoPanAnimation: { duration: 250 } }); var mapOLWMTS = new ol.Map({ layers: [ new ol.layer.Tile({ opacity: 1.0, source: new ol.source.WMTS({ attributions: [attributionWMTS], url: 'http://www.ign.es/wmts/ign-base', layer: 'IGNBaseTodo', matrixSet: 'InspireCRS84Quad', format: 'image/png', projection: projectionOLWMTS, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionOLWMTSExtent), resolutions: resolutionsWMTS, matrixIds: matrixIdsWMTS }), style: 'default', minZoom: mapMinZoom, maxZoom: mapMaxZoom }) }), gjsonFileWMTSCluster ], overlays: [popupPopupWMTS], target: 'mapa-ol-wmts', controls: ol.control.defaults({ attributionOptions: ({ collapsible: false }) }), view: new ol.View({ projection: projectionOLWMTS, center: ol.proj.transform([-0.8807887554972524, 41.65701793638502], "EPSG:4326", projectionOLWMTS), zoom: mapInitialZoom, minZoom: mapMinZoom, maxZoom: mapMaxZoom }) }); mapOLWMTS.on('singleclick', function(evt) { var cluster = mapOLWMTS.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>" : ""); popupPopupWMTS.setOffset([0, -10]); contentPopupWMTS.innerHTML = info; popupPopupWMTS.setPosition(coord); } } else { // Eliminar popup si lo hay document.getElementById(mapOLWMTS.getTarget()).style.cursor = 'default'; popupPopupWMTS.setPosition(undefined); closerPopupWMTS.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()); } mapOLWMTS.getView().fit(clusterExtent, mapOLWMTS.getSize()) } } else { popupPopupWMTS.setPosition(undefined); closerPopupWMTS.blur(); } }); mapOLWMTS.on('pointermove', function(e) { var pixel = mapOLWMTS.getEventPixel(e.originalEvent); var hit = mapOLWMTS.hasFeatureAtPixel(pixel); document.getElementById(mapOLWMTS.getTarget()).style.cursor = (hit ? 'pointer' : 'default'); }); </script> </body> </html>