API de OpenLayers | icgc

API de OpenLayers

Para utilizar la API de OpenLayers son necesarios unos mínimos conocimientos de HTML y de javascript.

A continuación, se muestra el código de un visor de ejemplo que utiliza los servidores ICGC en caché para OpenLayers v6.4.3 en el sistema de referencia ETRS89 y proyección UTM huso 31 (código EPSG 25831). La capa disponible es topo (mapa topográfico).

<!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 OpenLayers">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
      <style>
       html, body, .map {
         margin: 0;
         padding: 0;
         width: 100%;
         height: 100%;
       }         
     </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
   <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
   <title>Visor bàsic. Openlayers</title>
 </head>
 <body>
   <div id="map" class="map"></div>
   <script type="text/javascript">

     proj4.defs("EPSG:25831","+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

     ol.proj.proj4.register(proj4);

     const extent = [257904,4484796,535907,4751795];
     
     var layers = [
       new ol.layer.Tile({
         source: new ol.source.TileWMS({
           projection: 'EPSG:25831',
           url: 'https://geoserveis.icgc.cat/icc_mapesmultibase/utm/wms/service?',
           params: {
             'LAYERS': 'topo'
           }
         })
       })
     ];

     const map = new ol.Map({
       layers: layers,
       target: 'map',
       view: new ol.View({
         projection: 'EPSG:25831',
         center: [396905,4618292],
         resolutions: [1100, 550, 275, 100, 50, 25, 10, 5, 2, 1, 0.5, 0.25],
         //extent: extent,
         zoom: 6
       })
     });

   </script>
 </body>
</html>