Latest revision as of 14:57, 20 April 2009

OpenLayers: las herramientas disponibles por defecto

Aquí presentamos las herramientas mas importantes que Openlayers nos ofrece.

OpenLayers es principalmente una API^[1], una biblioteca de funciones para manejar la navegación de mapas en la web y como tal no está pensada para ofrecer una GUI^[2]. Sin embargo nos proporciona también una cuantos objetos muy útiles para la interacción del usuario con el mapa^[3].

Una vista de los principales controles de OpenLayers

Control	Descripción
	LayerSwitcher El control para la gestión de la visibilidad de capas.
	PanZoomBar Crea una barra de zoom y un panel de navegación que contienen los botones de ZoomIn y ZoomOut a los extremos. Hay tres maneras para utilizar la zoom bar: Clic sobre los botones de + o - puestos en los extremos de la barra. el resultado será el aumento/disminución de un nivel de zoom Clic en cualquier punto de la zoom bar el desplazador (slider) se mueve al nivel de zoom más cercano. El mapa se actualiza al nivel de zoom correspondiente. Desplazamiento del cursor a un nivel de zoom concreto cuando se deja el botón del ratón, el slider se posiciona en el nivel de zoom más cercano y el mapa se actualiza al nivel de zoom correspondiente.
	OverviewMap Crea una pequeño mapa de navegación. Este mapa enseña la posición del mapa principal y ofrece una herramienta más de navegación. Normalmente se posiciona en el ángulo inferior derecho y puede ser reducido con un clic en el botón que tiene en su borde. El rectángulo dibujado en este mapa puede ser movido para cambiar la posición del mapa principal.
	Permalink Ofrece un enlace (permalink) al mapa. Esto permite poder guardar en un simple enlace el estado de la navegación del mapa. Así, puedes guardarlo como favorito en tu navegador o enviarlo por correo a un colega.
	MouseToolbar Es una simple barra de herramientas que permite escoger cómo utilizar el ratón entre navegación y zoom con ventana.
	ScaleLine Enseña una escala gráfica sobre el mapa.
	MousePosition Enseña las coordenadas actuales del cursor sobre el mapa.

La API

Los Objetos de la biblioteca de OpenLayers están bien descritos, en inglés, en la documentación eN linea disponible en el sitio web:

http://dev.openlayers.org/releases/OpenLayers-2.6/doc/apidocs/files/OpenLayers-js.html

Por cada clase hay una descripción detallada, ofreciéndose un listado completo de atributos y funciones de cada una de ellas. Cualquier desarrollador con cierta soltura en JavaScript podrá desarrollar aplicaciones de mapas en web con esta biblioteca de componentes sin mucho esfuerzo.

Página web de la API de OpenLayers

Ejemplo en código

En el código que sigue tenemos un ejemplo sencillo de cómo se pueden integrar fácilmente todos los controles descritos anteriormente.

Lo podemos copiar y guardar en un fichero en la siguiente ubicación:

C:\ms4w\apps\mapserv-demo\ol_controls.html

Una vez guardado estará disponible en el servidor local con este enlace^[4]:

http://localhost:9000/mapserv-demo/ol_controls.html

El código fuente

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>Ejemplo de utilización de los Controles de OpenLayers</title>
 
 	<style type="text/css">
         #map {
             width: 512px;
             height: 412px;
             border: 1px solid black;
         }
         #permalink{
             position:absolute;
             margin-left:522px;
         }
     </style>
     <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 
 	<script type="text/javascript">
 		var map;
 		function init(){
 			map = new OpenLayers.Map('map', {
 				controls: [
 					new OpenLayers.Control.PanZoomBar(),
 					new OpenLayers.Control.MouseToolbar(),
 					new OpenLayers.Control.LayerSwitcher({'ascending':false}),
 					new OpenLayers.Control.ScaleLine(),
 					new OpenLayers.Control.Permalink('permalink'),
 					new OpenLayers.Control.MousePosition(),
 					new OpenLayers.Control.OverviewMap(),
 					new OpenLayers.Control.KeyboardDefaults()
 				],
 				numZoomLevels: 6
 				
 			});
 
 
 			var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
 				"http://labs.metacarta.com/wms/vmap0",
 				{layers: 'basic'} );
 			var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
 				"http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
 				{layers: "landsat7"});
 			var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
 				"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
 				{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
 						 "prov_bound,fedlimit,rail,road,popplace",
 				 transparent: "true", format: "image/png" });
 
 			jpl_wms.setVisibility(false);
 			dm_wms.setVisibility(false);
 
 			map.addLayers([ol_wms, jpl_wms, dm_wms]);
 			if (!map.getCenter()) map.zoomToMaxExtent();
 		}
 	</script>
 
    </head>
    <body onload="init()">
        <h1>Ejemplo de utilización de los controles de OpenLayers</h1>
 
        <p>
            Añadir zoom, navegación, layer switcher, overview map y enlaces 
            permalink a la mapa de  Openlayers.
        </p> 
         <a href="" id="permalink">Permalink</a>
         <div id="map"></div>
     </body>
 </html>

Comentarios: el objeto mapa

En la creación del objeto mapa se añaden como segundo parámetro los Controles ("controls") y su valor es un array^[5] que contiene todos los Controles que hemos visto antes.

                       map = new OpenLayers.Map('map', {
				controls: [
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.MouseToolbar(),
					new OpenLayers.Control.LayerSwitcher({'ascending':false}),
					new OpenLayers.Control.ScaleLine(),
					new OpenLayers.Control.Permalink('permalink'),
					new OpenLayers.Control.MousePosition(),
					new OpenLayers.Control.OverviewMap(),
					new OpenLayers.Control.KeyboardDefaults()
				],
				numZoomLevels: 6
				
			});

En este caso sólo los Controles LayerSwitcher y Permalink tienen atributos pero mirando la API podemos descubrir todas las funciones que cada uno de estos objetos tienen y qué podemos utilizar para personalizar nuestra web.

En la creación del objeto mapa, además de los controles se añaden como parámetros el identificador del objeto div en el que deberá dibujarse el mapa (en este caso el div tiene como identificador el valor map y por último el número de niveles de zoom que queremos tener.

Links

Smart Map Browsing,Emanuel Schütze, Bremen University of Applied Sciences ,June 1st 2007: http://www.smartmapbrowsing.org

Autores

Referencias

↑ Interfaz de programación de aplicaciones. Definición: http://es.wikipedia.org/wiki/API
↑ Interfaz gráfica de usuario. Definición: http://es.wikipedia.org/wiki/GUI
↑ Página oficial de ejemplo sobre los Controls. http://openlayers.org/dev/examples/controls.html
↑ Suponiendo que habéis seguido las indicaciones de las lecciones publicadas en http://wiki.osgeo.org/wiki/Instalaci%C3%B3n_y_manejo_de_servicios_OWS_con_UMN_Mapserver_y_Openlayers
↑ Definición de Array. http://es.wikipedia.org/wiki/Array

Licencia

la licencia por este articulo es: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/deed.es).
esta licencia permite:
- copiar, distribuir y comunicar públicamente la obra
- hacer obras derivadas
bajo estas condiciones:
- Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).
- Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta obra.
- Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor
- Nada en esta licencia menoscaba o restringe los derechos morales del autor.

Duración

Por esta clase se evalúa una duración de X horas

[1] Interfaz de programación de aplicaciones. Definición: http://es.wikipedia.org/wiki/API

[2] Interfaz gráfica de usuario. Definición: http://es.wikipedia.org/wiki/GUI

[3] Página oficial de ejemplo sobre los Controls. http://openlayers.org/dev/examples/controls.html

[4] Suponiendo que habéis seguido las indicaciones de las lecciones publicadas en http://wiki.osgeo.org/wiki/Instalaci%C3%B3n_y_manejo_de_servicios_OWS_con_UMN_Mapserver_y_Openlayers

[5] Definición de Array. http://es.wikipedia.org/wiki/Array

[1]

[2]

[3]

[4]

[5]

@@ Line 1: / Line 1: @@
-Nota:
- EN: THIS IS STILL A DRAFT
+=OpenLayers: las herramientas disponibles por defecto =
- ES: SIGUE SIENDO UN BORRADOR
+Aquí presentamos las herramientas mas importantes que Openlayers nos ofrece.
+OpenLayers es principalmente una API<ref> Interfaz de programación de aplicaciones. Definición: http://es.wikipedia.org/wiki/API</ref>, una biblioteca de funciones para manejar la navegación de mapas en la web y como tal no está pensada para ofrecer una GUI<ref>Interfaz gráfica de usuario. Definición: http://es.wikipedia.org/wiki/GUI</ref>. Sin embargo nos proporciona también una cuantos objetos muy útiles para la interacción del usuario con el mapa<ref>Página oficial de ejemplo sobre los Controls. http://openlayers.org/dev/examples/controls.html</ref>.
+[[Image:Openlayers controls overview.png|thumb|none|400px|Una vista de los principales controles de OpenLayers]]
-=Openlayers: las herramientas disponibles por defecto =
-Aquí presentamos las herramientas mas importantes que Openlayers nos ofrece.
-OpenLayers es principalmente una API <ref> Interfaz de programación de aplicaciones. Definición: http://es.wikipedia.org/wiki/API</ref>, una biblioteca de funciones, para manejar la navegación de mapas en la web y como tal no esta pensada para ofrecer una GUI <ref>Interfaz gráfica de usuario. Definición: http://es.wikipedia.org/wiki/GUI</ref>. Sin embargo nos proporciona también una cuantos objectos muy útiles para la interacción del usuario con el mapa.
+{| class="wikitable"
+!Control !! Descripción
+|-
+| [[Image:Openlayers control layerswitcher.png]]
+|
+===LayerSwitcher===
+El control para la gestión de la visibilidad de capas.
+|-
+| [[Image:Openlayers control pan.png|center]]
+[[Image:Openlayers control zoom.png|center]]
+|
+===PanZoomBar===
+Crea una barra de zoom y un panel de navegación que contienen los botones de ''ZoomIn'' y ''ZoomOut'' a los extremos.
+Hay tres maneras para utilizar la ''zoom bar'':
-http://openlayers.org/dev/examples/controls.html
+# Clic sobre los botones de + o - puestos en los extremos de la barra.
+: el resultado será el aumento/disminución de un nivel de zoom
+# Clic en cualquier punto de la ''zoom bar''
+: el desplazador (''slider'') se mueve al nivel de zoom más cercano. El mapa se actualiza al nivel de zoom correspondiente.
+# Desplazamiento del cursor a un nivel de zoom concreto
+: cuando se deja el botón del ratón, el ''slider'' se posiciona en el nivel de zoom más cercano y el mapa se actualiza al nivel de zoom correspondiente.
+|-
+| [[Image:Openlayers control OverviewMap.png|center]]
+|
-==LayerSwitcher==
+===OverviewMap===
-<span style="color:red">poner imagen LayerSwitcher</span>
+Crea una pequeño mapa de navegación. Este mapa enseña la posición del mapa principal y ofrece una herramienta más de navegación. Normalmente se posiciona en el ángulo inferior derecho y puede ser reducido con un clic en el botón que tiene en su borde. El rectángulo dibujado en este mapa puede ser movido para cambiar la posición del mapa principal.
-==NavToolbar==
+|-
-<span style="color:red">poner imagen NavToolbar</span>
+| [[Image:Openlayers control Permalink.png|center]]
-==OverviewMap==
+|
-Create an overview map to display the extent of your main map and provide additional navigation control.  Create a new overview map with the OpenLayers.Control.OverviewMap constructor.
+===Permalink===
+Ofrece un enlace (''permalink'') al mapa. Esto permite poder guardar en un simple enlace el estado de la navegación del mapa. Así, puedes guardarlo como favorito en tu navegador o enviarlo por correo a un colega.
+|-
+| [[Image:Openlayers control MouseToolbar.png|center]]
+|
+===MouseToolbar===
+Es una simple barra de herramientas que permite escoger cómo utilizar el ratón entre navegación y zoom con ventana.
+|-
+| [[Image:Openlayers control ScaleLine.png|center]]
+|
+===ScaleLine===
+Enseña una escala gráfica sobre el mapa.
+|-
+| [[Image:Openlayers control MousePosition.png|center]]
+|
+===MousePosition===
+Enseña las coordenadas actuales del cursor sobre el mapa.
+|}
-<span style="color:red">poner imagen OverviewMap</span>
+=La API=
-==NavToolbar==
+Los Objetos de la biblioteca de OpenLayers están bien descritos, en inglés, en la documentación eN linea disponible en el sitio web:
-<span style="color:red">poner imagen NavToolbar</span>
-==Permalink==
-<span style="color:red">poner imagen Permalink</span>
-==la API==
-Los Objectos el la biblioteca de Openlayers están muy bien descritos, en inglés, en la documentación el linea disponible en el sitio web:
 * http://dev.openlayers.org/releases/OpenLayers-2.6/doc/apidocs/files/OpenLayers-js.html
-Por cada clase hay una descripción detallada y se ofrece el listado de los atributos y funciones.
+Por cada clase hay una descripción detallada, ofreciéndose un listado completo de atributos y funciones de cada una de ellas. Cualquier desarrollador con cierta soltura en JavaScript podrá desarrollar aplicaciones de mapas en web con esta biblioteca de componentes sin mucho esfuerzo.
-Quien esta mas confiado con el código en general y el Javascript en especifico encontrará muy fácil desarrollar aplicaciones de mapas en la web que utilicen esta biblioteca.
-<span style="color:red">poner imagen API</span>
+[[Image:Openlayers API web.png|thumb|none|400px|Página web de la API de OpenLayers]]
 =Ejemplo en código=
-En el código que sigue tenemos un ejemplo sencillo de como se pueden integrar facilmente todos los Controls descriptos antes.
+En el código que sigue tenemos un ejemplo sencillo de cómo se pueden integrar fácilmente todos los controles descritos anteriormente.
-==el código==
+Lo podemos copiar y guardar en un fichero en la siguiente ubicación:
+*<tt>C:\ms4w\apps\mapserv-demo\ol_controls.html</tt>
+Una vez guardado estará disponible en el servidor local con este enlace<ref>Suponiendo que habéis seguido las indicaciones de las lecciones publicadas en http://wiki.osgeo.org/wiki/Instalaci%C3%B3n_y_manejo_de_servicios_OWS_con_UMN_Mapserver_y_Openlayers</ref>:
+*http://localhost:9000/mapserv-demo/ol_controls.html
+==El código fuente==
+<pre>
   <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
-          <title>OpenLayers Map Controls Example</title>
+          <title>Ejemplo de utilización de los Controles de OpenLayers</title>
   	<style type="text/css">
@@ Line 47: / Line 91: @@
               height: 412px;
               border: 1px solid black;
+         }
+         #permalink{
+             position:absolute;
+             margin-left:522px;
           }
       </style>
@@ Line 59: / Line 107: @@
   					new OpenLayers.Control.MouseToolbar(),
   					new OpenLayers.Control.LayerSwitcher({'ascending':false}),
- 					new OpenLayers.Control.Permalink(),
   					new OpenLayers.Control.ScaleLine(),
-  					new OpenLayers.Control.Permalink(),
+  					new OpenLayers.Control.Permalink('permalink'),
   					new OpenLayers.Control.MousePosition(),
   					new OpenLayers.Control.OverviewMap(),
@@ Line 93: / Line 140: @@
      </head>
      <body onload="init()">
-         <h1 id="title">Ejemplo del los Controls del mapa</h1>
+         <h1>Ejemplo de utilización de los controles de OpenLayers</h1>
-         <p id="shortdesc">
+         <p>
-             Añadir zoom, navegación, layer switcher, overview map y enlaces permalink a la mapa de  Openlayers.
+             Añadir zoom, navegación, layer switcher, overview map y enlaces
+            permalink a la mapa de  Openlayers.
          </p>
+         <a href="" id="permalink">Permalink</a>
-          <div id="map" class="smallmap"></div>
+          <div id="map"></div>
       </body>
   </html>
+</pre>
+==Comentarios: el objeto mapa==
+En la creación del objeto mapa se añaden como segundo parámetro los Controles ("controls") y su valor es un array<ref>Definición de Array. http://es.wikipedia.org/wiki/Array</ref> que contiene todos los Controles que hemos visto antes.
+                        map = new OpenLayers.Map('map', {
+ 				<span style='background-color:yellow'>controls: [</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.PanZoomBar(),</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.MouseToolbar(),</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.LayerSwitcher({'ascending':false}),</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.ScaleLine(),</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.Permalink('permalink'),</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.MousePosition(),</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.OverviewMap(),</span>
+ 					<span style='background-color:yellow'>new OpenLayers.Control.KeyboardDefaults()</span>
+ 				<span style='background-color:yellow'>],</span>
+ 				numZoomLevels: 6
+ 			});
-==comentarios==
+En este caso sólo los Controles ''LayerSwitcher'' y ''Permalink'' tienen atributos pero mirando la API podemos descubrir todas las funciones que cada uno de estos objetos tienen y qué podemos utilizar para personalizar nuestra web.
+En la creación del objeto mapa, además de los controles se añaden como parámetros el identificador del objeto <tt>div</tt> en el que deberá dibujarse el mapa (en este caso el <tt>div</tt> tiene como identificador el valor <tt>map</tt> y por último el número de niveles de zoom que queremos tener.
+=Links=
+* Smart Map Browsing,Emanuel Schütze, Bremen University of Applied Sciences ,June 1st 2007: http://www.smartmapbrowsing.org
 =Autores=
@@ Line 124: / Line 197: @@
 =Duración=
-Por esta clase se evalúa una duración de X oras
+Por esta clase se evalúa una duración de X horas
-[[Category:Español]]
 [[Category:Education]]
 [[Category:Cursos]]

Difference between revisions of "Openlayers: las herramientas disponibles por defecto"

Latest revision as of 14:57, 20 April 2009

Contents

OpenLayers: las herramientas disponibles por defecto

LayerSwitcher

PanZoomBar

OverviewMap

Permalink

MouseToolbar

ScaleLine

MousePosition