• Imprimeix

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>

Â