Instalación de OpenLayers

Descarga e instalación[editar]

OpenLayers no es más que una librería javascript con algunos iconos adicionales para los botones que podemos poner usando esta librería, como botones de zoom del mapa, pintado de polígonos, líneas, puntos sobre el mapa, etc. Por ello la instalación es fácil, basta descargarse el zip correspondiente de http://openlayers.org/download/ y desempaquetarlo en un sitio público de nuestro servidor web, donde más nos guste.

Un ejemplo sencillo[editar]

Vamos a hacer un ejemplo sencillo, utilizando el servidor de mapas que pone OpenLayers disponible. El código de la página html sería el siguiente:

<html>
   <head>
      <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
   </head>
   <body>
      <div style="border: solid 1px black; width:800px; height:500px;" id="map"></div>
      <script defer="defer" type="text/javascript">
         var map;
         var capa;
         
            map = new OpenLayers.Map('map');
            capa = new OpenLayers.Layer.WMS(
                  "Ejemplo",
                  "http://vmap0.tiles.osgeo.org/wms/vmap0",
                  {
                     layers: 'basic'
                  }
            );
            map.addLayer(capa);
            map.zoomToMaxExtent();
         </script>
   </body>
</html>

Veamos algunos detalles

En el <head> indicamos que vamos a usar la librería OpenLayers.js cogida de la misma web de OpenLayers, es el trozo de <script src="http://openlayers.org/api/OpenLayers.js"....
Debemos hacer un hueco en el html para ubicar el mapa. En este caso hemos usado un <div> con id="mapa". Puede ser cualquiera que nos interese, aunque si conviene que tenga un id, el que queramos ("map" en este caso) para facilitarnos la tarea de decirle a OpenLayers dónde debe ubicar el mapa.
Instanciamos una clase OpenLayers.Map de la librería, pasando como parámetro el id del elemento html donde queremos el mapa, en este caso "map". Este mapa, de momento está vacío, ya que no le hemos indicado qué debe pintar.
Instanciamos una capa de mapa con la clase OpenLayers.Layer.WMS. Aquí WMS indica el nombre del protocolo que se va a usar para acceder al mapa desde este javascript, así que debemos asegurarnos que el servidor de mapas que indiquemos admite este protocolo. En el new de esta clase debemos poner varios parámetros:
- Un título para la capa, "Ejemplo" en este caso.
- La url del servidor web de mapas que admita el protoclo WMS que hemos indicado. En este caso la URL es http://vmap0.tiles.osgeo.org/wms/vmap0
- Un conjunto de opciones que queramos ponerle a esta capa del mapa. Entre ellas, debemos poner el atributo layer, para indicar de entre todas las posibles capas que tenga este servidor, cual queremos. Tenemos que saber el nombre a priori, que para este caso sería "basic". Así que el tercer parámetro es { layer:'basic' }.
Finalmente, añadimos la capa al mapa y le decimos al mapa que haga un zoom para ocupar todo el espacio disponible dentro de la página html, en concreto, del <div id="map">.

Si cargamos esta página con el navegador, veremos algo como lo siguiente, puedes jugar con los botones de zoom y con la rueda del ratón, doble click, arrastrar, etc.

OpenLayers con GeoServer[editar]

Supongamos ahora que hemos instalado GeoServer en nuestro ordenador y tenemos los mapas que vienen de ejemplo. Vamos a ver cómo quedaría nuestro código javascript de OpenLayers para visualizar uno de estos mapas de GeoServer

<html>
   <head>
      <script src="http://localhost/openlayers/OpenLayers.js" type="text/javascript"></script>
   </head>
   <body>
      <div style="border: solid 1px black; width:800px; height:500px;" id="map"></div>
      <script defer="defer" type="text/javascript">
         var map;
         var capa;
         
            map = new OpenLayers.Map('map');
            capa = new OpenLayers.Layer.WMS(
                  "Ejemplo",
                  "http://localhost:8080/geoserver/wms",
                  {
                     layers: 'nurc:Img_Sample'
                  }
            );
            map.addLayer(capa);
            map.zoomToMaxExtent();
         
         </script>
   </body>
</html>

El ejemplo es exactamente igual que en el punto anterior, pero vamos a ver algunas cosas que cambian y qué hemos hecho exactamente.

Hemos instalado también un servidor Apache para presentar páginas html. Dentro de su directorio público, hemos desempaquetado el zip de OpenLayers en el directorio openlayers, por lo que el script principal de OpenLayers está accesible en http://localhost/openlayers/OpenLayers.js
Tenemos GeoServer instalado en http://localhost:8080/geoserver. Para acceder a los mapas a través del protocolo WMS, la url es http://localhost:8080/geoserver/wms
Entre los mapas/capas disponibles como ejemplo en GeoServer, tenemos una capa llamada "nurc:Img_Sample", que es la que usaremos en este ejemplo.

Salvo estos cambios de URLs, el resto del código html/javascript es igual que en el ejemplo anterior. La imagen que obtenemos si visualizamos el fichero html en el navegador es la siguiente