API de Leaflet
Código de un visor de ejemplo que utiliza los servidores ICGC en caché para Leaflet v1.7.1 en el sistema de referencia ETRS89 y proyección UTM huso 31 (código EPSG 25831). Las capas disponibles son topo (mapas topográficos) y orto (ortofotos).
<!DOCTYPE html>
<html lang="ca">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Institut Cartogràfic i Geològic de Catalunya - ICGC"/>
<meta name="description" content="Exemple de visor de mapes amb geoserveis ICGC utilitzant Leaflet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://rawgithub.com/kartena/Proj4Leaflet/master/lib/proj4-compressed.js" type="text/javascript"></script>
<script src="https://rawgithub.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js" type="text/javascript"></script>
<title>Visor bàsic. Leaflet</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
const center = [41.82045, 1.54907];
const crs25831 = new L.Proj.CRS('EPSG:25831','+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [1100, 550, 275, 100, 50, 25, 10, 5, 2, 1, 0.5, 0.25]
}
);const serveiTopoCache = L.tileLayer.wms("https://geoserveis.icgc.cat/icc_mapesmultibase/utm/wms/service?", {
layers: 'topo',
format: 'image/jpeg',
crs: crs25831,
continuousWorld: true,
attribution: 'Institut Cartogràfic i Geològic de Catalunya',
});const serveiOrtoCache = L.tileLayer.wms("https://geoserveis.icgc.cat/icc_mapesmultibase/utm/wms/service?", {
layers: 'orto',
format: 'image/jpeg',
crs: crs25831,
continuousWorld: true,
attribution: 'Institut Cartogràfic i Geològic de Catalunya',
});const serveitopoGrisCache = L.tileLayer.wms("https://geoserveis.icgc.cat/icc_mapesmultibase/utm/wms/service?", {
layers: 'topogris',
format: 'image/jpeg',
crs: crs25831,
continuousWorld: true,
attribution: 'Institut Cartogràfic i Geològic de Catalunya',
});
const serveiortoGrisCache = L.tileLayer.wms("https://geoserveis.icgc.cat/icc_mapesmultibase/utm/wms/service?", {
layers: 'ortogris',
format: 'image/jpeg',
crs: crs25831,
continuousWorld: true,
attribution: 'Institut Cartogràfic i Geològic de Catalunya',
});const wmsComarques = L.tileLayer.wms("https://geoserveis.icgc.cat/icgc_bm5m/wms/service?", {
layers: '20_COMARCA_PC,70_NOMCOMARCA_TX',
format: 'image/png',
crs: crs25831,
transparent: true,
continuousWorld: true,
attribution: 'Base Municipal 1:5.000 - ICGC',
});let map = L.map('map', {
layers: [serveiTopoCache],
crs: crs25831,
continuousWorld: true,
worldCopyJump: false,
center: center,
zoom: 6,
});let baseMaps = {
"Topogràfic": serveiTopoCache,
"Topogràfic gris": serveitopoGrisCache,
"Ortofoto": serveiOrtoCache,
"Ortofoto gris": serveiortoGrisCache
};
let overlayMaps = {
"Comarques": wmsComarques
};L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>
</body>
</html>