Instalación de OpenLayers - ChuWiki

Instalacin de OpenLayers - ChuWiki
http://chuwiki.chuidiang.org/index.php?title=Instalacin_de_OpenLayers
Instalacin de OpenLayers
De ChuWiki
Twittear
Contenido
1 Descarga e instalacin 2 Un ejemplo sencillo 3 OpenLayers con GeoServer
Descarga e instalacin
OpenLayers no es ms que una librera javascript con algunos iconos adicionales para los botones que podemos poner usando esta librera, como botones de zoom del mapa, pintado de polgonos, lneas, puntos sobre el mapa, etc. Por ello la instalacin es fcil, basta descargarse el zip correspondiente de http://trac.osgeo.org/openlayers/wiki/HowToDownload y desempaquetarlo en un sitio pblico de nuestro servidor web, donde ms nos guste.
Un ejemplo sencillo
Vamos a hacer un ejemplo sencillo, utilizando el servidor de mapas que pone OpenLayers disponible. El cdigo de la pgina html sera 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>
1 de 4
01/07/2013 13:35
Veamos algunos detalles En el <head> indicamos que vamos a usar la librera 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 dnde debe ubicar el mapa. Instanciamos una clase OpenLayers.Map de la librera, pasando como parmetro el id del elemento html donde queremos el mapa, en este caso "map". Este mapa, de momento est vaco, 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 parmetros: Un ttulo 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 sera "basic". As que el tercer parmetro es { layer:'basic' }. Finalmente, aadimos la capa al mapa y le decimos al mapa que haga un zoom para ocupar todo el espacio disponible dentro de la pgina html, en concreto, del <div id="map">. Si cargamos esta pgina con el navegador, veremos algo como lo siguiente, puedes jugar con los botones de zoom y con la rueda del ratn, doble click, arrastrar, etc.
OpenLayers con GeoServer

Supongamos ahora que hemos instalado GeoServer en nuestro ordenador y tenemos los mapas que vienen de ejemplo. Vamos a ver cmo quedara nuestro cdigo 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">
2 de 4
01/07/2013 13:35
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 tambin un servidor Apache para presentar pginas html. Dentro de su directorio pblico, 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 travs 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 cdigo html/javascript es igual que en el ejemplo anterior. La imagen que obtenemos si visualizamos el fichero html en el navegador es la siguiente
Obtenido de "http://chuwiki.chuidiang.org/index.php?title=Instalaci%C3%B3n_de_OpenLayers" Categora: Openlayers
3 de 4
01/07/2013 13:35
Esta pgina fue modificada por ltima vez el 12:30, 2 mar 2013.
Esta obra est bajo una licencia de Creative Commons. Para reconocer la autora debes poner http://www.chuidiang.com/chuwiki
4 de 4
01/07/2013 13:35

Instalación de OpenLayers - ChuWiki

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Instalación de OpenLayers - ChuWiki

Încărcat de

Drepturi de autor:

Formate disponibile

Instalacin de OpenLayers - ChuWiki

Instalacin de OpenLayers - ChuWiki

OpenLayers con GeoServer

Instalacin de OpenLayers - ChuWiki

Obtenido de "http://chuwiki.chuidiang.org/index.php?title=Instalaci%C3%B3n_de_OpenLayers" Categora: Openlayers

Instalacin de OpenLayers - ChuWiki

S-ar putea să vă placă și