• Imprimeix

Cartografia ICGC a OpenLayers

Per utilitzar l'API d'OpenLayers 2 són necessaris uns mínims coneixements d'HTML i javascript.

A continuació, s'explica la connexió amb els servidors ICC en cache per a OpenLayers, però també hi ha la possibilitat d'utilitzar l'estàndard WMS (vegeu documentació API OpenLayers i serveis WMS disponibles, tant raster com vector), que ofereix més capes però pot resultar més lent.

Per accedir al servei en el sistema de referència ETRS89 i projecció UTM fus 31 (codi EPSG 25831), la URL pel constructor OpenLayers.Layer.WMS ha d'apuntar a http://mapcache.icc.cat/map/bases/service? i les capes disponibles són topo (mapes topogràfics) i orto (ortofotos).

Per accedir al servei en el sistema de referència WGS84 i coordenades geodèsiques (codi EPSG 4326), la URL pel constructor OpenLayers.Layer.WMS ha d'apuntar a http://mapcache.icc.cat/map/bases_noutm/service? i les capes disponibles són topo (mapes topogràfics) i orto (ortofotos).

A continuació es mostra codi d'exemple per a cada cas.

ETRS89 UTM fus 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>

Exemple

 

WGS84 geodèsiques (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://mapcache.icc.cat/map/bases_noutm/service?
            // Parameter: layers -> We have two layers, 'topo' and 'orto'
            // Ex. layers: 'topo'
            // Ex. layers: 'orto'
            
            var topo_tilecache = new OpenLayers.Layer.WMS("Topo ICC",
                "http://mapcache.icc.cat/map/bases_noutm/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_noutm/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>

Exemple