API de Leaflet | icgc

API de Leaflet

Codi d'un visor d'exemple que utilitza els servidors ICGC en caché per a Leaflet v1.7.1 en el sistema de referència ETRS89 i projecció UTM fus 31 (codi EPSG 25831). Les capes disponibles són topo (mapes topogràfics) i 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>

Exemple Leaflet(4.56 KB)