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>