Ejemplo II: Uso de Leaflet
Visualización de los monumentos de la ciudad sobre la cartografía base de Zaragoza mediante el acceso al WMS-C (servicio de mapas tileado) de IDEZar (en ETRS89 UTM30N) y al API Zaragoza (en WGS84) (en WGS84)
Código Fuente
<html>
<head>
<meta charset="utf-8">
<title>Visor Leaflet WMS-C</title>
<!-- Configuracion leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" href="//www.zaragoza.es/cont/plantillas/mapa/leaflet/MarkerCluster.css"/>
<link rel="stylesheet" href="//www.zaragoza.es/cont/plantillas/mapa/leaflet/MarkerCluster.Default.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<!-- Plugin para realizar peticiones ajax -->
<script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/leaflet.ajax.min.js"></script>
<!-- Plugin para clusterizar la informacion vectorial -->
<script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/leaflet.markercluster.js"></script>
<!-- Plugin para cargar WMTS -->
<script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script>
<!-- Plugin para cargar WMS no tileados -->
<script src="http://ptv-logistics.github.io/Leaflet.NonTiledLayer/NonTiledLayer.js"></script>
<script src="http://ptv-logistics.github.io/Leaflet.NonTiledLayer/NonTiledLayer.WMS.js"></script>
<!-- Plugin para realizar transformación de coordenadas -->
<script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/proj4.js" type="text/javascript"></script>
<script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/proj4leaflet.js" type="text/javascript"></script>
<script src="//www.zaragoza.es/cont/plantillas/js/jquery-1.10.2.min.js"></script>
<!-- Estilos de cluster -->
<style type="text/css">
label{font-weight:bold !important}
#campos-plus{display:none}
.cluster {
background: #2d84c8;
border-radius: 50%;
text-align: center;
color: white;
font-weight: 700;
border: 1px solid #2d84c8;
font-family: monospace;
}
.cluster:before {
content: ' ';
position: absolute;
border-radius: 50%;
z-index: -1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 1px solid white;
}
.digits-1 {
font-size: 14px;
height: 28px;
width: 28px;
line-height: 28px;
margin-top: -14px;
margin-left: -14px;
}
.digits-2 {
font-size: 16px;
height: 34px;
width: 34px;
line-height: 35px;
margin-top: -17px;
margin-left: -17px;
}
.digits-2:before {
border-width: 2px;
}
.digits-3 {
font-size: 18px;
height: 48px;
width: 47px;
line-height: 47px;
border-width: 3px;
margin-top: -24px;
margin-left: -24px;
}
.digits-3:before {
border-width: 3px;
}
.digits-4 {
font-size: 18px;
height: 58px;
width: 58px;
line-height: 57px;
border-width: 4px;
margin-top: -29px;
margin-left: -29px;
}
.digits-4:before {
border-width: 4px;
}
</style>
<script>
function cargarInfovectorialLeafLet(map, url) {
var markers;
var geojson;
$.getJSON(url, function(data) {
geojson = L.geoJson(data, {
onEachFeature: function(feature, layer) {
var txt = "";
if (feature.properties.date) {
txt += feature.properties.date;
}
if (feature.properties.category) {
txt += ((txt!="")?' ':'') + '<em>' + feature.properties.category + '</em>';
}
if (feature.properties.title) {
txt += ((txt!="")?'<br/>':'') + '<strong>' + feature.properties.title + '</strong><br/>';
}
if (feature.properties.description) {
txt += feature.properties.description;
}
if (txt != "") {
layer.bindPopup(txt);
}
}
});
markers = L.markerClusterGroup({
maxClusterRadius: 120,
iconCreateFunction: function(cluster) {
// get the number of items in the cluster
var count = cluster.getChildCount();
// figure out how many digits long the number is
var digits = (count + '').length;
// return a new L.DivIcon with our classes so we can
// style them with CSS. Take a look at the CSS in
// the <head> to see these styles. You have to set
// iconSize to null if you want to use CSS to set the
// width and height.
return new L.DivIcon({
html: count,
className: 'cluster digits-' + digits,
iconSize: null
});
}
});
markers.addLayer(geojson);
map.addLayer(markers);
});
}
//Definición de UTM30N ETRS89
var crsETRS89 = L.CRS.proj4js('EPSG:25830', '+proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs',
new L.Transformation(1, -4590500.0, -1, 694100.0),
{
resolutions: [53.125201382285255, 26.562600691142627, 14.062553307075499, 6.718775468936064,
3.7500142152201517, 1.7187565153092277, 0.9375035538050343, 0.5000018953626857,
0.26375099980381617, 0.131875499901908],
//Origen de servicio tileado
origin:[651500.0, 4590500.0]
});
//Configuracion de mapa para visualizar servicio de IDEZar
var IDEZarConfig = {
crs: crsETRS89,
zoom: 2,
minZoom:0,
maxZoom: 9
};
</script>
</head>
<body>
<div id="mapa-leaflet-wmsc" style="height:100%;width:100%"></div>
<script>
var mapWMSC = L.map('mapa-leaflet-wmsc',{
center: [41.655, -0.877], //Centro de zaragoza en coordenadas geograficas
//Configuracion del mapa inicial para visualizar la capa base IDEZar
crs: IDEZarConfig.crs,
zoom: IDEZarConfig.zoom,
minZoom:IDEZarConfig.minZoom,
maxZoom: IDEZarConfig.maxZoom});
var idezarWMSC = L.tileLayer.wms(
"http://idezar.zaragoza.es/IDEZar_Base_Tiled/WMSTileCache",
{
crs: crsETRS89,
layers: 'base_25830',
format: 'image/png',
transparent: false,
version: '1.1.0',
attribution: '© <a href="http://idezar.zaragoza.es">IDEZar</a> contributors, ' +
' © <a href="http://www.zaragoza.es/">Ayuntamiento de Zaragoza</a>',
//Definicion de los limites de zoom
minZoom: IDEZarConfig.minZoom,
maxZoom: IDEZarConfig.maxZoom,
//Propiedad necesaria para que se visualice el servcio
continuousWorld: true
});
mapWMSC.addLayer(idezarWMSC);
//Carga de info vectorial
var consulta = "http://www.zaragoza.es/api/recurso/turismo/monumento.geojson?srsname=wgs84&rows=2000&fl=id,title,description,geometry";
cargarInfovectorialLeafLet(mapWMSC, consulta);
</script>
</body>
</html>