Revision as of 03:30, 27 February 2009

Nota:

EN: THIS IS STILL A DRAFT 
ES: SIGUE SIENDO UN BORRADOR

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 esta pensada para ofrecer una GUI ^[2]. Sin embargo nos proporciona también una cuantos objectos muy útiles para la interacción del usuario con el mapa^[3].

Una vista de todos los principale Controls de Openlayers

Control	Descripción
	LayerSwitcher El Control para la gestion 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: Click sobre los botones de + o - puestos a los extremos de la barra. El resultado será el aumento/disminución de un nivel de zoom Click en cualquier punto de la zoom bar el slider se mueve en el zoom level mas cercano. la mapa se actualiza al nivel se zoom correspondiente. Usa el Drag&Drop para mover el cursor de la barra al nivel de zoom que prefieres cuando se deja el botón del mouse, lo slider se posiciona al nivel de zoom mas cercano y la mapa se actualiza al nivel de zoom correspondente.
	OverviewMap Crea una pequeña mapa de navegación. Este pequeño mapa enseña la posición del mapa grande y ofrece una herramienta mas de navegación. Normalmente se posiciona en el angulo bajo a la derecha y puede ser reducido con un click en el botón en su borde. El rectangulo dibujado en la mapa pequeña puede ser movido para cambiar la posición del mapa grande.
	Permalink El Control guardar el enlace (permalink) al mapa
	MouseToolbar El Control de Openlayers para cambiar entre navegación y zoom con el ratón
	ScaleLine El Control para eseñar la escala corriente
	MousePosition El Control para enseñar las coordenadas actuales del cursor sobre el mapa

Links

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

la API

Los Objectos de la biblioteca de Openlayers están 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. 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.

La pagina web de la API di 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.

Lo podemos copiar y guardar en un fichero con recorrido:

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

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>Ejemplo de utilizo de los Controls 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 utilizo de los Controls 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 objecto mapa

En la creación del objecto mapa se añaden el parámetro de los Controls ("controls") y su valor es un array ^[5] que contiene todos los Controls 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 solo los Controls LayerSwitcher y Permalink tienen atributos pero mirando la API nos podemos enterar de todas las funciones que cada uno de estos objectos tienen y que podemos utilizar para personalizar nuestra web.

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
↑ Si 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 oras

[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] Si 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 12: / Line 12: @@
 [[Image:Openlayers controls overview.png|thumb|none|400px|Una vista de todos los principale Controls de Openlayers]]
- <pre>
-OpenLayers.Control:
-    Operating elements in OpenLayers are elements related to map navigation as well the display of map information (e.g. scale). The Control class serves as a base class for all operating elements, among them:
-    OpenLayers.Control.PanZoom
-    generates pan/zoom navigation with a panning pad (4 arrow buttons), as well as a ZoomIn, ZoomOut, and ZoomReset button. The slideFactor parameter defines the number of pixels used during the panning processes.
-    OpenLayers.Control.PanZoomBar
-    generates a pan/zoom bar with a pan navigation panel as well as a zoombar with a zoom slider containing a ZoomIn and ZoomOut button at each end. (see Section 2.3.4).
-    The zoom bar is integral to the development of animated zooming features. For this reason its functionality is described in more detail.
-    There are three ways to use the zoom bar:
-. Click on the + or - button located at each end of the zoom bar.
-          This results in an increase/decrease of the map view by one zoom level.
-. Click anywhere on the zoom bar.
-          The slider moves to the nearest predefined zoom level. The map is redrawn to the corresponding zoom level.
-. Use Drag&Drop to move zoom slider smoothly over the zoom bar.
-          Upon releasing the left mouse key, the slider positions itself on the next available zoom level, and the selected map view is redrawn to the corresponding zoom level.
-    OpenLayers.Control.OverviewMap
-    generates a small overview map (see Section 2.3.4). This map shows the current view of the main map and serves as a positioning and navigational tool. The overview map is usually located in the lower right hand side of the map and can be minimized by pressing a button on the map edge. This class provides the functions needed for querying and setting of the selection rectangle, which can be moved by way of defined mouse events.
-    OpenLayers.Control.KeyboardDefaults
-    defines type and activities of (keyboard) key commands.
-    OpenLayers.Control.MouseDefaults
-    defines map activity during mouse events. This includes click, double-click, mouse wheel and mouse movement events.
-</pre>
 {| class="wikitable"
@@ Line 54: / Line 25: @@
 |
 ;PanZoomBar
-El Control para la navegación y los niveles de zoom
+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:
+# Click sobre los botones de + o - puestos a los extremos de la barra.
+: El resultado será el aumento/disminución de un nivel de zoom
+# Click en cualquier punto de la zoom bar
+: el slider se mueve en el zoom level mas cercano. la mapa se actualiza al nivel se zoom correspondiente.
+# Usa el Drag&Drop para mover el cursor de la barra al nivel de zoom que prefieres
+: cuando se deja el botón del mouse, lo slider se posiciona al nivel de zoom mas cercano y la mapa se actualiza al nivel de zoom correspondente.
 |-
 | [[Image:Openlayers control OverviewMap.png|center]]
 |
 ;OverviewMap
-El Control para la vision general del mapa
+Crea una pequeña mapa de navegación. Este pequeño mapa enseña la posición del mapa grande y ofrece una herramienta mas de navegación. Normalmente se posiciona en el angulo bajo a la derecha y puede ser reducido con un click en el botón en su borde. El rectangulo dibujado en la mapa pequeña puede ser movido para cambiar la posición del mapa grande.
 |-
 | [[Image:Openlayers control Permalink.png|center]]
@@ Line 81: / Line 60: @@
 El Control para enseñar las coordenadas actuales del cursor sobre el mapa
 |}
 =Links=

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