Català English

Registro Contacto

Inicio > Geoinformación digital > Servicios en línea (Geoservicios) > Cartografía ICC en OpenLayers

Cartografía ICC en OpenLayers

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

A continuación, se explica la conexión a los servidores ICC en cache para OpenLayers, pero también existe la posibilidad de utilizar el estándar WMS (ver documentación API OpenLayers y servicios WMS disponibles, tanto ráster como vector), que ofrece más capas pero resulta más lento.

Para acceder al servicio en el sistema de referencia ETRS89 y proyección UTM huso 31 (código EPSG 25831), la URL para el constructor OpenLayers.Layer.WMS debe apuntar a http://mapcache.icc.cat/map/bases/service? y las capas disponibles son topo (mapas topográficos) yorto (ortofotos).

Para acceder al servicio en el sistema de referencia WGS84 y coordenadas geodésicas (código EPSG 4326), la URL para el constructor OpenLayers.Layer.WMS debe apuntar a http://norma.icc.cat/tilecache/tilecache.py? y las capas disponibles son topo4326 (mapas topográficos) y orto4326 (ortofotos).

A continuación se muestra código de ejemplo para cada caso.

ETRS89 UTM huso 31 (EPSG 25831)

<html>
<head>
 <script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body onload="init();" id="body" style="background: #000;">
 
 <div id="map" style="width: 100%; height: 100%"></div>

 <script type="text/javascript">

 var map;

 function init(){

  // bbox limits for Catalonia
  var bounds = new OpenLayers.Bounds(258000,4485000,536000,4752000); 
  var resolutions = [1100,550,275,100,50,25,10,5,2,1,0.5,0.25]; // m/pixel
  var genericMapOptions = {projection: "EPSG:25831", units: 'm', maxExtent: bounds}
  var overviewMapSize = new OpenLayers.Size(128, 123);

  var topo_tilecache = new OpenLayers.Layer.WMS("Topo ICC",
   "http://mapcache.icc.cat/map/bases/service?",
   {layers: 'topo', format:"image/jpeg", exceptions:"application/vnd.ogc.se_xml"},
          {buffer:0, transitionEffect:'resize'}
    );
    
  var orto_tilecache = new OpenLayers.Layer.WMS("Orto ICC",
   "http://mapcache.icc.cat/map/bases/service?",
   {layers: 'orto', format:"image/jpeg", exceptions:"application/vnd.ogc.se_xml"},
          {buffer:0, transitionEffect:'resize'}
    );
    
  var layers = [topo_tilecache, orto_tilecache];
  
  var mapControls = [ 
   new OpenLayers.Control.Navigation(),
   new OpenLayers.Control.LayerSwitcher(),
   new OpenLayers.Control.PanZoomBar()
  ];

  var mapOptions = OpenLayers.Util.extend({
   resolutions: resolutions,
   controls: mapControls
   }, genericMapOptions);
   
  map = new OpenLayers.Map('map', mapOptions);
  map.addLayers(layers);
  map.zoomToMaxExtent();
  
 }
        
 </script>

</body>
</html>

Ejemplo

WGS84 geodésicas (EPSG 4326)

<html>
  <head>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  </head>
  <body onload="init();" id="body" style="background: #000;">
    
    <div id="map" style="width: 100%; height: 100%"></div>

    <script type="text/javascript">

        var map;

        function init(){

             var bounds = new OpenLayers.Bounds(0.0, 39.375, 5.625, 45.0);
             var resolutions = [0.010986328125, 0.0054931640625, 0.00274658203125, 
               0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 
               0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625, 
               0.000010728836059570312];                        
          
            var controls = [];             
            var genericMapOptions = {projection: "EPSG:4326", maxExtent: bounds};

            // Tilecache server  -> http://norma.icc.cat/tilecache/tilecache.py?
            // Parameter: layers -> We have two layers, 'topo4326' and 'orto4326'
            // Ex. layers: 'topo4326'
            // Ex. layers: 'orto4326'
            
            var topo_tilecache = new OpenLayers.Layer.WMS("Topo ICC",
                "http://norma.icc.cat/tilecache/tilecache.py?",
{layers: 'topo4326', format:"image/jpeg",  exceptions:"application/vnd.ogc.se_xml"},
                   {buffer:0, transitionEffect:'resize'}
                 );
                 
            var orto_tilecache = new OpenLayers.Layer.WMS("Orto ICC",
                "http://norma.icc.cat/tilecache/tilecache.py?",
{layers: 'orto4326', format:"image/jpeg", exceptions:"application/vnd.ogc.se_xml"},
                    {buffer:0, transitionEffect:'resize'}
                 );
                            
            var layers = [topo_tilecache, orto_tilecache];
            
            var mapControls = [new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.PanZoomBar()
            ];

            var mapOptions = OpenLayers.Util.extend({
                resolutions: resolutions,
                controls: mapControls
                }, genericMapOptions);
            
            map = new OpenLayers.Map('map', mapOptions);
            map.addLayers(layers);
            map.zoomToMaxExtent();
            
        }
                  
    </script>
  </body>
</html>

Ejemplo

Aviso Legal | Sobre la web | Accesibilidad | Política ambiental y de seguridad y salud laboral